尽管Ajax(Aysnchronous Javascript and XML)不是一种标准化的技术，也不是一个全新的理念，但它确实已经以很快的速度改变了Web的访问体验，提供了一种相比于传统Web体验来说更流畅、更无缝的交互模型。
Microsoft在IE5中初次引入了XMLHttpRequest对象，XMLHttpRequest是Ajax技术的关键功能，该对象允许Javascript生成服务器请求并使用变量返回信息。它可以接收任何形式的文本文档，而不限于XML.
XMLHttpRequest对象的主要方法与属性：
| 名称 | 描述 |
| 方法 | |
| abort | 取消当前请求 |
| getAllResponseHeaders | 获得未解析的HTTP响应头的字符串形式 |
| getResponseHeader | 根据名称获得指定的HTTP响应头的值 |
| open | 初始化请求参数，但不发送请求 |
| send | 发送HTTP请求 |
| setRequestHeader | 向已经打开但未发送的请求添加HTTP请求 |
| 事件句柄 | |
| onreadystatechange | 当readyState状态改变后，会触发这个事件句柄 |
| 属性 | |
| readyState | HTTP请求状态，从0开始共有5个值: 0:初始状态，对象以创建或被abort重置 1:open以调用,send未调用,请求尚未发送 2:send以调用,请求已发送尚未收到响应 3:响应头已收到，响应体开始接收但未完成 4:HTTP响应已经完成 |
| responseText | 从服务器收到的响应体，不包括头部分 |
| responseXML | 以Document对象返回的XML响应 |
| status | 服务器返回的HTTP状态码. 200:成功 404:Not Found错误 |
| statusText | 以文本信息返回的HTTP状态码. 200:OK 404:Not Found |
|
|
|
<html>
<head>
<title>Ajax & XMLHttpRequest Example</title>
<style type="text/css" media="all">
.alink{ color:purple; background-color:#fcc; border:1px solid red;}
</style>
<script type="text/javascript">
function sendRequest() {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
alert("Sorry! XMLHttpRequest is not support.");
return;
}
request.onreadystatechange = function() { callback(request); };
var sendData = 'sendData=mydata';
request.open('POST', 'http://www.microsoft.com', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send(sendData);
}
function callback(request) {
var obj = document.getElementById('workaround');
if (request.readyState == 0) {
obj.innerHTML += "initialize...<br />";
}
else if (request.readyState == 1) {
obj.innerHTML += "begin load...<br />";
}
else if (request.readyState == 2) {
obj.innerHTML += 'load completed.<br />';
}
else if (request.readyState == 3) {
obj.innerHTML += 'data ready.<br />';
}
else if (request.readyState == 4) {
if (request.status == 200) {
obj.innerHTML += request.responseText + '<br />';
}
else if (request.status == 404) {
obj.innerHTML += 'sorry. not found!<br />';
}
else {
obj.innerHTML += 'I do not know.<br />';
}
}
}
</script>
</head>
<body>
<div><a class="alink" href="#" onclick="sendRequest();">Click Here!</a></div>
<div id="workaround"></div>
</body>
</html>
扫一扫
1592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
