AJAX 在 ASP.NET 中

这是 JavaScript 文件 Ajax.js

ajaxpage()

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http:///">http://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid)
{
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari, Firefox, Opera 8.0+, Safari
    page_request = new XMLHttpRequest()
else if (window.ActiveXObject) // ifInternet Explorer\
    { 
    try {
            page_request = new ActiveXObject("Msxml2.XMLHTTP")
        } 
    catch (e)
    {
    try{
            page_request = new ActiveXObject("Microsoft.XMLHTTP")
        }
    catch (e){}
        }
    }
else
    return false
    
    document.getElementById(containerid).innerHTML=loadstatustext
    page_request.onreadystatechange=function()
    {
         loadpage(page_request, containerid)
    }
if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState != 4)
{return;}
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
//alert(page_request.responseText)
}

这个方法是做什么的？

我们创建一个变量 page_request 来保存 XMLHttpRequest 对象。然后尝试使用 XMLHttp=new XMLHttpRequest() 创建对象。这是针对 Firefox、Opera 和 Safari 浏览器的。如果失败，则尝试 xmlHttp=new ActiveXObject ("Msxml2.XMLHTTP")，这是针对 Internet Explorer 6.0 的，我想您可以自己弄清楚其余部分的作用。

注意：上面的代码适用于大多数浏览器。

onreadystatechange 属性

readyState 属性保存服务器响应的状态。每次 readyState 更改时，都会执行 onreadystatechange 函数。

if (page_request.readyState != 4) // 请求已完成

responseText 属性

可以使用 responseText 属性检索从服务器返回的数据，我们使用此代码检索：

document.getElementById(containerid).innerHTML=page_request.responseText;

向服务器发送请求

open() 方法接受三个参数：第一个定义发送请求时使用的方法（GET 或 POST）。第二个指定服务器端脚本的 URL。第三个指定应异步处理请求。send() 方法将请求发送到服务器。

如何使用此方法

• 将包含我们将要调用的函数的 Ajax 文件 ajax.js 包含到您的应用程序中。

• 将一个名为 Loading.gif 的图片包含在 images 文件夹中，该图片将在页面请求过程中显示。

• 创建两个页面，我们将从另一个页面/页面 ajaxpage1.aspx 和 ajaxpage2.aspx 调用，这两个是目标文件。

• 创建一个显示页面 display.aspx，我们将在其中调用其他 2 个页面。

• 在创建 ajaxpage1.aspx 页面时，我们删除所有 html 元素（除了 page 指令），然后放入一个 div，并在其中写入“这是 Ajaxpage1”，并简单地在第二个页面做同样的事情，但在其中写入“这是 ajaxpage2”，这样我们就可以知道我们正在调用哪个页面。

HTML 页面将如下所示

<%@ Page Language="C#" AutoEventWireup="true"CodeFile="ajaxpage1.aspx.cs" Inherits="_Default" %>
<div style="width: 100px; height: 100px">
this is the first page
</div>

在 display.aspx 页面中，我们将使用上面 ajax.js 文件中的函数来调用其他 2 个页面。我们创建一个 DIV 并给它 ID="Main1"，这是将显示其他页面的容器，我们放入两个按钮，button1 将调用 AjaxPage1.aspx，button2 将调用 ajaxpage2.aspx。在 page 指令之后，我们将 放入以下代码：

<script src="ajax.js"></script>
<script>
var loadstatustext="  <img src='images/loading.gif' /><Font Class='Content'>   &#1580;&#1575;&#1585;&#1609; &#1575;&#1604;&#1578;&#1581;&#1605;&#1610;&#1604;   </font>";
function Page1()
{
var links="AjaxPage1.aspx";
var container1="Main1";
ajaxpage(links,container1);
}
function page2()
{
var links="AjaxPage2.aspx";
var container1="Main1";
ajaxpage(links,container1);
}
</script>

正如您所看到的，第一个脚本调用了 ajax.js 文件，然后我们有一个名为loadstatustext 的变量，它是在页面请求过程中显示的 GIF 图片，然后，在 page1() 函数中，我们定义一个变量Links，它是将在当前页面显示的所需网页，以及另一个名为container1 的变量，我们希望页面显示在此处，我将其指定为我想显示数据的 DIV 的 id。

然后，我们希望将脚本注册到两个按钮，因此双击 button1 将创建 click 事件处理程序并将此代码放入以启动 page1() 函数。

protected void Button1_Click(object sender, EventArgs e)
{
Page.RegisterStartupScript("StartUp", "<script>page1( );</script>");
}

对 button2 执行相同的操作以启动 page2() 函数。