The XMLHttpRequest Object
所有现代浏览器都有一个内置的 XMLHttpRequest 对象来从服务器请求数据。
所有主流浏览器都有一个内置的 XML 解析器来访问和操作 XML。
XMLHttpRequest 对象
XMLHttpRequest 对象可用于从 Web 服务器请求数据。
XMLHttpRequest 对象是开发人员的梦想，因为您可以：
- 更新网页而不重新加载页面
- 从服务器请求数据 - 在页面加载后
- 从服务器接收数据 - 页面加载后
- 将数据发送到服务器 - 在后台
XMLHttpRequest 示例
当您在下面的输入字段中键入字符时，会向服务器发送一个 XMLHttpRequest，并返回一些名称建议（从服务器）：
实例
开始在下面的输入字段中输入名称：
Suggestions:
发送 XMLHttpRequest
所有现代浏览器都有一个内置的 XMLHttpRequest 对象。
使用它的常见 JavaScript 语法如下所示：
实例
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
尝试一下 »
创建一个 XMLHttpRequest 对象
上例中的第一行创建了一个 XMLHttpRequest 对象：
var xhttp = new XMLHttpRequest();
onreadystatechange 事件
readyState 属性保存 XMLHttpRequest 的状态。
onreadystatechange 事件在每次 readyState 改变时触发。
在服务器请求期间，readyState 从 0 变为 4：
0: 请求未初始化
1：建立服务器连接
2：收到请求
3：处理请求
4：请求完成，响应就绪
在onreadystatechange属性中，指定readyState改变时要执行的函数：
xhttp.onreadystatechange = function()
当readyState为4，status为200时，响应就绪：
if (this.readyState == 4 && this.status == 200)
XMLHttpRequest 属性和方法
| 方法 | 描述 |
|---|---|
| new XMLHttpRequest() | 创建一个新的 XMLHttpRequest 对象 |
| open(method、url、async) | 指定请求的类型 method：请求类型：GET 或 POST url：文件位置 async：true（异步）或 false（同步） |
| send() | 向服务器发送请求（用于 GET） |
| send(string) | 向服务器发送请求字符串（用于 POST） |
| onreadystatechange | readyState 属性改变时调用的函数 |
| 就绪状态 | XMLHttpRequest 的状态 0：请求未初始化 1：建立服务器连接 2：收到请求 3：处理请求 4：请求完成，响应就绪 |
| status | 200：OK 404: 找不到页面 |
| responseText | 字符串形式的响应数据 |
| responseXML | 作为 XML 数据的响应数据 |
跨域访问
出于安全原因，现代浏览器不允许跨域访问。
这意味着网页和它尝试加载的 XML 文件必须位于同一台服务器上。
W3Schools 上的示例都打开了位于 W3Schools 域中的 XML 文件。
如果您想在自己的网页上使用上面的示例，您加载的 XML 文件必须位于您自己的服务器上。
responseText 属性
responseText 属性以字符串形式返回响应。
如果要将响应用作文本字符串，请使用 responseText 属性：
responseXML 属性
responseXML 属性将响应作为 XML DOM 对象返回。
如果要将响应用作 XML DOM 对象，请使用 responseXML 属性：
实例
请求文件 cd_catalog.xml 并将响应用作 XML DOM 对象：
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
尝试一下 »
GET 还是 POST?
GET 比 POST 更简单、更快捷，并且可以在大多数情况下使用。
但是，在以下情况下始终使用 POST 请求：
- 缓存文件不是一个选项（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有大小限制）
- 发送用户输入（可能包含未知字符），POST 比 GET 更健壮和安全
网址 - 服务器上的文件
open() 方法的 url 参数，是服务器上文件的地址：
xmlhttp.open("GET", "xmlhttp_info.txt", true);
该文件可以是任何类型的文件，例如 .txt 和 .xml，或服务器脚本文件，例如 .asp 和 .php（可以在返回响应之前在服务器上执行操作）。
异步 - True 或 False?
要异步发送请求，open() 方法的 async 参数必须设置为 true：
xmlhttp.open("GET", "xmlhttp_info.txt", true);
发送异步请求对 Web 开发人员来说是一项巨大的改进。 在服务器上执行的许多任务都非常耗时。
通过异步发送，JavaScript 不必等待服务器响应，而是可以：
- 在等待服务器响应时执行其他脚本
- 在响应就绪时处理响应
Async = true
使用 async = true 时，在onreadystatechange事件中指定响应就绪时执行的函数：
实例
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
尝试一下 »
Async = false
要使用 async = false，请将 open() 方法中的第三个参数更改为 false：
xmlhttp.open("GET", "xmlhttp_info.txt", false);
不建议使用 async = false，但对于一些小的请求，这可以。
请记住，在服务器响应准备好之前，JavaScript 不会继续执行。 如果服务器繁忙或缓慢，应用程序将挂起或停止。
注释： 当你使用 async = false 时，不要编写 onreadystatechange 函数 - 只需将代码放在 send() 语句之后：
实例
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
尝试一下 »
XML 解析器
所有现代浏览器都有一个内置的 XML 解析器。
XML 文档对象模型（XML DOM）包含许多访问和编辑 XML 的方法。
但是，在访问 XML 文档之前，必须将其加载到 XML DOM 对象中。
XML 解析器可以读取纯文本并将其转换为 XML DOM 对象。
解析文本字符串
此示例将文本字符串解析为 XML DOM 对象，并使用 JavaScript 从中提取信息：
实例
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
尝试一下 »
旧版浏览器（IE5 和 IE6）
旧版本的 Internet Explorer（IE5 和 IE6）不支持 XMLHttpRequest 对象。
要处理IE5和IE6，请检查浏览器是否支持XMLHttpRequest对象，否则创建一个ActiveXObject：
实例
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
尝试一下 »
旧版本的 Internet Explorer（IE5 和 IE6）不支持 DOMParser 对象。
要处理IE5和IE6，请检查浏览器是否支持DOMParser对象，否则创建一个ActiveXObject：
实例
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
尝试一下 »
更多实例
使用 getAllResponseHeaders() 检索标头信息
检索资源（文件）的标头信息。
使用 getResponseHeader() 检索特定的标头信息
检索资源（文件）的特定标头信息。
检索 ASP 文件的内容
当用户在输入字段中键入字符时，网页如何与 Web 服务器通信。
从数据库中检索内容
网页如何使用 XMLHttpRequest 从数据库中获取信息
目的。
检索 XML 文件的内容
创建 XMLHttpRequest 以从 XML 文件中检索数据并在 HTML 表中显示数据。
