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 "用户名可用";
}
?>

效果如下所示：