XMLHttpRequest实现Ajax-优快云博客

本文介绍了如何使用XMLHttpRequest创建Ajax请求来实现网页的部分更新而无需重新加载整个页面。通过具体的JavaScript代码示例和ASP.NET后端逻辑展示了异步数据获取的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文通过学习XMLHttpRequest创建Ajax，本文参考《Ajax入门经典》

（一）创建XmlHttpRequest.js。代码如下

/*
（一）Ajax技术
   （1）XMLHttpRequest
   （2）隐藏框架
   （3）隐藏的内联框架
   （4）动态脚本加载
   （5）预载图像和cookie
 (二)XMLHttpRequest
 (1)主要目的：用HTML和脚本来直接连接存储在服务器上的数据层
 （2）好处：不必发送页面或刷新页面，因为地城数据的改变会立即反映在页面中。
（三） XMLHttpRequest异步用法
（1）创建XMLHttpRequest对象
（2）设置readystatechange事件触发一个指定的函数
（3）检查readySate属性，看数据是否准备就绪，如果还未准备就绪，就隔一段时间再检查。如果已经准备就绪，就继续执行下一步
（4）打开请求
（5）发送请求
*/
//Create the XMLHttpRequest
var xHRObject = false;
if (window.XMLHttpRequest) {
    xHRObject = new XMLHttpRequest(); //IE7,Firefox,Safari,Opera创建对象
}
else if (window.ActiveXObject) {
xHRObject = new ActiveXObject("Microsoft.XMLHTTP");//在IE5和IE6中创建
}
function sendRequest(data)
{
 xHRObject.open("GET","display.aspx?value="+data,true);
 xHRObject.onreadystatechange=getData;//触发一个指定的函数。readystatechangede事件的整个操作都是在后台执行。这样就能够异步使用XMLHttpRequest对象
 xHRObject.send(null);
}
function getData() {
    //Check to see if the XMLHttpRequest object is ready and whether it 
    //has returned a legitimate response
    //readyState 0:未初始化 2：发送 3：正在接收 4：已加载
    if (xHRObject.readyState == 4 && xHRObject.status == 200)//检查readySate属性，看数据是否准备就绪，如果还未准备就绪，就隔一段时间再检查。如果已经准备就绪，就继续执行下一步
     {
        var serverText=xHRObject.responseText;
        if(serverText.indexOf('!'!=-1))
        {
           element=serverText.split('|');
           document.getElementById(element[0]).innerHTML=element[1];
        }
       
    }
 
}

（二）创建display.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></title>
    <script src="XmlHttpRequest.js" type="text/javascript"></script>
</head>
<body>
<a href="#" onclick="sendRequest('Contacts');return false;">Contacts</a>
<a href="#" onclick="sendRequest('Calendar');return false;">Calendar</a>
<a href="#" onclick="sendRequest('Adverts');return false;">Adverts</a>
<br/>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>

（三）创建display.aspx，隐藏代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace BeginAjax
{
    public partial class display : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            switch (Request["value"])
            { 
                case "Contacts":
                    Response.Write("box1|<br><b>Contacts</b><br>joetao,Acacia Avenue<br> Joane Doe,2 Willow Tree Lane");                   
                    break;
                case "Calendar":
                    string dt = DateTime.Now.ToString();
                    Response.Write("box2|<br><b>Calendar:</b><br>"+dt);  
                    break;
                case "Adverts":
                    Response.Write("box2|<br><b>Adverts:</b><br>" ); 
                    break;

            }
        }
    }
}

（四）代码下载