Ajax的使用

ajax的基本使用方法

ajax其实是个很简单的东西，来来去去就是那一套。他实现的功能是什么呢？举一个例子：在用户登陆的时候，用户输入了用户名和密码，然后点击登录按钮。此时，内部发生了什么事情呢? 先把用户输入的数据通过后台和数据库进行检验，看用户名和密码是否匹配。如果匹配，则登录。如果不匹配。则调用javascript中的函数，提示用户密码错误。这里实质是点击一个按钮，同时进行了javascript的处理和后台的处理。

              其实，ajax做的就是这样一类事情：触发事件，同时调用javascript函数和后台处理。（这个其实就是所说的异步刷新、部分刷新的本质）

               理解了ajax在干一件什么样的事情，那么我们就来看看如何使用。其实，ajax的使用已经是一种套路的东西。看懂了下面的例子，便可以举一反三，灵活运用。（使用PHP后台脚本）

       *基础知识：url的参数。 url: test.php?userName=tom&age=16&gender=male 

      上面的url中！期中test.php可以理解为你后台处理的那个页面（文件名），这个url一共有三个参数，userName age 和 gender  他们的赋值用等号赋值，跟在文件名后的第一个参数名前加“?”，后面的加“&”。

在test.php中！可以通过$_GET或$_POST（这个要添加http头，再次不叙述）方法来获取值。比如：要获取userName的值，可以这个获得：$userName = $_GET["userName"];此处，用$_GET还是用$_POST要看js文件中的这条语句window.open("GET",url,true);第一个参数是GET就用$_GET，第一个参数是POST，就用$_POST。

例子： 

下面是js代码：

1. function test()  
2. {  
3. var userName = document.getElementById("userName").value;  
4. var age = document.getElementById("age").value;  
5. var xmlhttp;  
6. <span style="color:#ff0000;">var url = test.php?userName=userName&age=age;  //url要自己设定</span>  
7. if (window.XMLHttpRequest)  
8.   {// code for IE7+, Firefox, Chrome, Opera, Safari  
9.   xmlhttp=new XMLHttpRequest();  
10.   }  
11. else  
12.   {// code for IE6, IE5  
13.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
14.   }  
15. xmlhttp.onreadystatechange=function()  
16.   {  
17.   if (xmlhttp.readyState==4 && xmlhttp.status==200)  
18.     {  
19.        <span style="color:#ff0000;">//此处便是进行JS处理的部分</span>  
20.     }  
21.   }  
22. xmlhttp.open("GET",url,true);  
23. xmlhttp.send();  
24. }

下面是后台PHP代码：

1. <?php  
2.     $userName = $_GET["userName"];  
3.     $age = $_GET["age"];  
4.     //执行一些数据库的操作  
5.     echo "bingo";  
6. ?>

 * 在js代码中！除了两处红色的地方需要自己设定修改，其他的都可以照搬（get、post特殊情况除外）。

   * 在js代码的第二处红色处，可以通过 xmlhttp.responseText来获得后台代码echo的内容。此处，

var response = xmlhttp.responseText;

则 response = "bingo".

   只要掌握了这些，基本上可以灵活的使用AJAX这个方便、革命性的工具了。