首頁 > 開發者 > Ajax

Javascritp中XMLHttpRequest實現AJAX筆記

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

AJAX

對於WEB開發人員來說，AJAX這個詞一點也不陌生，現在說說大概會想到以下幾點：

 

•無重新整理改變頁面資料

•非同步通訊

•$.ajax、$.get、$.post

•Asynchronous Javascript And XML

•...

AJAX就是一種互動網頁應用技術，主要目的的提升使用者體驗，其原理是利用 Javascript的XMLHttpRequest對象與伺服器通訊擷取資料後填充在頁面中，從而實現不重新整理整個頁面卻能把資訊反饋給使用者的效果。

通常使用的AJAX
我們通常使用的AJAX應該絕大多數都是jQuery封裝好的，所以時間久了我們會對jQuery 形成很大的依賴。而且，在有些使用情境裡，我們只用到了AJAX卻把整個jQuery檔案包含進來，這樣會影像網頁的載入時間（在使用者網路不好的情況下更糟糕）。

所以，掌握原生的AJAX寫法還是很有必要的，不僅能擺脫jQuery的依賴，還能進一步加深對非同步通訊的理解。如果抽時間再去研究XMLHttpRequest對象那就更贊了。

原生的AJAX

•產生XMLHttpRequest對象

 代碼如下 複製代碼
var XMLReq;
if (window.XMLHttpRequest) {
    XMLReq = new XMLHttpRequest();
} else {
    XMLReq = new ActivateXObject('Microsoft.XMLHTTP');
}

在IE瀏覽器裡沒有XMLHttpRequest這個對象，要使用 ActivateXObject('Microsoft.XMLHTTP')來替代。

•向伺服器發送請求

 代碼如下 複製代碼

// for GET method
XMLReq.open('GET', 'ajax_get.html', true);
XMLReq.send();

// for POST method
XMLReq.open('POST', 'ajax_post.html', true);
XMLReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XMLReq.send('key=value&key2=value2');


上面代碼中XMLReq.open()的第三個參數就是控制是否非同步請求的，當為true的時候就是我們說的非同步通訊，為false的時候就按照正常的javascript邏輯順序執行。真正非同步目的就是在向伺服器請求資料的時候不影響正常的javascript代碼執行，否則一旦請求時間過長或者出錯可能影響整個頁面的瀏覽。

•處理伺服器響應資料

 代碼如下 複製代碼

XMLReq.onreadystatechange = function () {
    if (4 == XMLReq.readyState && 200 == XMLReq.status) {
        var data = XMLReq.responseText;
        // return xml data
        // var data = XMLReq.responseXML;
    }
}

一個完整的AJAX請求過程可以對照XMLReq.readyState參數清晰的理解清楚，不同的值表示過程如下：

readyState 過程變化
0 請求未初始化
1 伺服器串連已建立
2 請求已接收
3 請求處理中
4 請求已完成，且響應已就緒

Simple Demo
ajax.html

 代碼如下 複製代碼

<html>
    <script type="text/javascript" charset="utf8">
        function my_ajax(url, callback) {
            var XMLReq;
            if (window.XMLHttpRequest) {
                XMLReq = new XMLHttpRequest();
            } else {
                XMLReq = new ActivateXObject('Microsoft.XMLHTTP');
            }

            XMLReq.onreadystatechange = function() {
                // alert(XMLReq.readyState);
                if (4 == XMLReq.readyState && 200 == XMLReq.status) {
                    callback(XMLReq.responseText);
                }
            }

            XMLReq.open('GET', url, false);
            XMLReq.send();
        }

        function btn_click() {
            my_ajax('ajax_get.html', function (data) {
                    document.getElementById('result').innerHTML = data;
                }
            );

            alert('ok');
        }
    </script>

    <body>
        <input type="button" value="Click" onclick="btn_click()" />
        <div id="result"></div>
    </body>
</html>

ajax_get.html

 代碼如下 複製代碼

<div> I am ajax get data </div>

本文意在拋磚引玉，有空的時候能看一看原生的東西，儘管比較複雜。

使用XMLHttpRequest 實現ajax效果

這裡我們用用戶端通過XMLHttpRequest 請求服務端擷取當前系統時間，實現非同步互動！

用戶端myAjax.html代碼：

 代碼如下 複製代碼

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>AJAXDEMO</title>
 </head>
<mce:script language="javascript" type="text/javascript"><!--
function btn_onclick()
{  
            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //建立XMLHTTP對象，相當於
            if (!xmlhttp) {
                alert("建立xmlhttp對象異常！");
                return false;
            }
          xmlhttp .open("POST","GetDate1.ashx?&ts" +new Date(),false);//準備向伺服器的GetDate1.ashx發出Post請求
          xmlhttp.onreadystatechange = function() //需要監聽onreadyStatechange事件
          {
             if(xmlhttp.readyState == 4) //伺服器完成
             {
               if(xmlhttp.status == 200)   //如果狀態代碼為200則是成功
               { 
                   document.getElementById ("Text1").value=xmlhttp.responseText; //responseText屬性為伺服器返回的文本
               }
               else
               {
                    alert("AJAX伺服器返回錯誤！");
               }
            }
          }
          xmlhttp.send(); //才開始發送請求  
}
// --></mce:script>
<body>
 <input id="Text1" type="text" disabled="disabled" /><input id="button1" type="button" value="顯示系統時間"  onclick="btn_onclick()" />&nbsp;
</body>
</html>&nbsp;


服務端GetDate1.ashx 代碼 (用ashx檔案來處理 ,不需要HTML代碼,只需服務端處理返回資料 )

 代碼如下 複製代碼


  public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/html";
       
            context.Response.Write(DateTime.Now.ToString()); //顯示服務端時間
        }

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

相關關鍵詞：
xmlhttprequest php xmlhttprequest browser support ajax echo ajax manual ajax payload w3s ajax ajax websocket
相關文章
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