非常教程

HTML DOM参考手册

XML DOM – HttpRequest 对象

XML DOM – HttpRequest 对象

XMLHttpRequest 对象


通过 XMLHttpRequest 对象,您可以在不重新加载整个页面的情况下更新网页中的某个部分。


XMLHttpRequest 对象

XMLHttpRequest 对象用于幕后与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想,因为您可以:

  • 在不重新加载页面的情况下更新网页
  • 在页面已加载后从服务器请求数据
  • 在页面已加载后从服务器接收数据
  • 在后台向服务器发送数据

创建 XMLHttpRequest 对象

所有现代的浏览器(IE7+、Firefox、Chrome、Safari 和 Opera)都有一个内建的 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法

xmlhttp=new XMLHttpRequest();

旧版本的 Internet Explorer(IE5 和 IE6)使用 ActiveX 对象:

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

为了处理所有现代的浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建一个 XMLHttpRequest 对象,如果不支持,则创建一个 ActiveX 对象:

实例

if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

尝试一下 »


发送一个请求到服务器

为了发送一个请求到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

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

方法 描述
open(method,url,async) 规定请求的类型,URL,请求是否应该进行异步处理。

method:请求的类型:GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string) 发送请求到服务器。

string:仅用于 POST 请求


GET 或 POST?

GET 比 POST 简单并且快速,可用于大多数情况下。

然而,下面的情况下请始终使用 POST 请求:

  • 缓存的文件不是一个选项(更新服务器上的文件或数据库)
  • 发送到服务器的数据量较大(POST 没有大小的限制)
  • 发送用户输入(可以包含未知字符),POST 比 GET 更强大更安全

URL - 服务器上的文件

open() 方法的 url 参数,是一个在服务器上的文件的地址:

xmlhttp.open("GET","xmlhttp_info.txt",true);

该文件可以是任何类型的文件(如 .txt 和 .xml),或服务器脚本文件(如.html 和 .php,可在发送回响应之前在服务器上执行动作)。


异步 - True 或 False?

如需异步发送请求,open() 方法的 async 参数必需设置为 true:

xmlhttp.open("GET","xmlhttp_info.txt",true);

发送异步请求对于 Web 开发人员是一个巨大的进步。在服务器上执行的许多任务非常费时。

通过异步发送,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","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("myDiv").innerHTML=xmlhttp.responseText;

尝试一下 »


服务器响应

如需从服务器获取响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述
responseText 获取响应数据作为字符串
responseXML ResponseXML 属性返回 XML 文档对象,可使用 DOM 节点树的方法和属性来检查和解析该对象。


responseText 属性

如果来自服务器的响应不是 XML,请使用 responseText 属性。

responseText 属性以字符串形式返回响应,您可以相应地使用它:

实例

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

尝试一下 »


responseXML 属性

如果来自服务器的响应是 XML,且您想要把它解析为 XML 对象,请使用 responseXML 属性:

实例

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

xmlDoc=xmlhttp.responseXML; var txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + ""; } document.getElementById("myDiv").innerHTML=txt;

尝试一下 »


onreadystatechange 事件

当请求被发送到服务器,我们要根据响应执行某些动作。

onreadystatechange 事件在每次 readyState 变化时被触发。

readyState 属性持有 XMLHttpRequest 的状态。

XMLHttpRequest 对象的三个重要的属性:

属性 描述
onreadystatechange 存储函数(或函数的名称)在每次 readyState 属性变化时被自动调用
readyState 存放了 XMLHttpRequest 的状态。从 0 到 4 变化:
0:请求未初始化
1:服务器建立连接
2:收到的请求
3:处理请求
4:请求完成和响应准备就绪
status 200:"OK"
404:找不到页面

在 onreadystatechange 事件中,我们规定当服务器的响应准备处理时会发生什么。

当 readyState 是 4 或状态是 200 时,响应准备:

实例

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

尝试一下 »

注意:onreadystatechange 事件在每次 readyState 发生变化时被触发,总共触发了四次。


XML DOM – HttpRequest 对象

更多实例

通过 getAllResponseHeaders() 检索头信息
检索资源(文件)的头信息。

通过 getResponseHeader() 检索指定头信息
检索资源(文件)的指定头信息。

检索 ASP 文件的内容
当用户在输入字段键入字符时,网页如何与 Web 服务器进行通信。

