Ajax = Asynchronous JavaScript and XML(异步的Javascript和XML)。

Ajax不是新的编程语言，而是一种使用现有标准的新方法。

    Ajax的历史。2005年2月Jesse James Garret在他的文章中首次提出了Ajax这个术语。Gmail、Google Maps和Flickr等web应用程序便是基于这种技术。这些应用程序具有更好的响应性，能够立即更行页面，提供了出色的交互和更好的用户体验。

     根据Garret的说法，Ajax本身并不是一种新技术，它是由几种长期存在的web技术组合而成的：

     使用html和css控制页面结构和表示方法；

     使用DOM显示和操纵页面；

     使用浏览器的XMLHttpRequest对象在客户机和服务器之间传输数据；

     使用XML作为在客户机和服务器之间传输的数据的格式；

     最后，使用Javascript动态地显示所有内容并且提供交互功能。

 

     Ajax之所以很流行，是因为它能解决以下几个其它技术解决不了的问题：

     1.页面无刷新的动态数据交换

     2.局部刷新页面

     不刷新整个页面便可与服务器通信的方法有：Flash、Java applet、框架、隐藏的iframe、XMLHttpRequest（Ajax）。

 

     Ajax应用程序在用户和服务器之间建立一个中介。Ajax引擎（Ajax engine）向用户提供界面（借助html和css）。如果用户的操作并不要求向服务器发出请求（例如，显示已经存储在本地的数据），那么Ajax 引擎会进行响应。这使浏览器能够对许多用户操作立刻做出反应，使页面的反应像桌面程序那样迅速。如果用户操作需要服务器调用，Ajax引擎就异步地执行它，因此用户不需要等待服务器的响应。用户可以继续与应用程序进行交互，当请求的数据到达时，引擎会更新页面。这里的重点是，用户的操作不会由于等待服务器而暂停。

下面是一个无刷新验证用户名的例子。

HMTL代码：

1. <!--第一个表单--> 
2. <form action="" method="post"> 
3. 用户名<br /> 
4. <input type="text" name="username1" id="username" /> 
5. <input type="text" id="myres" style="border-width:0;color:red;" ><br /> 
6. 密 码<br /> 
7. <input type="password" name="password" /><br /> 
8. 邮箱<br /> 
9. <input type="text" name="email" /><br /> 
10. <input type="submit" vlaue="用户注册" /> 
11. </form><br /> 
12.  
13. <!--第二个表单--> 
14. <form action="" method="post"> 
15. 用户名<br /> 
16. <input type="text" name="username2" id="username" /> 
17. <input type="text" id="myres" style="border-width:0;color:red;" ><br /> 
18. 密 码<br /> 
19. <input type="password" name="password" /><br /> 
20. 邮箱<br /> 
21. <input type="text" name="email" /><br /> 
22. <input type="submit" vlaue="用户注册" /> 
23. </form> 
24.  
25. </body> 

 

Javascript代码:

1. <script type="text/javascript"> 
2.  
3. window.onload = initAll; 
4. function initAll(){ 
5.     //document.getElementById("test").onclick = checkName;       //键盘被松开时执行checkName 
6.     document.getElementById("username").onkeyup = checkName; 
7. } 
8.  
9. //创建Ajax引擎 
10. function getXmlHttpObject(){ 
11.      
12.     if(window.ActiveXObject){
    //兼容IE 
13.         xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
14.     }else{ 
15.         xmlHttpRequest = new XMLHttpRequest(); 
16.     } 
17.     return xmlHttpRequest; 
18. } 
19.  
20.  
21. //验证用户名是否存在 
22. var myXmlHttpRequest = ""; 
23. function checkName(){ 
24.     myXmlHttpRequest = getXmlHttpObject();//过程 1 
25.     if(myXmlHttpRequest){ 
26.         //通过myXmlRequest对象发送请求到服务器的某个页面 
27.         var url = "registerProcess.php?username="+document.getElementById("username").value; 
28.         //打开请求 
29.         myXmlHttpRequest.open("get",url,true); 
30.          
31.         //指定回调函数 
32.         myXmlHttpRequest.onreadystatechange=chuli; 
33.  
34.         //如果是get请求则填入null即可；如果是post请求则填入实际的数据 
35.         myXmlHttpRequest.send(null);//过程 2 
36.      
37.     } 
38. } 
39. //回调函数 过程 4 
40. function chuli(){       //alert(“处理函数被调用”.myXmlHttpRequest.readyState);  
41.     if(myXmlHttpRequest.readyState==4){         document.getElementById("myres").value=myXmlHttpRequest.responseText; 
42.         } 
43. } 
44. </script> 

点击验证用户名按钮，会弹出四个对话框分别为四个状态：

..

registerProcess.php页面代码：

1. <?php 
2. header("Content-type:text/html; charset=GBK");  
3. //接收数据 
4. $username=$_GET['username']; 
5. //http响应。过程3 
6. if($username=="xiyou"){//如果输入用户名为“xiyou”，则提示用户名不可用，其他显示可用 
7.     echo "用户名不可用"; 
8. }else{ 
9.     echo "用户名可用"; 
10. } 
11. ?>