AJAX（一）

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代码：

<!--第一个表单--> 
<form action="" method="post"> 
用户名<br /> 
<input type="text" name="username1" id="username" /> 
<input type="text" id="myres" style="border-width:0;color:red;" ><br /> 
密 码<br /> 
<input type="password" name="password" /><br /> 
邮箱<br /> 
<input type="text" name="email" /><br /> 
<input type="submit" vlaue="用户注册" /> 
</form><br /> 
 
<!--第二个表单--> 
<form action="" method="post"> 
用户名<br /> 
<input type="text" name="username2" id="username" /> 
<input type="text" id="myres" style="border-width:0;color:red;" ><br /> 
密 码<br /> 
<input type="password" name="password" /><br /> 
邮箱<br /> 
<input type="text" name="email" /><br /> 
<input type="submit" vlaue="用户注册" /> 
</form> 
 
</body> 
 

Javascript代码:

<script type="text/javascript"> 
 
window.onload = initAll; 
function initAll(){ 
    //document.getElementById("test").onclick = checkName;       //键盘被松开时执行checkName 
    document.getElementById("username").onkeyup = checkName; 
} 
 
//创建Ajax引擎 
function getXmlHttpObject(){ 
     
    if(window.ActiveXObject){//兼容IE 
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
    }else{ 
        xmlHttpRequest = new XMLHttpRequest(); 
    } 
    return xmlHttpRequest; 
} 
 
 
//验证用户名是否存在 
var myXmlHttpRequest = ""; 
function checkName(){ 
    myXmlHttpRequest = getXmlHttpObject();//过程 1 
    if(myXmlHttpRequest){ 
        //通过myXmlRequest对象发送请求到服务器的某个页面 
        var url = "registerProcess.php?username="+document.getElementById("username").value; 
        //打开请求 
        myXmlHttpRequest.open("get",url,true); 
         
        //指定回调函数 
        myXmlHttpRequest.onreadystatechange=chuli; 
 
        //如果是get请求则填入null即可；如果是post请求则填入实际的数据 
        myXmlHttpRequest.send(null);//过程 2 
     
    } 
} 
//回调函数 过程 4 
function chuli(){       //alert(“处理函数被调用”.myXmlHttpRequest.readyState);  
    if(myXmlHttpRequest.readyState==4){         document.getElementById("myres").value=myXmlHttpRequest.responseText; 
        } 
} 
</script> 

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

..

registerProcess.php页面代码：

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

效果如下所示：