不依賴JQuery的入門Ajax代碼

今天看了head first ajax這本書里ajax的實例，講的很好，這本書覺着很不錯，推薦下。

Ajax （Asynchronous Javascript and XML）即異步Javascript和XML，但不定非要使用js和xml才能稱為Ajax，簡單說，Ajax是設計和構建web頁面的一種方法，使之像桌面應用一樣具有響應性和交互性，而其中的異步就是指瀏覽器像服務器發出請求而無需用戶等待響應。

創建一個Ajax的簡單代碼 要分以下幾步走（本實例是使用MVC4 +VS2013 創建的）：

1、創建View頁面，即html頁面

2、初始化頁面

3、創建請求對象

4、服務端響應請求代碼

5、顯示到界面

下面開始 逐一介紹，使用vs創建mvc4空項目。

1、創建view頁面

在視圖文件夾添加Index.cshtml，輸入如下html代碼,div是用來顯示新聞列表的，button按鈕用來觸發Ajax事件

        <div id="newsList">
        </div>
        <input type="button"  value="獲取新聞"  id="btnNews"/>

2、 初始化頁面

在頁面加載完后，給button綁定調用Ajax事件

    window.onload = initPage;
    function initPage() {
        var btn = document.getElementById("btnNews");
        btn.onclick = function () {
            getNews();
        };
    }

3、創建請求對象

針對各種瀏覽器，我們建立一個初始化XMLHttpRequest請求對象的方法。

    var request;
    function createRequest() {
        try {
            request = new XMLHttpRequest();//這里創建一個請求對象 但不適用於所有瀏覽器
        }
        catch (msXml) {
            try {
                request = new ActiveXObject("MSxml2:XMLHTTP");//第一種方法失敗，嘗試是不是IE6瀏覽器
            }
            catch (ms) {
                try {
                    request = new ActiveXObject("Microsoft:XMLHTTP");//又失敗了，再來嘗試是不是IE5
                }
                catch (failed) {
                    request = null;
                }
            }
        }
        return request;
    }

創建完請求后，我們開始向服務端執行請求

    function getNews() {
        var request = createRequest();
        var newsCount = 0;
        if (document.getElementsByTagName("li") != null) {
            newsCount = document.getElementsByTagName("li").length;
        }
        var url = "default/GetNews?newsid=" + newsCount;
        request.open("GET", url, true);
        request.onreadystatechange = displayNews; //回調函數，每次狀態改變時 瀏覽器都會運行回調函數。
        request.send(null);

    }

4、服務端響應請求代碼接着我們要在服務端寫代碼進行響應請求，添加控制器DefaultController，添加GetNews方法，返回類型為string

       public string GetNews(int newsid)
        {
            string responseText = @"<ul>";
            for (int i = 1; i <= 10; i++)
            {
                responseText += string.Format("<li>這是第{0}條新聞</li>", i + newsid);
            }
            responseText += "</ul>";
            return responseText;
        }

5、顯示到界面XMLHttpRequest對象有一個onreadystatechange 屬性，該屬性用來告知瀏覽器執行回調函數，服務器在接受到請求對象后，會更新readyState（表示請求對象當前狀態）屬性，每次這個屬性發生變化時，瀏覽器就會調用onreadystatechange這個屬性指定的函數。

    function displayNews() {
        if (request.readyState == 4) ////服務器接收到請求時 為1 ，在處理請求時值為2或3，處理完請求后 修改值為4
        {
            if (request.status == 200) //http狀態碼 200代表成功，404代表所請求的頁面不存在或鏈接錯誤。
            {
                var divNews = document.getElementById("newsList");
                divNews.innerHTML += request.responseText;
            }
        }
    }

效果如下：

源碼下載

喜歡就推薦下吧，您的支持是我的動力！