知识点：
①根据浏览器的不同实例化XMLHttpRequest对象；
②发送一个异步请求的步骤；
③如何处理每次回调的函数；
完整代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="01_XmlHttpRequest.aspx.cs" Inherits="XmlHttpRequest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>ASP.NET AJAX In Action - XmlHttpRequest</title> </head> <body> <form id="form1" runat="server"> <div> <span id="results">Loading...<br /> <!--这里用按钮触发异步回调事件--> </span><input type="button" value="触发异步调用，调用Welcome.htm的内容" onclick="sendRequest('Welcome.htm');" /> </div> </form> <script type="text/javascript"> <!-- var xmlHttp = null; window.onload = function() { loadXmlHttp(); //sendRequest("Welcome.htm"); } //【1】根据浏览器版本实例化xmlHttp对象 function loadXmlHttp() { if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera等浏览器 xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE 5.x and 6版本的微软浏览器 } catch (e){} } } //【2】发送一个异步请求的步骤； function sendRequest(url) { if (xmlHttp) { // ①打开异步连接 xmlHttp.open("GET", url, true); // true = async // ②指定回调函数 xmlHttp.onreadystatechange = onCallback; // [可选]Specify form data in request body xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // ③发送异步请求 xmlHttp.send(null); } } //【3】每次异步请求的就绪状态改变时都会调用的回调函数； function onCallback() { // ①查看完成了的就绪状态 if (xmlHttp.readyState == 4) { // ②状态码200表示成功，404表示没有文件错误 if (xmlHttp.status == 200) { // ③显示请求结果 var r = document.getElementById('results'); r.innerHTML = xmlHttp.responseText; } else { alert('Error: ' + xmlHttp.status); } } } // --></script> </body> </html>
welcome.htm页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Welcome</title> </head> <body> <div>Welcome to ASP.NET AJAX In Action!</div> </body> </html>
