AJAX

Posted 2020-08-25 Young_Yang_Yang

AJAX

一.XMLHttpRequest的概述

1.XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的，非W3C标准。

2.创建XMLHttpRequest对象(由于非标准所以实现方法不统一)。

　　a.Internet Explorer把XMLHttpRequest实现为一个ActiveX对象。

　　b.其他浏览器（Firefox、safari、Opera...）把它实现为一个本地的javascript对象。

　　c.XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。

 

二.创建XMLHttpRequest对象

　　为了每次写Ajax的时候都节省一点时间，可以把对象检测的内容打包成一个可复用的函数：

1 function getHTTPObject(){
2     var xhr=false;
3     if(window.XMLHttpRequest){
4              xhr=new XMLHttpRequest();
5     }else if(window.ActiveXObject){
6        xhr=new ActiveXObject("Microsoft.XMLHTTP");
7  }        
8      return xhr;  
9 }

　　说明：对window.XMLHttpRequest的调用会返回一个对象或null，if语句会把调用返回的记过看做是true或false（如果返回对象则为true，返回null则为false）。如果XMLHttpRequest对象存在，则把xhr的值设为该对象的新实例。如果不存在，就去检测ActiveObject的实例是否存在，如果答案是肯定的，则把微软XMLHTTP的新实例赋给xhr。

三.XMLHttpRequest的方法

方法	描述
abort	停止当前请求
getAllResponseHeaders()	把Http请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method","url")	建立对服务器的调用，Method参数可以使GET、POST或PUT，url参数可以是相对URL或绝对URL
send(content)	想服务器发送请求
setRequestHeader("header","value")	把指定首部设置所提供的值。在设置任何首部之前必须先调用open()

四.XMLHttpRequest的属性

属性	描述
onreadystatechange	每个状态改变是都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态，有五个可取值：0=未初始化，1=正在加载，2=已经加载，3=交互中，4=完成
responseText	服务器的响应，表示一个字符串
responseXML	服务器的响应，表示为XML。这个对象可以解析为DOM对象
status	服务器的HTTP状态码（200对应OK，404对应NotFound等）
statusText	HTTP状态码的相应文本（OK或NotFound等）

 

五.发送请求

　　一.利用XMLHttpRequest实例与服务器进行通信包含以下3个关键部分：

　　1.onreadystatechange事件处理函数

　　2.open方法

　　3.send方法

　　二.onreadystatechange：

　　1.该事件处理函数有服务器触发，而不是用户

　　2.在Ajax执行过程中，服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest         对象的readyState来实现。改变readyState属性是服务器对客户端连接操作的一种方式。         每次readyState属性的改变都会触发readystatechange事件。

　　三.open（method，url，asynch）

　　1.XMLHttpRequest对象的open方法允许程序员用一个Ajax调用向服务器发送请求的。

　　2.method：请求类型，类似“GET”或“POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET（可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符）。若需要向服务器发送数据，用POST。

　　3.在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不用，就会带来不好的结果。在此将时间戳加到URL的最后，就能确保URL的唯一性，从而避免浏览器缓存结果。

　　4.url：路径字符串，只想你锁清秋的服务器上的那个文件。可以是绝对路径或相对路径。

　　5.asych：表示请求是否要一步传输，默认值为true。指定true，在读取后面的脚本之前，不需要等待服务器的响应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。