AJAX

 1 XmlHttp是什么？
 2 最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
 3 来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。 
 4 
 5 现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。 
 6 
 7 XmlHttp对象参考：
 8 属性：
 9 onreadystatechange* 指定当readyState属性改变时的事件处理句柄。只写 
10 readyState  返回当前请求的状态，只读. 
11 responseBody  将回应信息正文以unsigned byte数组形式返回.只读 
12 responseStream 以Ado Stream对象的形式返回响应信息。只读 
13 responseText 将响应信息作为字符串返回.只读 
14 responseXML 将响应信息格式化为Xml Document对象并返回，只读 
15 status 返回当前请求的http状态码.只读 
16 statusText  返回当前请求的响应行状态，只读 
17 
18 方法：
19 abort 取消当前请求 
20 getAllResponseHeaders 获取响应的所有http头 
21 getResponseHeader 从响应信息中获取指定的http头 
22 open 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码) 
23 send 发送请求到http服务器并接收回应 
24 setRequestHeader 单独指定请求的某个http头

AJAX学习

1.创建对象 variable=new XMLHttpRequest()  新版本
 variable=new ActiveXObject("Microsoft.XMLHTTP");老版本 

2.请求 XMLHTTP.open("GET/POST","url文件在服务器上的位置","true同步/false异步")
       XMLHTTP.send()

 POST的使用
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

3.响应
responseText   获得字符串形式的响应数据
responseXML    获得 XML 形式的响应数据

4.readyState
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status
200: "OK"
404: 未找到页面

AJAX实例

 1 <script>
 2 function loadXMLDoc()
 3 {
 4     var xmlhttp;
 5     if (window.XMLHttpRequest)
 6     {
 7         //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
 8         xmlhttp=new XMLHttpRequest();
 9     }
10     else
11     {
12         // IE6, IE5 浏览器执行代码
13         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
14     }
15     xmlhttp.onreadystatechange=function()
16     {
17         if (xmlhttp.readyState==4 && xmlhttp.status==200)
18         {
19             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
20         }else{
　　　　　　　　}
21     }
22     xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
23     xmlhttp.send();
24 }
25 </script>

AJAX封装

 1 function ajax(options){
 2   var xhr = null;
 3   var params = formsParams(options.data);
 4   if(window.XMLHttpRequest){
 5      xhr = new XMLHttpRequest()    
 6     } else {
 7         xhr = new ActiveXObject("Microsoft.XMLHTTP");
 8       }  
 9   if(options.type == "GET"){
10       xhr.open(options.type,options.url + "?"+ params,options.async); 
11       xhr.send(null)    
12     } else if(options.type == "POST"){
13       xhr.open(options.type,options.url,options.async); 
14       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
15       xhr.send(params);
16       }   
17 xhr.onreadystatechange = function(){    
18     if(xmlhttp.readyState==4){
19           if(xmlhttp.status==200||xmlhttp.status==304){
20             options.success(xhr.responseText);
21           }
22         }
23   } 
24 }   
25 function formsParams(data){  
26   var arr = [];   
27   for(var prop in data){  
28     arr.push(prop + "=" + data[prop]);    
29   }        
30   return arr.join("&"); 
31 }