天幻网 FFSKY.COM

[登陆] [注册]

The XMLHttpRequest Object

2006-01-22 21:47 | aptx

英文原文地址：http://www.w3schools.com/xml/xml_http.asp

翻译：aptx；校对：陆行鸟X

XMLHttpRequest 对象在 Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Netscape 7.均被支持

HTTP请求（HTTP Request）简介

通过http request，网页无需刷新页面，就可以向服务器提交信息，或从服务器得到反馈。 用户会呆在同一个页面，他不会察觉到脚本在后台向服务器发送页面请求或接收数据。

WEB开发者使用 XMLHttpRequest 对象，可以让页面在装载完成后，依然能够根据来自服务器的数据而发生变化

Google Suggest 就是利用的 XMLHttpRequest 对象创建了互动性非常强的WEB界面：当你开始向Google的搜索框输入字符时，JavaScript就已经把信息发给了服务端，同时服务端也返回了结果列表。

XMLHttpRequest 是不是 W3C 标准？

不是。

W3C DOM Level 3 "Load and Save" 说明书包含了一些类似的功能，但是这些并不能直接在浏览器上解析执行。所以，当你需要从浏览器中发送一个 HTTP 请求时，你只有使用 XMLHttpRequest 对象

创建一个 XMLHttpRequest 对象（JavaScript）

Mozilla、Firefox、Safari、 Netscape：

var xmlhttp=new XMLHttpRequest()

Internet Explorer

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

示例

var xmlhttp;
function loadXMLDoc(url) {
	if (window.XMLHttpRequest) { // code for Mozilla, etc.
		xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange = xmlhttpChange;
		xmlhttp.open("GET", url, true);
		xmlhttp.send(null);
	} else if (window.ActiveXObject) { // code for IE 
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		if (xmlhttp) {
			xmlhttp.onreadystatechange = xmlhttpChange;
			xmlhttp.open("GET", url, true);
			xmlhttp.send();
		}
	}
}
function xmlhttpChange() {
	// 如果 xmlhttp 显示 "loaded"
	if (xmlhttp.readyState == 4) {
		// if "OK"
		if (xmlhttp.status == 200) {
			// ...添加代码...
		} else {
			alert("Problem retrieving XML data");
		}
	}
}

注意：onreadystatechange 属性在上面的例子里是一个非常重要的属性。它是请求状态变化的实时事件触发句柄，这个状态可从0 (uninitialized) 持续到4 (complete)。根据xmlhttpChange()函数来检测状态，从而得知过程何时完成，并仅当成功完成后才继续下面的进程。

为什么使用在例子里使用 async（asynchronously，即异步） 属性

所有的例子里都使用了 async 模式（将 open 的第三个参数设置为 true）。

async 参数指定请求是否使用异步加载。设为“true”时，send() 方法之后脚本就继续执行，不等待服务器的响应。设为“false”时，直到等到服务器响应之后，脚本才继续执行下去。设为“false”时，如果遇到网络或服务器故障，你的脚本将有被挂起的风险；或者请求的时间过长时（请求时会锁定 UI），用户甚至会看到“无回应”的信息。更为安全的做法是用异步发送请求，同时根据"onReady StateChange"事件设计代码。

更多示例

载入的文本文件可以修改路径，这里用的是 874.txt。一定要注意，下面代码写成测试文件必须上传到web服务器才能正常打开

使用XML HTTP 载入文本文件到 DIV 里（JavaScript）

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url) {
	// code for Mozilla, etc.
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange = state_Change;
		xmlhttp.open("GET", url, true);
		xmlhttp.send(null);
	} else if (window.ActiveXObject) {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		if (xmlhttp) {
			xmlhttp.onreadystatechange = state_Change;
			xmlhttp.open("GET", url, true);
			xmlhttp.send();
		}
	}
	// code for IE 
}
function state_Change() {
	// if xmlhttp shows "loaded"
	if (xmlhttp.readyState == 4) {
		// if "OK"
		if (xmlhttp.status == 200) {
			document.getElementById('T1').innerHTML = xmlhttp.responseText;
		} else {
			alert("Problem retrieving data:"+xmlhttp.statusText);
		}
	}
}
</script>
</head>
<body>
<div id="T1" style="border:1px solid black;height:40;width:300"></div><br />
<button onclick="loadXMLDoc('874.txt')">载入文本</button></body>
</html>

