# XMLHttpRequest 对象
通过 XMLHttpRequest 对象，您可以在不重新加载整个页面的情况下更新网页中的某个部分。
## 尝试一下 - 实例
[一个简单的 XMLHttpRequest 实例](/try/try.php?filename=try_dom_xmlhttprequest_first)
创建一个简单的 XMLHttpRequest，从 TXT 文件中检索数据。
```
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
```
[通过 getAllResponseHeaders() 检索头信息](/try/try.php?filename=try_dom_xmlhttprequest_header)
检索资源（文件）的头信息。
```
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p id="p1">The getAllResponseHeaders() function returns the header information of a resource, like length, server-type, content-type, last-modified, etc.</p>
<button onclick="loadXMLDoc('xmlhttp_info.txt')">Get header information</button>
</body>
</html>
```
[通过 getResponseHeader() 检索指定头信息](/try/try.php?filename=try_dom_xmlhttprequest_lastmodified)
检索资源（文件）的指定头信息。
```
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('p1').innerHTML="Last modified: " + xmlhttp.getResponseHeader('Last-Modified');
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p id="p1">The getResponseHeader() function is used to return specific header information from a resource, like length, server-type, content-type, last-modified, etc.</p>
<button onclick="loadXMLDoc('xmlhttp_info.txt')">Get "Last-Modified" information</button>
</body>
</html>
```
[检索 ASP 文件的内容](/try/try.php?filename=try_dom_xmlhttprequest_suggest)
当用户在输入字段键入字符时，网页如何与 Web 服务器进行通信。
```
<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Start typing a name in the input field below:</h3>
<form action="">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
```
[从数据库中检索内容](/try/try.php?filename=try_dom_xmlhttprequest_database)
网页如何通过 XMLHttpRequest 对象从数据库中提取信息。
```
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>
```
[检索 XML 文件的内容](/try/try.php?filename=try_dom_xmlhttprequest_xml)
创建一个 XMLHttpRequest 从 XML 文件中检索数据并把数据显示在一个 HTML 表格中。
```
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
</div>
</body>
</html>
```
## XMLHttpRequest 对象
XMLHttpRequest 对象是用于幕后与服务器交换数据。
XMLHttpRequest 对象是**开发者的梦想**，因为您可以：
* 在不重新加载页面的情况下更新网页
* 在页面已加载后从服务器请求数据
* 在页面已加载后从服务器接收数据
* 在后台向服务器发送数据
## XMLHttpRequest 对象方法
| 方法 | 描述 |
| --- | --- |
| abort() | 取消当前的请求。 |
| getAllResponseHeaders() | 返回头信息。 |
| getResponseHeader() | 返回指定的头信息。 |
| open(method,url,async,uname,pswd) | 规定请求的类型，URL，请求是否应该进行异步处理，以及请求的其他可选属性。
method：请求的类型：GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步） |
| send(string) | 发送请求到服务器。
string：仅用于 POST 请求 |
| setRequestHeader() | 把标签/值对添加到要发送的头文件。 |
## XMLHttpRequest 对象属性
| 属性 | 描述 |
| --- | --- |
| onreadystatechange | 存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用。 |
| readyState | 存放了 XMLHttpRequest 的状态。从 0 到 4 变化：
0：请求未初始化
1：服务器建立连接
2：收到的请求
3：处理请求
4：请求完成和响应准备就绪 |
| responseText | 返回作为一个字符串的响应数据。 |
| responseXML | 返回作为 XML 数据响应数据。 |
| status | 返回状态数（例如 "404" 为 "Not Found" 或 "200" 为 "OK"）。 |
| statusText | 返回状态文本（如 "Not Found" 或 "OK"）。 |
- XML 基础
- XML 简介
- XML 用途
- XML 树结构
- XML 语法规则
- XML 元素
- XML 属性
- XML 验证
- 查看 XML 文件
- 使用 CSS 显示 XML
- 使用 XSLT 显示 XML
- XML Javascript
- XMLHttpRequest 对象
- XML Parser
- XML DOM
- XML to HTML
- XML 应用程序
- XML 进阶
- XML 命名空间
- XML CDATA
- XML 编码
- 服务器上的 XML
- XML DOM 高级
- XML 注意事项
- XML 相关技术
- 现实生活中的 XML
- XML 编辑器
- XML - E4X
- DTD 教程
- DTD 简介
- DTD - XML 构建模块
- DTD - 元素
- DTD - 属性
- XML 元素 vs. 属性
- DTD - 实体
- DTD 验证
- DTD - 来自网络的实例
- XML DOM
- XML DOM 简介
- XML DOM 节点
- XML DOM 节点树
- XML DOM 解析器
- XML DOM 加载函数
- XML DOM - 属性和方法
- XML DOM - 访问节点
- XML DOM 节点信息
- XML DOM 节点列表
- XML DOM 遍历节点树
- XML DOM 浏览器差异
- XML DOM - 导航节点
- XML DOM 获取节点值
- XML DOM 改变节点值
- XML DOM 删除节点
- XML DOM 替换节点
- XML DOM 创建节点
- XML DOM 添加节点
- XML DOM 克隆节点
- The XMLHttpRequest 对象
- XML DOM 节点类型
- XML DOM - Node 对象
- XML DOM - NodeList 对象
- XML DOM - NamedNodeMap 对象
- XML DOM - Document 对象
- XML DOM - DocumentImplementation 对象
- XML DOM - DocumentType 对象
- XML DOM - ProcessingInstruction 对象
- XML DOM - Element 对象
- XML DOM - Attr 对象
- XML DOM - Text 对象
- XML DOM - CDATASection 对象
- XML DOM - Comment 对象
- XMLHttpRequest 对象
- XML DOM Parse Error 对象
- XML DOM 解析器错误
- XSLT 教程
- XSL 语言
- XSLT 简介
- XSLT 浏览器
- XSLT - 转换
- XSLT <xsl:template> 元素
- XSLT <xsl:value-of> 元素
- XSLT <xsl:for-each> 元素
- XSLT <xsl:sort> 元素
- XSLT <xsl:if> 元素
- XSLT <xsl:choose> 元素
- XSLT <xsl:apply-templates> 元素
- XSLT - 在客户端
- XSLT - 在服务器端
- XSLT - 编辑 XML
- XML 编辑器
- XSLT 元素参考手册
- XSLT 函数
- XPath 教程
- XPath 简介
- XPath 节点
- XPath 语法
- XPath 轴（Axes）
- XPath 运算符
- XPath Examples
- XPath、XQuery 以及 XSLT 函数函数参考手册
- 函数参考手册
- XQuery 教程
- XQuery 简介
- XQuery 实例
- XQuery FLWOR 表达式
- XQuery FLWOR + HTML
- XQuery 术语
- XQuery 语法
- XQuery 添加元素 和属性
- XQuery 选择 和 过滤
- XQuery 函数
- XQuery 参考手册
- XLink 和 XPointer 教程
- XLink 和 XPointer 简介
- XLink 和 XPointer 语法
- XLink 实例
- XPointer 实例
- XLink 参考手册
- XML Schema 教程
- XML Schema 简介
- 为什么使用 XML Schemas?
- XSD 如何使用?
- XSD - <schema> 元素
- XSD 简易元素
- XSD 属性
- XSD 限定 / Facets
- XSD 复合元素
- XSD 空元素
- XSD 仅含元素
- XSD 仅含文本
- XSD 混合内容
- XSD 指示器
- XSD <any> 元素
- XSD <anyAttribute> 元素
- XSD 元素替换(Element Substitution)
- XSD 实例
- XSD 字符串 数据类型
- XSD 日期和时间数据类型
- XSD 数值数据类型
- XSD 杂项 数据类型
- XML 编辑器
- XML Schema 参考手册
- XSD 元素
- XSD 限定/Facets
- SOAP 教程
- SOAP 简介
- SOAP 语法
- SOAP Envelope 元素
- SOAP Header 元素
- SOAP Body 元素
- SOAP Fault 元素
- SOAP HTTP 协议
- SOAP 实例
- WSDL 教程
- WSDL 简介
- WSDL 文档
- WSDL 端口
- WSDL 绑定
- WSDL UDDI
- RSS 教程
- RSS 简介
- RSS 历史
- RSS 语法
- RSS <channel> 元素
- RSS <item> 元素
- RSS 发布您的 Feed
- RSS 阅读器
- RSS 参考手册
- RDF 教程
- RDF 简介
- RDF 规则
- RDF 实例
- RDF 主要 元素
- RDF 容器 Elements
- RDF 集合
- RDF Schema (RDFS)
- RDF 都柏林核心元数据倡议
- OWL 简介
- RDF 参考手册
- XSL-FO 教程
- XSL-FO 简介
- XSL-FO 文档
- XSL-FO 区域
- XSL-FO 输出
- XSL-FO 流
- XSL-FO 页面
- XSL-FO 块
- XSL-FO 列表
- XSL-FO 表格
- XSL-FO 与 XSLT
- XSL-FO 软件
- XSL-FO 参考手册
- SVG 教程
- SVG 简介
- SVG 实例
- SVG 在 HTML 页面
- SVG <rect>
- SVG <circle>
- SVG <ellipse>
- SVG <line>
- SVG <polygon>
- SVG <polyline>
- SVG <path>
- SVG <text>
- SVG Stroke 属性
- SVG 滤镜
- SVG 模糊效果
- SVG 阴影
- SVG 渐变 - 线性
- SVG 渐变- 放射性
- SVG 参考手册
- 免责声明