Ajax技术总结

1、简介：
   Ajax:Asynchronous(异步的) JavaScript And XML。Ajax技术使我们可以通过JavaScript发送请求到服务器，并获得返回结果，这就让我们可以在不要的时候只更新页面的一小部分，而不用整个页面都刷新，这称为“无刷新”技术。其实Ajax并不是一种全新的技术，而是整合了几种现有的技术：JavaScript、XML和CSS。其核心是JavaScript，我们可以通过JavaScript的XmlHttpRequest对象完成发送请求到服务器并返回响应结果的任务，然后使用JavaScript更新局部页面。异步指的是：JavaScript发送请求后，并不是一直等着服务器响应，而是发送请求后继续做别的事，请求响应的处理是异步完成的。XML一般用于请求数据和响应数据的封装。CSS用于美化页面样式。

 

2、以下列出标准XmlHttpRequest操作:
abort():  停止当前请求
getAllResponseHeaders():  把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header"):  返回指定首部的串值
open("method","url"):  建立对服务器的调用 
send(content):  向服务器发送请求
setRequestHeader("header","value"):  把指定首部设置为所提供的值。

标准XmlHttpRequest操作说明：
重点讲解open()方法,此方法的具体参数和说明如下:
   1、void open(String method,String url,booleab asynch,String username,String password):这是初始化一个请求的纯脚本方法。其中前两个参数是必须的，后三个是可选参数。要提供调用特定方法(GET,POST或PUT)和提供电泳资源的URL，另外还可以传递一个Boolean值，指示这个调用是异步的还是同步的。默认为true，表示请求本质上时异步的。如果这个参数为false，处理就会等待，直到从服务器返回响应为止。最后两个参数不说自明，允许你指定一个特定的用户名和密码。

   2、void send(content):这个方法具体向服务器发送请求，如果请求声明为异步的，这个方法就会立刻返回，否则它就会等待直到接收到响应为止。可选参数是DOM对象的实例、输入流或者串。传入这个方法的内容会作为请求体的一部分发送。
  
   3、void setRequestHeader(String header,String value): 把指定首部设置为所提供的值。这个方法必须在调用open()之后才能调用。

 

3、以下列出标准XmlHttpRequest属性：
onreadystatechange:  每个状态改变时都会触发这个处理器，通常会调用一个JavaScript函数
readyState:  请求的状态。有5个可取值：0(未初始化)，1(正在加载)，2(已加载)，3(交互中)，4(完      成)
responseText:  服务器的响应，表示一个串
responseXML:   服务器的响应，表示为 XML。这个对象可以解析为一个DOM对象
status:  服务器的HTTP状态码(200对应ok，404对应Not Found(未找到),等等)
statusText:  HTTP状态码的相应文本(ok或not found等等)

 

4、Ajax的交互过程：
   1、一个客户端触发一个Ajax事件。如：
      <input type="text" name="username" id="username" onchange="vaildation();" />
   2、创建XmlHttpRequest对象的一个实例。使用open()方法建立调用，并设置URL以及所希望的HTTP方法(通常是GET或POST)。请求实际上通过一个send()方法调用触发。如：
        var xmlHttp;
 
        //创建XmlHttpRequest对象
        //注意： 创建XmlHttpRequest对象时，要根据不同的浏览器创建不同的XmlHttpRequest对象
 function createXMLHttpRequest() {
  if(window.ActiveXObject) {   //IE浏览器
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
  } else if(window.XMLHttpRequest) {  //非IE浏览器
   xmlHttp = new XMLHttpRequest();
  } 
 }
 
 function vaildation() {
  createXMLHttpRequest();
  var username = document.getElementById("username");
  xmlHttp.onreadystatechange = callback;
  var url = "servlet/ValidationServlet?username=" + escape(username.value);
  xmlHttp.open("GET",url,false);
  xmlHttp.send(null);
 }

 

   3、向服务器做出请求。可能是servlet、CGI脚本等等
   4、服务器做你想做的事情。如访问数据库，甚至访问另一个系统
   5、请求返回到浏览器。
   6、XmlHttpRequest对象配置为处理返回时要调用callback()函数。如:
       function callback() {
  if(xmlHttp.readyState == 4) {
   if(xmlHttp.status == 200) {
    //do something interesting her
   }
  }
 }