使用 XML HTTP 产生一个头请求（JavaScript）

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url) {
	// code for Mozilla, etc.
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange = state_Change;
		xmlhttp.open("HEAD", url, true);
		xmlhttp.send(null);
	} else if (window.ActiveXObject) {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		if (xmlhttp) {
			xmlhttp.onreadystatechange = state_Change;
			xmlhttp.open("HEAD", url, true);
			xmlhttp.send();
		}
	}
	// code for IE 
}
function state_Change() {
	// if xmlhttp shows "loaded"
	if (xmlhttp.readyState == 4) {
		// if "OK"
		if (xmlhttp.status == 200) {
			document.getElementById('T1').innerHTML = xmlhttp.getAllResponseHeaders();
		} else {
			alert("Problem retrieving data:"+xmlhttp.statusText);
		}
	}
}
</script>
</head>
<body onload="loadXMLDoc('874.txt')">
<p>With a HEAD request, a server will return the headers of a resource (not the resource itself). 
This means you can find out the Content-Type or Last-Modified of a document, without downloading 
it itself.</p>
<div id="T1" style="border:1px solid black;height:100;width:300"></div>
</body>
</html>

使用 XML HTTP 产生一个指定头请求（JavaScript）

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url) {
	// code for Mozilla, etc.
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange = state_Change;
		xmlhttp.open("HEAD", url, true);
		xmlhttp.send(null);
	} else if (window.ActiveXObject) {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		if (xmlhttp) {
			xmlhttp.onreadystatechange = state_Change;
			xmlhttp.open("HEAD", url, true);
			xmlhttp.send();
		}
	}
	// code for IE 
}
function state_Change() {
	// if xmlhttp shows "loaded"
	if (xmlhttp.readyState == 4) {
		// if "OK"
		if (xmlhttp.status == 200) {
			document.getElementById('T1').innerHTML = xmlhttp.getResponseHeader('Last-Modified');
		} else {
			alert("Problem retrieving data:"+xmlhttp.statusText);
		}
	}
}
</script>
</head>
<body onload="loadXMLDoc('874.txt')">
<p>
With a HEAD request, a server will return the headers of a resource (not the resource itself). 
This means you can find out the Content-Type or Last-Modified of a document, without downloading it itself.
</p>
<div id="T1" style="border:1px solid black;height:100;width:300"></div>
</body>
</html>

XMLHttpRequest 对象参考

方法

方法描述
abort()取消当前请求
getAllResponseHeaders()以字符串的形式返回完成的 HTTP 报头集
getResponseHeader("headername")返回指定 HTTP 头的值
open("method","URL",async,"uname","pswd")指定方法、URL和其它可选择属性值。

"methed" 参数值有 "GET", "POST", 和 "PUT"。请求数据时设为"GET"，发送数据时设为"POST"（特别是当数据长度大于 512 bytes 时）。

URL参数可为任意相对或绝对地址。

async参数指定请求是否使用异步加载。设为 "true" 时，send() 之后脚本进程依然持续，不等待服务器响应；设为 “false” 时，直到等到服务器响应之后，脚本才继续执行下去。
send()发送请求
setRequestHeader("label","value")给http报头添加键/值对

属性

属性描述
onreadystatechange每次状态变化时触发的事件句柄
readyState0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
responseText以字符串形式返回响应
responseXML返回响应成XML。这个属性返回一个 XML 文档对象，可使用 W3C DOM 节点树方法和属性验证和解析。
status以数字的形态返回状态（例如 404是 “Not Found”，200是 “OK”）
statusText以字符串的形式返回状态（例如 “Not Found” 或 “OK”）


-
  • 热门论坛