詳解Ajax請求（二）——異步請求原理的分析

      在上一文章裏，咱們分析了同步請求的原理。當瀏覽器向服務器發送同步請求時，服務處理同步請求的過程當中，瀏覽器會處於等待的狀態，服務器處理完請求把數據響應給瀏覽器並覆蓋瀏覽器內存中原有的數據，瀏覽器從新加載頁面並展現服務器響應的數據。

　　那麼，有沒有一種技術，可讓瀏覽器發送請求給服務器，服務器處理請求的過程當中，瀏覽器不處於等待的狀態，而且瀏覽器接收響應數據的同時再也不從新加載整個頁面，既請求發送以前的數據不丟失，又能實現頁面的局部刷新呢？那就要用到ajax請求——異步請求模型，那麼異步請求的原理是什麼呢？

　　咱們知道，在同步請求模型中，瀏覽器是直接向服務器發送請求，並直接接收、處理服務器響應的數據的。這就致使了瀏覽器發送完一個請求後，就只能乾等着服務器那邊處理請求，響應請求，在這期間其它事情都作不了。這就像是你到了一個新城市去找房子住，你能夠本身去找，在網站上或者是街頭小廣告上去了解房源信息，找合適本身的那一個，而後去跟房東談價錢。在這期間你的精力和時間大部分都用到了找房子上，你可能沒時間再去找工做或者作其餘的事情了。還有一種方式是你找一個租房中介，找你一個代理人，把你的需求告訴他讓他來幫你找，在中介給你找房子的同時你還能夠去找工做或者作其餘的事情。

　　異步請求正是基於以上所述的模式，瀏覽器把請求交給代理對象—XMLHttpRequest（絕大多數瀏覽器都內置了這個對象），由代理對象向服務器發起請求，接收、解析服務器響應的數據，並把數據更新到瀏覽器指定的控件上。從而實現了頁面數據的局部刷新。異步請求使瀏覽器不用等待服務器處理請求，不用從新加載整個頁面來展現服務器響應的數據，在異步請求發送的過程當中瀏覽器還能進行其它的操做。咱們來看一下異步請求的執行流程圖：

下面咱們用原生的ajax請求的代碼實現一下，上片文章中的那個示例。輸入姓名，頁面局部刷新身份證號。

<input type="button" id="testBtn" value="測試按鈕" onclick="sentAjax();"/><br>
姓名：<input type="text" name = 'name'  value=""/><br>
身份證號：<input type="text" name = 'ID' id="ID" value=""/><br>

<script type="text/javascript">
alert(111);function sentAjax(){
    var xmlHttp = new XMLHttpRequest();
    
    xmlHttp.open("get","<%=basePath %>/manage/test/ajax",true);
    xmlHttp.send();
   
    xmlHttp.onreadystatechange = function (){
　　　　　　　　　　　　　　　　　　　　　　　　　　　 var state = xmlHttp.readyState;
                                               var status = xmlHttp.status;
                                               if(state == 4 && status == 200){
                                                  var data=xmlHttp.responseText;
                                                   document.getElementById("ID").value = data;                          
                                               }
    }
}
</script>

@RequestMapping("/ajax")
    public void testAjax(HttpServletRequest request, HttpServletResponse response){
        
        try {
            
            response.setCharacterEncoding("utf-8");//響應字符集的編碼格式
            PrintWriter out=response.getWriter();
            out.print("12345");
            
        } catch (IOException e) {
            e.printStackTrace();
        }
        
    }

　　點擊按鈕看一下執行結果：

  

　　異步請求發送後，原來頁面上的的數據沒有消失，alert(111),沒有彈出，說明頁面沒有從新加載只是局部刷新了。（順便提一句，這裏沒有中文亂碼的問題，一是姓名參數沒有與服務器進行交互，而來更加說明，頁面沒有從新加載）

　　下面咱們看一下，ajax請求中對於各項參數的解釋。

　　　var xmlHttp = new XMLHttpRequest();//用於建立代理對象

　　　xmlHttp.open("get","<%=basePath %>/manage/test/ajax",true);//初始化請求
    　  xmlHttp.send();//發送請求

　　　

　　　xmlHttp.onreadystatechange//監聽請求的狀態

　　　

　　　 var data=xmlHttp.responseText; //獲取相應文本格式

　　　

　　　固然咱們在實際的中不會使用原生的ajax發送異步請求，通常採用Jquery這個框架封裝好的ajax，便於開發和對數據的處理。下一篇文章將會對Jquery的ajax進行解析，和使用時一些技巧性的操做。

　　最後說一點，咱們做爲程序員，研究問題仍是要仔細深刻一點的。當你對原理了解的有夠透徹，開發起來也就駕輕就熟了，不少開發中的問題和疑惑也就迎刃而解了，並且在面對其餘問題的時候也可作到舉一反三。固然在開發中沒有太多的時間讓你去研究原理，開發中要以實現功能爲前提，可等項目上線的後，你有大把的時間或者空餘的時間，你大可去刨根問底，深刻的去研究一項技術，爲以爲這對一名程序員的成長是很重要的事情。

參考文章：

　　　　http://www.w3school.com.cn/ajax/index.asp