XHR-XMLHttpRequest

XMLHttpRequest 对象是 Ajax 的关键。它从 2000 年 7 月发布的 IE 5.5 开始可用，但是直到 2005 年 Ajax 和 Web 2.0 变得流行起来它都没有完全被发觉。（需要浏览器提供支持，存在跨域问题）

XMLHttpRequest (XHR) 是一个可以用 JavaScript，JScript，VBScript 和其他 Web 浏览器脚本语言传输和操作 XML 数据，以及使用 HTTP 从 Web 服务器上在网页客户端和服务端之间建立一个独立连接通道的 API。

调用 XMLHttpRequest 返回的数据通常都由后端数据库提供。除了 XML 之外，XMLHttpRequest 还可以用来获取其他格式的数据，例如 JSON 或者是纯文本。

我们已经见过好几个讲述如何创建 XMLHttpRequest 对象的例子了。

下面列出的是一些我们必须熟悉的方法和属性。

XMLHttpRequest 方法

1、abort() 取消当前请求。

2、getAllResponseHeaders() 返回整套 HTTP 头字符串。

3、getResponseHeader( headerName ) 返回指定 HTTP 头的值。

4、open( method, URL )open( method, URL, async )open( method, URL, async, userName )open( method, URL, async, userName, password )

指定请求的方法，URL 以及其他可选属性。

方法参数可以是 "GET"，"POST" 或者 "HEAD" 中的一个值。也可以是其他 HTTP 方法，比如 "PUT" 和 "DELETE"（主要用于 REST 应用程序中）。

"async" 参数指定该请求是否应该异步处理。"true" 意味着脚本处理发生在 send() 方法之后而不必等待响应，而 "false" 意味着继续脚本处理之前脚本要等待响应。

5、send( content ) 发送请求。

6、setRequestHeader( label, value ) 给 HTTP 头添加一个标签/值对进行发送。

XMLHttpRequest 属性

1、onreadystatechange 一个用于事件的事件处理程序，每个状态变化时都会触发。

2、readyState readyState 属性定义了 XMLHttpRequest 对象的当前状态。

下面的表格提供了一个 readyState 属性可能值的列表：

状态描述0请求还未初始化。1请求已经建立。2请求已经发送。3请求正在处理。4请求已经完成。

readyState = 0 在 XMLHttpRequest 对象创建之后，但是在我们调用 open() 方法之前。

readyState = 1 在调用 open() 方法之后，但是在调用 send() 之前。

readyState = 2 在我们调用 send() 之后。

readyState = 3 在浏览器建立与服务器的通信之后，但是在服务器完成响应之前。

readyState = 4 在请求完成以及响应数据已经完全从服务器接受之后。

3、responseText 返回响应字符串。

4、responseXML 返回响应的 XML 数据。这个属性返回一个 XML 文档对象，我们可以使用 W3C DOM 节点树方法和属性检查并解析它。

5、status 返回状态数字（比如 404 表示 "Not Found" 或者 200 表示 "OK"）。

6、statusText 返回状态字符串（比如 "Not Found" 或者 "OK"）。

XHR 创建对象 AJAX - 创建 XMLHttpRequest 对象

　XMLHttpRequest 是 AJAX 的基础。

　XMLHttpRequest 术语缩写为XHR，中文可以解释为可扩展超文本传输请求。

　XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。

　XMLHttpRequest的对象用于客户端和服务器之间的异步通信。

　它执行以下操作：

1. 在后台从客户端发送数据
2. 从服务器接收数据
3. 更新网页而不重新加载。

XMLHttpRequest 对象

　所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

　XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象

　所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

　创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

　老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

　为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：:

实例

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

　现在，你已经学会如何创建 XMLHttpRequest 对象了（这是学习AJAX的基础），接下来，在下一章中，您将学习发送服务器请求的知识。

XMLHttpRequest对象的属性

XMLHttpRequest对象的常见属性如下：

属性描述onreadystatechange存储函数（或函数名），每当readyState的属性改变时，就会调用该函数。readyState存有的XMLHttpRequest的状态从0到4发生变化。 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪responseText以文本形式返回响应。responseXML以XML格式返回响应status将状态返回为数字（例如，“Not Found”为404，“OK”为200）statusText以字符串形式返回状态（例如，“Not Found”或“OK”） XMLHttpRequest对象的方法

XMLHttpRequest对象的重要方法如下：

方法描述abort()取消当前请求。getAllResponseHeaders()以字符串形式返回完整的HTTP标头集。getResponseHeader( headerName )返回指定HTTP标头的值。void open（method，URL）打开指定获取或交的方法和URL的请求。void open（method，URL，async）与上面相同，但指定异步或不。void open（method，URL，async，userName，password）与上面相同，但指定用户名和密码。void send（content）发送获取请求。setRequestHeader（ label，value）将标签/值对添加到要发送的HTTP标头。 XHR 请求 AJAX如何工作？

