1. 创建 XMLHttpRequest 对象的一个实例

var xmlHttp;function createXMLHttpRequest() {
         //检查是否支持 ActiveXObject 控件（IE浏览器）    if(window.ActiveXObject) {        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    } else if(window.XMLHttpRequest) {        xmlHttp = new XMLHttpRequest();     }}

2. 方法和属性

2.1 常用的方法有 open( ) 和 send( ) 。

void open(string method, string url, boolean async, string username, string password) 建立对服务器的调用。

method: GET、POST或PUT。

url：相对url或绝对url。

async：可选，默认值为true，表示异步请求；false表示同步。

void send(context)：具体向服务器发出请求。如果请求声明为异步，这个方法就会立即返回，否则它会等待直到接收到响应为止。

可选参数可以是 DOM 对象的实例、输入流、或者串。若请求类型为 GET 时，参数使用 null；若为 POST 时，参数内容将作为请求体的一部分发送。

void setRequestHeader(string header, string value)：为请求中一个给定的首部设置值。这个方法必须在 open() 之后才能调用。

header：要设置的首部。

value：在首部中放置的值。

void abort()：停止请求。

string getAllResponseHeaders()：返回一个串，其中包含HTTP请求的所有响应首部，首部包括Content-length、Data和URL。

string getResponseHeaders(string header)：与上面的 getAllResponseHeaders( ) 对应。

header表示你希望得到的指定首部值，并且把这个值作为串返回。

2.2 标准 XMLHttpRequest 属性

属性	描述
onreadystatechange	每个状态改变时都会触发这个事件处理器，值可以为回调函数的指针
readyState	请求的状态。有5个可取值。（在下方有说明）
responseText	服务器的响应，表示一个串
responseXML	服务器的响应，表示为XML。这个对象可解析为一个 DOM 对象
status	服务器的 HTTP 状态码（200对应 OK，404对应 Not Found …）
statusText	HTTP 状态码的相应文本（OK 或 Not Found …）

readyState 请求状态的5个值：

0：未初始化

1：正在加载

2：已加载

3：交互中

4：完成

3. Ajax 交互示例

Created with Raphaël 2.1.0用户界面用户界面ajax引擎（XmlHttpRequest）ajax引擎（XmlHttpRequest）Web服务器Web服务器js创建XHR对象实例调用请求（open+send）服务器响应，并触发回调函数根据readyState和status返回数据

请求返回到浏览器时的首部设置：

Content-Type：text/html

Cache-Control：no-cache

4. GET 与 POST

GET 请求通过向 url 传递参数，浏览器和服务器会限制其长度。

POST 则不会限制发送给服务器的数据量大小。一般来讲，

使用 GET 方法从服务器获取数据。

使用 POST 方法改变服务器上的状态。

使用 POST 时，需要设置 XMLHttpRequest 对象的 Content-Type 首部：

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

5. 简单请求

5.1 回调

onreadystatechange 属性存储了回调函数的指针。当 XMLHttpRequest 对象的内部状态发生改变时，就会调用这个回调函数。当进行了异步调用，请求就会发出，脚本立即处理执行。一旦发出了请求，对象的 readyState 属性会经过几个变化，一般处理的是服务器响应结束时的状态。

回调函数 callback 方法：

xmlHttp.onreadystatechange = callback; //函数指针function callback() {
         if(xmlHttp.readyState == 4) {        if(xmlHttp.Status == 200) {            //可以简单的设置div的文本等等        }           }}

5.2 简单请求的示例

//javascriptvar xmlHttp;function createXMLHttpRequest() {
         //检查是否支持 ActiveXObject 控件（IE浏览器）    if(window.ActiveXObject) {        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    } else if(window.XMLHttpRequest) {        xmlHttp = new XMLHttpRequest();     }}function startRequest() {
         createXMLHttpRequest();    xmlHttp.onreadystatechange = handleStateChange;    xmlHttp.open("GET", "simpleResponse.xml", true);    xmlHttp.send(null);}function handleStateChange() {
         if(xmlHttp.readyState == 4) {        if(xmlHttp.status == 200) {            alert("The server replied with: " + xmlHttp.responseText);            //显示 simpleResponse.xml 里的文本        }    }}

注：以上摘自《Ajax基础教程》

转载于:https://www.cnblogs.com/noelli/p/6711826.html

你可能感兴趣的文章