封裝基本的Ajax請求

標籤：

一、說明  

   Ajax請求能夠對頁面進行局部的更新，而不用重新重新整理當前瀏覽的整個頁面，使使用者體驗更好。  

   實現Ajax請求的方法可以通過JavaScript代碼向伺服器發出 請求資訊，用戶端瀏覽器接收到返

回的Ajax資料，對頁面進行 局部的重新整理。在這個實現過程中，XMLHttpRequest對象是Ajax 的核心。

    雖然jQuery已經將Ajax請求封裝得很好了，我們可以非常方 便的使用jQuery庫提供的方法($.get(),

$.post(),$.ajax()等) 實現Ajax請求，但是本著學習的目的，要做到知其然，並且知 其所以然，有必要

自己去通過JS代碼實現一下基本的Ajax請求 的，並且封裝其操作。我要將的封裝Ajax請求其實就是圍繞著

XMLHttpRequst對象屬性和方法進行實現的。

二、Ajax請求的實現過程

a.建立XMLHttpRequest對象xmlrequest;

b.開啟請求xmlrequest.open(...);

c.設定狀態改變時調用的JavaScript函數;  

狀態readyState屬性代碼如下：

  0：代表未初始化的狀態。建立了一個XMLHttpRequest對象，但尚未初始化

  1：代表串連狀態。已經調用了open方法，並且已經準備好發送請求

  2：代表發送狀態。已經調用了send方法發出請求，但尚未得到響應

  3：代表正在接收狀態。已經接收了HTTP響應的頭資訊，正在接收響應本文內容

  4：代表已載入狀態。此時響應內容已完全被接收 d.發送請求xmlrequest.send().

三、Ajax實現代碼

//封裝的ajax請求參數：method:要求方法，一般為："POST" 或 "GET"url:請求的URL路徑onsuccess:該參數為一個方法，該方法在請求成功之後執行function ajax(method,url, onsuccess) {    var xmlrequest = window.XMLHttpRequest ?         //建立對象                         new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);    xmlrequest.open(method, url, true);              //開啟請求    xmlrequest.onreadystatechange = function () {    //設定狀態改變時調用的方法        if (xmlrequest.readyState == 4) {            if (xmlrequest.status == 200) {                onsuccess(xmlrequest.responseText);//請求成功，onsuccess方法一般是            }                                   //要實現頁面的局部重新整理功能            else {                alert("請求發生錯誤：" + xmlrequest.status);            }        }    };    xmlrequest.send();       //發送請求}

   這樣一個基本的ajax請求代碼的封裝的就完成了，為了更方便的使用這個封裝好的方法，我們可以將這個方法寫到一個

ajax.js檔案中，這樣當要使用這個方法的使用，只需要添加：

<script src="js/ajax.js" /*src為js檔案所在的路徑*/ type="text/javascript" language="javascript"></script>

就可以調用ajax()方法了，例如：

ajax("POST","/Home/Index",function (resText){

  alert("Ajax請求資料："+resText);

});

 

附：未完待續......

 

封裝基本的Ajax請求