深刻學習Ajax

1.什麼是Ajax？

　　AJAX的全稱是Asynchronous Javascript And XML （異步的JavaScript和XML）。是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。經過在後臺與服務器進行少許數據交換，ajax 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。
　　ajax是如下幾種技術的組合應用：
　　　　– 基於web標準（standards-based presentation）XHTML+CSS的表示；
　　　　– 使用 DOM（Document Object Model）進行動態顯示及交互；
　　　　– 使用 XML 和 XSLT 進行數據交換及相關操做；（如今更多的是使用JOSN）
　　　　– 使用 XMLHttpRequest 進行異步數據查詢、檢索；
　　　　– 使用 JavaScript 將全部的東西綁定在一塊兒。

2.Ajax工做原理

　　Ajax的工做原理至關於在用戶和服務器之間加了一箇中間層(ajax引擎),使用戶操做與服務器響應異步化。並非全部的用戶請求都提交給服務器,像—些數據驗證(好比判斷用戶是否輸入了數據)和數據處理(好比判斷用戶輸入數據是不是數字)等都交給Ajax引擎本身來作, 只有肯定須要從服務器讀取新數據時再由Ajax引擎代爲向服務器提交請求。

　　　

 

3.建立Ajax的步驟

　　1.建立XMLHttpRequest對象

var xhr = new XMLHttpRequest();

　　　XMLHttpRequest對象是Ajax的核心，它是Ajax實現的關鍵，發送異步請求、接受響應以及執行回調都是經過它來完成。

　　2.使用XMLHttpRequest對象建立請求

　　

　　　同步模式：發出的請求會暫停全部javascript代碼的執行，知道服務器得到響應爲止，若是瀏覽器在鏈接網絡時或者在下載文件時出了故障，頁面就會一直掛起。
　　　異步模式：發出的請求，請求對象收發數據的同時，瀏覽器能夠繼續加載頁面，執行其餘javascript代碼

　　3.處理響應：監聽readyStates屬性值的變化，寫回調函數處理服務器返回的數據

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText);
    }
}

　　readyState ：ajax的狀態
　　　　0：請求未初始化（尚未調用 open()）。
　　　　1：創建請求：可是尚未發送（尚未調用 send()）。
　　　　2：發送請求：正在處理中（一般如今能夠從響應中獲取內容頭）。
　　　　3：請求處理中：已有部分數據可用了，可是這時獲取部分數據會出現錯誤。
　　　　4：響應已完成：此時能夠經過經過responseBody和responseText獲取完整的迴應數據。

　　status屬性：
　　　　200:"OK"
　　　　404: 未找到頁面
　　　　500：服務器內部錯誤」

　　4.使用XMLHttpRequest對象發送請求

 

xhr.send();

　　發送請求方式：
　　　　get：使用get方法將要提交的參數寫到open方法的url參數中，此時send方法的參數爲null或爲空。

xhr.open("GET",url?name="張三"&age=18,true);
xhr.send(null);

　　　　post：須要先使用 setRequestHeader()來添加請求頭設置post編碼方式：。而後在send()方法中發送的數據：

xhr.open("post", url, true);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send("name=張三&age=18");

 

4.XMLHttpRequest對象的屬性和方法

　　

　　

5.Servlet響應請求

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
       //最好把請求和響應的編碼設置成utf-8
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html; charset=utf-8");
  
        PrintWriter out = response.getWriter();
        out.write(數據);
    }

　　數據最好以json的方式發給頁面，而後利用eval函數將返回的文本轉化成js對象