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

 
 

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

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

  
  
</body>
 
 

Javascript代码:

 
 

  
  
<scripttype="text/javascript">
  
  

  
  
window.onload=initAll;
  
  
functioninitAll(){
  
  
//document.getElementById("test").onclick=checkName;//键盘被松开时执行checkName
  
  
document.getElementById("username").onkeyup=checkName;
  
  
}
  
  

  
  
//创建Ajax引擎
  
  
functiongetXmlHttpObject(){
  
  

  
  
if(window.ActiveXObject){//兼容IE
  
  
xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
  
  
}else{
  
  
xmlHttpRequest=newXMLHttpRequest();
  
  
}
  
  
returnxmlHttpRequest;
  
  
}
  
  

  
  

  
  
//验证用户名是否存在
  
  
varmyXmlHttpRequest="";
  
  
functioncheckName(){
  
  
myXmlHttpRequest=getXmlHttpObject();//过程1
  
  
if(myXmlHttpRequest){
  
  
//通过myXmlRequest对象发送请求到服务器的某个页面
  
  
varurl="registerProcess.php?username="+document.getElementById("username").value;
  
  
//打开请求
  
  
myXmlHttpRequest.open("get",url,true);
  
  

  
  
//指定回调函数
  
  
myXmlHttpRequest.onreadystatechange=chuli;
  
  

  
  
//如果是get请求则填入null即可；如果是post请求则填入实际的数据
  
  
myXmlHttpRequest.send(null);//过程2
  
  

  
  
}
  
  
}
  
  
//回调函数过程4
  
  
functionchuli(){//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"用户名可用";
  
  
}
  
  
?>
 
 

效果如下所示：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!