您的位置：首页 > 其它

自己动手实现一个简单的Ajax

2011-01-08 17:41 756 查看

尽管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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航