　AJAX 使用的 XMLHttpRequest 的对象与服务器通信。让我们尝试通过下面显示的图像了解 AJAX 的流程或 AJAX 的工作原理。

　正如您在上面的示例中所看到的，XMLHttpRequest对象起着重要作用。

1. 用户从 UI 发送请求，JavaScript 中调用 XMLHttpRequest 对象。
2. HTTP 请求由 XMLHttpRequest 对象发送到服务器。
3. 服务器使用 JSP，PHP，Servlet，ASP.net 等与数据库交互。
4. 检索数据。
5. 服务器将 XML 数据或 JSON 数据发送到 XMLHttpRequest 回调函数。
6. HTML 和 CSS 数据显示在浏览器上。

向服务器发送请求

　XMLHttpRequest 对象用于和服务器交换数据。

　当你的页面全部加载完毕后，客户端会通过 XMLHttpRequest 对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。

　如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的open()和send()方法：

xmlhttp.open("GET","ajax_info.txt",true);        
xmlhttp.send();

方法描述open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

• method：请求的类型；GET 或 POST

• url：文件在服务器上的位置

• async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

• string：仅用于 POST 请求

GET 还是 POST？

　与POST相比，GET 更简单也更快，并且在大部分情况下都能用。

　然而，在以下情况中，请使用POST请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）

• 向服务器发送大量数据（POST没有数据量限制）

• 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

GET 请求

　一个简单的GET请求：

实例

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

　在上面的例子中，您可能得到的是缓存的结果。

　为了避免这种情况，请向 URL 添加一个唯一的 ID：

实例

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

　如果您希望通过GET方法发送信息，请向 URL 添加信息：

实例

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

?fname=Henry&lname=Ford为请求时传递的参数，指浏览器向服务器传递两个参数，一个为fname，值为Henry，一个为lname，值为Ford。在本实例中服务器只用到fname的参数，没有用到lname的参数。

提示：GET请求具有以下的几个特点：

• GET请求可被缓存
• GET请求保留在浏览器历史记录中
• GET请求可被收藏为书签
• GET请求不应在处理敏感数据时使用
• GET请求有长度限制
• GET请求只应当用于取回数据

POST 请求

　一个简单POST请求：

实例

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

　如果需要像 HTML 表单那样 POST 数据，请使用setRequestHeader()来添加 HTTP 头。然后在send()方法中规定您希望发送的数据：

实例

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

方法描述setRequestHeader(header,value)

向请求添加 HTTP 头。

• header: 规定头的名称

• value: 规定头的值

　提示：POST请求的特点如下：

• POST请求不会被缓存
• POST请求不会保留在浏览器历史记录中
• POST请求不能被收藏为书签
• POST请求对数据长度没有要求

url - 服务器上的文件

open()方法的url参数是服务器上文件的地址：

xmlhttp.open("GET","ajax_test.html",true);

　该文件可以是任何类型的文件，比如.txt和.xml，或者服务器脚本文件，比如.asp和.php（在传回响应之前，能够在服务器上执行任务）。

异步 - True 或 False？

　AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

　XMLHttpRequest 对象如果要用于 AJAX 的话，其open()方法的sync(async)参数必须设置为 true：

xmlhttp.open("GET","ajax_test.html",true);

　对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

　通过 AJAX，JavaScript 无需等待服务器的响应，而是：

• 在等待服务器响应时执行其他脚本

• 当响应就绪后对响应进行处理

Async=true

　当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

实例

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

　您将在稍后的章节学习更多有关 onreadystatechange 的内容。

Async = false

　如需使用 async=false，请将open()方法中的第三个参数改为 false：

xmlhttp.open("GET","test1.txt",false);

　我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

　请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

　注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到send()语句后面即可：

实例

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

XHR 响应 AJAX - 服务器响应

　由于 HTTP 响应是由服务端发出的，并且服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

• 状态行xhr.status状态码，如200，304，404等；
• 响应主体xhr.responseText与xhr.responseXML都表示响应主体。

　如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的responseText或responseXML属性。

属性描述responseText获得字符串形式的响应数据。responseXML获得 XML 形式的响应数据。

responseText 属性

　如果来自服务器的响应并非 XML，请使用responseText属性。

　responseText属性返回字符串形式的响应，因此您可以这样使用：

实例

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 　提示：对于responseText属性，只有当 readyState属性值变为4时，responseText属性才可用，因为这表明AJAX请求已经结束！

responseXML 属性

　如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用responseXML属性：

实例

请求 cd_catalog.xml 文件，并解析响应：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i