如何實現(xiàn)ajax以及它的原理。

ajax 全稱 async JavaScript and XML,是一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術(shù)，可以在不重新加載整個網(wǎng)頁的情況下與服務器交換數(shù)據(jù)，并且更新部分網(wǎng)頁。

Ajax的原理：就是通過XmlHttpRequest對象，向服務器發(fā)送異步請求。從服務器獲得數(shù)據(jù)，然后用JavaScript來操作DOM而更新頁面。流程圖如是：

Ajax如何實現(xiàn)

創(chuàng)建XMLHttpRequest對象。

通過XMLHttpRequest（）構(gòu)造函數(shù)，用于初始化一個XMLHttpRequest實例i對象。

與服務器建立連接，通過XMLHttpRequest對象的open（）方法與服務器建立連接給服務端發(fā)送數(shù)據(jù)。

參數(shù)說明如下圖

通過XMLHttpRequest對象的send()方法見客戶端頁面的數(shù)據(jù)發(fā)送給服務端。

body:在XHR請求中要發(fā)送的數(shù)據(jù)體。如果不傳遞數(shù)據(jù)則為null，如果使用GET請求發(fā)送數(shù)據(jù)的時候，需要注意以下兩點：

將請求數(shù)據(jù)添加到open()方法中的url地址中。

發(fā)送請求數(shù)據(jù)中的send()方法中參數(shù)設置為null，綁定onreadystatechange事件。onreadystatechange事件用于監(jiān)聽服務器端的通信狀態(tài)。主要監(jiān)聽的屬性為XMLHttpRequest.readyState.

XMLHttpRequest.readyState屬性有五個狀態(tài)。如下圖所示

只要readyState屬性值一變化，就會出發(fā)一次readystatechange事件，XMLHttpRequest.responseText屬性用于接受服務器端的響應結(jié)果。

通過上面的理解，我們來封裝一個簡單的Ajax請求，如下圖

使用方法如下：