AJAX以及XMLHttpRequest

Posted 2021-01-23 _JayKoo

AJAX技术

概念：源自百度百科 — — AJAX（Asynchronous Javascript And XML）

简单概括一下：

• AJAX是web编程的技术，不是一门新的编程语言
• AJAX充当了客户端与服务器之间的中间人，通过异步（也可同步，但降低用户体验，不提倡）来做HTTP的GET与POST请求操作。
• AJAX通过一个对象XMLHttpRequest来实现异步通信的（核心）

XMLHttpRequest对象

API：XMLHttpRequest接口文档

 主要属性和方法

①创建对象

var xhr         //此时xhr相当于客户端与服务器之间的中间人   
if(window.XMLHttpRequest)   //IE6.0 和 IE5.5中，window没有XMLHttpRequest属性
{
    xhr = new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE6.0 和 IE5.5中,用此方法创建
{
    xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}

②向服务器发送请求

一般客户端向服务器发送请求为GET和POST两种，，在XMLHttpRequest对象中，通过以下方法实现：

• xhr.open() — — 初始化请求，相当于在发送请求前，对请求的方法、链接等进行配置。

xhr.open(method, url, async)
-----------------------------
//method:有GET、POST等HTTP请求方法
//url：向服务器请求资源的url
//async：是否异步请求。true为异步、false为同步

• xhr.send()  — — 在open方法中配置完后，通过此方法发送请求。如果是异步请求（默认为异步请求，即open（）中，async参数为true），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。

------------GET----------------

//将参数配置到url中
xhr.open(‘GET‘, ‘Http://www.jaykoo.com/index.php?foo=bar&lorem=ipsum‘, true)

xhr.send()


------------POST----------------

xhr.open(‘POST‘, ‘Http://www.jaykoo.com/index.php‘, true)

xhr.setRequestHeader("Content-type","application/json; charset=utf-8")

//将参数放置在HTTP内容中进行POST请求
//send(body),一般要把传送的数据放在body中
xhr.send(‘foo=bar&lorem=ipsum‘)

看完上面的 send() 操作，有以下两个疑问（待解决）：

• 1、xhr.setRequestHeader()是什么？
• 2、为什么GET与POST请求的参数，前者放在url中，后者放在send的请求内容体中？

③请求状态的变化以及响应事件

AJAX请求分为几个阶段，在XMLHTTPRequest中通过readystate属性来指定不同的阶段状态。当状态改变时会通过onreadystatechange属性来调用回调函数，对不同阶段状态的改变作出响应操作。

• xhr.readystate
• xhr.onreadystatechange = callback

readystate

状态值	描述
0	XMLHttpRequest 代理已被创建， 但尚未调用 open() 方法。
1	open() 方法已经被触发。在这个状态中，可以通过  setRequestHeader() 方法来设置请求的头部， 可以调用 send() 方法来发起请求。
2	send() 方法已经被调用，响应头也已经被接收。
3	响应体部分正在被接收。如果 responseType 属性是“text”或空字符串， responseText 将会在载入的过程中拥有部分响应数据。
4	请求操作已经完成。这意味着数据传输已经彻底完成或失败。

onreadystatechange

看属性名就可知道，当readystate属性状态值变化时，xhr马上回调用onreadystatechange定义的回调函数。

（readystatechange其实是xhr的注册事件，onreadystatechange其实是对事件的响应）

xhr.onreadystatechange = function(){
    if(xhr. readystate = 4){
        /* do something */
    }
}

通过readystate状态值，可以对XMLHttpRequest的请求响应状态进行判断。但却无法判断服务器返回的响应报文中，HTTP的状态码（例如常见的，200成功，403服务器拒绝请求，404页面资源无法找到等）。这里XMLHttpRequest对象中用status属性来得到响应状态码的值。

status

返回了XMLHttpRequest响应中的数字状态码。status对应在服务器响应报文中标准的HTTP响应码。若在响应前或是XMLHttpRequest出错时，status的值为0