从数据库中检索内容
网页如何通过 XMLHttpRequest 对象从数据库中提取信息。

检索 XML 文件的内容
创建一个 XMLHttpRequest 从 XML 文件中检索数据并把数据显示在一个 HTML 表格中。


XML DOM – HttpRequest 对象

HTML DOM目录

1.XML DOM 教程
2.HTML DOM 教程
3.XML DOM – 节点列表和命名节点图
4.XML DOM 节点信息
5.XML DOM 访问节点
6.XML DOM 方法
7.XML DOM 加载函数
8.XML DOM 解析器
9.XML DOM – 节点
10.XML DOM 简介
11.XML DOM – 添加节点
12.XML DOM – 创建节点
13.XML DOM – 替换节点
14.XML DOM – 删除节点
15.XML DOM – 改变节点值
16.XML DOM – 获取节点值
17.XML DOM 浏览器差异
18.XML DOM – 遍历节点树
19.XML DOM – ProcessingInstruction 对象
20.XML DOM – DocumentType 对象
21.XML DOM – DocumentImplementation 对象
22.XML DOM – Document 对象
23.XML DOM – NamedNodeMap 对象
24.XML DOM – NodeList 对象
25.XML DOM – Node 对象
26.XML DOM – 节点类型
27.XML DOM – HttpRequest 对象
28.XML DOM – 克隆节点
29.XML DOM nodeType 属性
30.XML DOM nodeName 属性
31.XML DOM nextSibling 属性
32.XML DOM namespaceURI 属性
33.XML DOM localName 属性
34.XML DOM lastChild 属性
35.XML DOM firstChild 属性
36.XML DOM childNodes 属性
37.XML DOM baseURI 属性
38.XML DOM compareDocumentPosition() 方法
39.XML DOM cloneNode() 方法
40.XML DOM appendChild() 方法
41.XML DOM textContent 属性
42.XML DOM previousSibling 属性
43.XML DOM prefix 属性
44.XML DOM parentNode 属性
45.XML DOM ownerDocument 属性
46.XML DOM nodeValue 属性
47.XML DOM replaceChild() 方法
48.XML DOM removeChild() 方法
49.XML DOM lookupPrefix() 方法
50.XML DOM lookupNamespaceURI() 方法
51.XML DOM isSameNode() 方法
52.XML DOM isEqualNode() 方法
53.XML DOM insertBefore() 方法
54.XML DOM hasChildNodes() 方法
55.XML DOM hasAttributes() 方法
56.XML DOM childNodes 属性
57.XML DOM async 属性
58.XML DOM removeNamedItem() 方法
59.XML DOM item() 方法
60.XML DOM getNamedItem() 方法
61.XML DOM length 属性
62.XML DOM item() 方法
63.XML DOM length 属性
64.XML DOM nodeName 属性
65.XML DOM lastChild 属性
66.XML DOM inputEncoding 属性
67.XML DOM implementation 属性
68.XML DOM firstChild 属性
69.XML DOM documentURI 属性
70.XML DOM documentElement 属性
71.XML DOM doctype 属性
72.XML DOM xmlVersion 属性
73.XML DOM xmlStandalone 属性
74.XML DOM xmlEncoding 属性
75.XML DOM strictErrorChecking 属性
76.XML DOM nodeValue 属性
77.XML DOM nodeType 属性
78.XML DOM getElementsByTagNameNS() 方法
79.XML DOM getElementsByTagName() 方法
80.XML DOM createTextNode() 方法
81.XML DOM createElementNS() 方法
82.XML DOM createElement() 方法
83.XML DOM createComment() 方法
84.XML DOM createCDATASection() 方法
85.XML DOM – HttpRequest 对象
86.XML DOM – Comment 对象
87.XML DOM – CDATASection 对象
88.XML DOM – Text 对象
89.XML DOM – Attr 对象
90.XML DOM – Element 对象
91.XML DOM renameNode() 方法
92.XML DOM 解析器错误
93.XML DOM Parse Error 对象
94.XML DOM attributes 属性
95.XML DOM systemId 属性
96.XML DOM name 属性
97.XML DOM internalSubset 属性
98.XML DOM entities 属性
99.XML DOM ownerDocument 属性
100.XML DOM nodeType 属性