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

效果如下所示：

相关推荐