1.什么是AJAX?

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它使用：

1. 使用XHTML+CSS来标准化呈现；
2. 使用XML和XSLT进行数据交换及相关操作；
3. 使用XMLHttpRequest对象与Web服务器进行异步数据通信；
4. 使用Javascript操作Document Object Model进行动态显示及交互；

5. 使用JavaScript绑定和处理所有数据。

   2.AJAX的工作原理

   Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
   Ajax：Asynchronous javascript and xml，实现了客户端与服务器进行数据交流过程。使用技术的好处是：不用页面刷新，并且在等待页面传输数据的同时可以进行其他操作。

   3.XMLHttpRequest对象的属性和方法。

6. 主要的属性：
   readyState属性有五个状态值。
   0：是uninitialized，未初始化。已经创建了XMLHttpRequest对象但是未初始化。
   1：是loading，send for request but not called .已经开始准备好要发送了。
   2：是loaded, send called,headers and status are available。已经发送，但是还没有收到响应。
   3：是interactive，downloading response,but responseText only partial set.正在接受响应，但是还不完整。
   4：是completed，finish downloading.接受响应完毕。
   responseText：服务器返回的响应文本。只有当readyState>=3的时候才有值，根据readyState的状态值，可以知道，当readyState=3，返回的响应文本不完整，只有readyState=4，完全返回，才能接受全部的响应文本。
   responseXML：response as Dom Document object。响应信息是xml，可以解析为Dom对象。
   status：服务器的Http状态码，若是200，则表示OK，404，表示为未找到。
   statusText：服务器http状态码的文本。比如OK，Not Found。

7. 主要的方法：
   open（method，url，boolean）：打开XMLHttpRequest对象。其中method方法有get，post，delete，put。若是查数据，从服务器中得到一定的数据，则使用get。若是直接提交到服务器中，更新一定的数据，则使用post；url是请求资源的地址。第三个参数表示是否使用异步。默认情况是true，因为Ajax的特点就是异步传送。若使用同步则false。异步和同步上述已经举例。
   send（body）：发送请求Ajax引擎，让Ajax引擎操作。其中发送的内容可以是需要的参数，若是没有参数，直接send（null)

4.使用Ajax

首先，有客户端事件触发Ajax事件。
然后，创建xmlHttpRequest对象，根据浏览器不同，创建的xmlHttpRequest对象不同。用open调用，用send发送请求给Ajax引擎。
最后，执行完毕后，把结果返回给客户端。

测试代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

// 创建 ajax
function ajaxFunction(){  
   var xmlHttp;  
   try{ 
      // Firefox, Opera 8.0+, Safari  
      xmlHttp=new XMLHttpRequest();  
   }  
   catch (e){  
      try {
        // Internet Explorer  
        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  
      }  
      catch (e){  
        try{  
          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  
        }  
        catch (e){}  
      }  
   }  
   return xmlHttp;  
}  
//1 创建XMLHttpRequest对象  
var xhr = ajaxFunction();  
          
/* 
 2 客户端与服务器端，建立连接 
 open(method, url, asynch) 
 method:请求类型，类似 “GET”或”POST”的字符串 
 url:请求路径 
 asynch:表示请求是否要异步传输，默认值为true(异步)。 
*/   
xhr.open("get","../testServlet?timeStamp="+new Date().getTime()+"&c=9",true);  
       
/* 
 3 客户端向服务器端发送请求 
 send()方法 
 如果请求类型是GET方式的话，send()方法发送的请求数据，服务器端接收不到.这个步骤是不能省略的！ 
*/   
xhr.send("a=7&b=8");        //send(null);  
    
/*  
4 服务器端响应数据 
readyState 属性表示Ajax请求的当前状态。它的值用数字代表。 
0 代表未初始化。 还没有调用 open 方法 
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用 
2 代表已加载完毕。send 已被调用。请求已经开始 
3 代表交互中。服务器正在发送响应 
4 代表完成。响应发送完毕 
常用状态码及其含义： 
404 没找到页面(not found) 
403 禁止访问(forbidden) 
500 内部服务器出错(internal service error) 
200 一切正常(ok) 
304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 ) 
*/  
xhr.onreadystatechange = function(){  
// alert(xhr.readyState);  
// alert(xhr.status);  
  if(xhr.readyState==4){  
      if(xhr.status==200||xhr.status==304){  
          var data = xhr.responseText;  
          alert(data);  
      }  
  }
}

完结 散花~~~~