首頁 > 開發者 > Ajax

Ajax 同一頁面同時執行多個 XMLHTTP__Ajax

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Ajax 同一頁面如何同時執行多個 XMLHTTP 呢，比如部落格頁，需要同時利用 Ajax 讀取作者資訊、文章資訊、評論資訊……

我們的第一反應可能是建立多個全域 XMLHTTP 對象，但這並不現實。其實實現方式非常簡單，就是給 onreadystatechange 對應的回呼函數加上參數，以下代碼是解決方案中一個函數中的一段代碼。 xmlhttp.open("GET", "ajax_process.aspx?a=" + a, true);
xmlhttp.onreadystatechange = function () { OnReadyStateChng(xmlhttp, a); };
xmlhttp.send(null);

只是改寫 onreadystatechange 的屬性值，這樣就可以為 OnReadyStateChng 函數賦參數了。如是我們寫作 xmlhttp.onreadystatechange = OnReadyStateChng;，那麼 OnReadyStateChng 就不能有參數了，也就無法獲得是哪個 xmlhttp 的響應，也就無法獲得是響應後要對哪個控制項進行設定。

我們可以看一個完整的樣本，前台頁面是普通的 Ajax 技術的 HTML 頁面，後台使用的是 ASP.NET 的 .aspx 檔案，之所以採用 ASP.NET，是為了示範延時處理功能。

前景程式 <?xml version="1.0" encoding="gb2312"?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ajax Test</title>
</head> <body> <div id="a1">1</div>
<div id="a2">2</div>
<div id="a3">3</div> <script type="text/javascript" language="javascript">
<!--
function CreateHTTPObject()
{
    var xmlhttp;
   
    try
    {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
        try
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e)
        {
            xmlhttp = false;
        }
    }
   
    if (!xmlhttp && typeof XMLHttpRequest!='undefined')
    {
        try
        {
            xmlhttp = new XMLHttpRequest();
        }
        catch (e)
        {
            xmlhttp=false;
        }
    }
   
    if (!xmlhttp && window.createRequest)
    {
        try
        {
            xmlhttp = window.createRequest();
        }
        catch (e)
        {
            xmlhttp=false;
        }
    }
   
    return xmlhttp;
}
function OnReadyStateChng(xmlhttp, a)
{
    if (xmlhttp.readyState == 4)
    {
        if (xmlhttp.status == 200)
        {
            document.getElementById(a).innerHTML = a;
        }
        else
        {
            alert("HTTP 錯誤，狀態代碼：" + xmlhttp.status);
        }
    }
}
function SubmitMsg( a)
{
    var xmlhttp = CreateHTTPObject();
    if (!xmlhttp)
    {
        return; //無法建立 xmlhttp 對象
    }
   
    //Ajax 提交
    xmlhttp.open("GET", "ajax_process.aspx?a=" + a, true);
    xmlhttp.onreadystatechange = function () { OnReadyStateChng(xmlhttp, a); };
    xmlhttp.send(null);
} SubmitMsg("a1");
SubmitMsg("a2");
SubmitMsg("a3"); -->
</script> </body> </html>

背景程式 <%@ Page Language="C#" %>
<%Response.Expires = 0; %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server">
    void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["a"] == "a1")
        {
            System.Threading.Thread.Sleep(3000); //延時 3 秒
        }
        else if (Request.QueryString["a"] == "a2")
        {
            System.Threading.Thread.Sleep(1000); //延時 1 秒
        }
        else if (Request.QueryString["a"] == "a3")
        {
            System.Threading.Thread.Sleep(2000); //延時 2 秒
        }
    }
</script> <html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Ajax Test</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    </div>
    </form>
</body>
</html>

示範解說

前台頁面發出三個非同步回送請求，分別為 a1、a2、a3 請求值，在後台頁面中，通過延時類比處理 a1 需要 3 秒，處理 a2 需要 1 秒，處理 a3 需要 2 秒。通過示範發現最先有變化的是 a2，然後是 a3、a1，順序並沒有亂，也沒有出現顯示混亂的情況。注意後台頁面需要 Response.Expires = 0; 這麼一句代碼指示頁面立即到期，否則重新整理時請求的是緩衝的頁面，示範也就沒有效果了。

另外

每個 xmlhttp 的 onreadystatechange 對應的函數名稱也可以不同，不僅限於參數不同。

http://www.cftea.com/c/2007/09/ZO75JIETY8KK76RZ.asp  

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More