AJAX – 创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 术语缩写为XHR，中文可以解释为可扩展超文本传输请求。
XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。
XMLHttpRequest的对象用于客户端和服务器之间的异步通信。
它执行以下操作：
- 在后台从客户端发送数据
- 从服务器接收数据
- 更新网页而不重新加载。
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。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tryrun 1</title>
</head>
<body>
<div id="view">
<p>点击下面的按钮，将 Ajax 请求回来的数据更新在该文本内</p>
</div>
<button type="button" id="btn">发起 Ajax 请求</button>
<script>
document.getElementById("btn").onclick = ajaxRequest;
function ajaxRequest () {
var xhr = new XMLHttpRequest();
xhr.open("GET", "ajax_info.txt", true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("view").innerHTML = xhr.responseText;
}
}
}
</script>
</body>其中ajax_info.text内容如下：
<p>Ajax 的全称是 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种用于创建动态网页的技术。</p>
<p>Ajax 技术指的是脚本独立向服务器请求数据，拿到数据以后，进行处理并更新网页。</p>大家可以试试。
现在，你已经学会如何创建 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标头。 |
相关知识
Ajax 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”）。
作者：唐伯虎点蚊香，如若转载，请注明出处：https://www.web176.com/ajax/14533.html
支付宝 
微信 