XMLHttpRequest对像的几个方法与属性
|- open()：建立到服务器的新请求。
|- send()：向服务器发送请求。
|- abort()：退出当前请求。
|- readyState：提供当前 HTML 的就绪状态。
|- responseText：服务器返回的请求响应文本。
创建对象
--------
1.创建新的XMLHttpRequest对象
<script language = "javascript" type = "text/javascript">
var request = new XMLHttpRequest();
</script>
2.创建具有错误处理能力的XMLHttpRequest对象(针对有的浏览器不支持此对象)
<script language = "javascript" type = "text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch(failed) {
request = false;
}
if(!request) {
alert("Error initializing XMLHttpRequest!");
}
</script>
3.应付 Microsoft
Microsoft 支持 Ajax，但是其 XMLHttpRequest 版本有不同的称呼。事实上，它将其称为几种 不同的东西。如果使用较新版本的 Internet Explorer，则需要使用对象 Msxml2.XMLHTTP，而较老版本的 Internet Explorer 则使用 Microsoft.XMLHTTP。我们需要支持这两种对象类型（同时还要支持非 Microsoft 浏览器）。
<script language = "javascript" type = "text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch(trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch(othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch(failed) {
request = false;
}
}
}
if(!request) {
alert("Error initializing XMLHttpRequest!");
}
</script>
4.静态与动态：以上所有代码都直接嵌套在 script 标记中为静态，代码是在页面显示给用户之前的某个时候运行；放到方法或函数体中为动态。
将 XMLHttpRequest 创建代码移动到方法中：
<script language = "javascript" type = "text/javascript">
var request;
function createRequest() {
try {
request = new XMLHttpRequest();
} catch(trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch(othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch(failed) {
request = false;
}
}
}
if(!request) {
alert("Error initializing XMLHttpRequest!");
}
}
function getCustomerInfo() {
createRequest();
//do something with the request variable.
}
</script>
此代码惟一的问题是推迟了错误通知，这也是多数 Ajax 程序员不采用这一方法的原因。假设一个复杂的表单有 10 或 15 个字段、选择框等，当用户在第 14 个字段（按照表单顺序从上到下）输入文本时要激活某些 Ajax 代码。这时候运行 getCustomerInfo() 尝试创建一个 XMLHttpRequest 对象，但（对于本例来说）失败了。然后向用户显示一条警告，明确地告诉他们不能使用该应用程序。但用户已经花费了很多时间在表单中输入数据！这是非常令人讨厌的，而讨厌显然不会吸引用户再次访问您的网站。
如果使用静态 JavaScript，用户在点击页面的时候很快就会看到错误信息。这样也很烦人，是不是？可能令用户错误地认为您的 Web 应用程序不能在他的浏览器上运行。不过，当然要比他们花费了 10 分钟输入信息之后再显示同样的错误要好。因此，我建议编写静态的代码，让用户尽可能早地发现问题。
用 XMLHttpRequest 发送请求
--------------------------
<script language = "javascript" type = "text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch(trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch(othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch(failed) {
request = false;
}
}
}
if(!request) {
alert("Error initializing XMLHttpRequest!");
}
function getCustomerInfo() {
var phone = document.getElementId("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage; /////////
request.send(null);
}
</script>
表单:
<body>
<p><img src = "breakneck-logo_4c.gif" alt = "Break Neck Pizza" /></P>
<form action = "POST">
<p>Enter your phone number:
<input type = "text" size = "14" name = "phone" id = "phone"
onChange = "getCustomerInfo();" />
</p>
<p>Your order will be delivered to:</p>
<div id = "address"></div>
<p>Type your order in here:</p>
<p><textarea name = "order" row = "6" cols= "50" id = "order"></textarea>
</p>
<p><input type = "submit" value = "Order Pizza" id = "submit" /></p>
</form>
</body>
处理服务器响应
--------------
<script language = "javascript" type = "text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch(trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch(othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch(failed) {
request = false;
}
}
}
if(!request) {
alert("Error initializing XMLHttpRequest!");
}
function getCustomerInfo() {
var phone = document.getElementId("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage; //回调
request.send(null);
}
function updatePage() {
if(request.readyState == 4) { //检查就绪状态
if(request.status == 200) { //检查 HTTP 状态码
alert("Server is done!");
} else {
alert("Error: status code is " + request.status);
}
}
}
</script>
读取响应文本
现在可以确保请求已经处理完成（通过就绪状态），服务器给出了正常的响应（通过状态码），最后我们可以处理服务器返回的数据了。返回的数据保存在 XMLHttpRequest 对象的 responseText 属性中。
function updatePage() {
if(request.readyState == 4) { //检查就绪状态
if(request.status == 200) { //检查 HTTP 状态码
var response = request.responseText.split("|");
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML = response[1].replace(/\n/g, "");
} else {
alert("Error: status code is " + request.status);
}
}
}