Ajax的原理和實現步驟

Ajax的簡介

什麼是Ajax

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。

AJAX 不是新的編程語言，而是一種使用現有標準的新方法。

AJAX 能夠在不從新加載整個網頁的狀況下，與服務器交換數據，而且更新部分網頁
。

Ajax所包含的技術

AJAX 的核心是 XMLHttpRequest 對象。

1.使用CSS和XHTML來表示。

2.使用DOM模型來交互和動態顯示。

3.使用XMLHttpRequest來和服務器進行異步通訊。

4.使用javascript來綁定和調用。

Ajax的工做原理

在用戶和服務器之間添加了一箇中間層（AJAX引擎），使用戶操做與服務器響應異步話，並非全部的用戶請求都提交給服務器。
數據驗證和數據處理等都交給Ajax引擎本身來作，只有肯定須要從服務器讀取新數據時再由Ajax引擎代爲向服務器提交請求

來看看兩個方式的區別

XMLHttpRequ對象經常使用的三個屬性

onreadystatechange屬性
存有服務器響應的參數

readyState屬性
存有服務器響應狀態的信息

readyState 屬性可能的值：

responseText 屬性

能夠取得有服務器返回的數據

其餘的屬性以下

xmlhttprequst的方法

open()方法

xmlHttp.open("GET","test.php",true);
第一個參數定義發送請求所使用的方法
第二個參數規定服務器腳本的URL
第三個參數規定了請求是否須要異步的處理

send()方法

send() 方法將請求送往服務器。若是咱們假設 HTML 文件和 PHP 文件位於相同的目錄，那麼代碼是這樣的：

xmlHttp.send(null);

其餘方法以下

AJAX編程步驟

1.建立XMLHttpRequest對象
2.設置請求方式
3.調用回調函數
4.發送請求
5.處理返回的結果

建立XMLHttpRequest對象

var xmlhttp=new XMLHttpRequest();

通常來講手寫AJAX的時候，首先須要判斷該瀏覽器是否支持XMLHttpRequest對象，若是支持則建立該對象，若是不支持則建立ActiveX對象。

//第一步：建立XMLHttpRequest對象
    var xmlHttp;
    if (window.XMLHttpRequest) { //非IE
    xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) { //IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
    }

設置請求方式

通常是有兩種請求方式，一個是GET一個是POST，須要設置具體使用哪一個請求方式

xmlhttp.open('method',URL,async);

參數以下

調用回調函數

當前爲異步請求的時候，須要寫一個回調函數，XMLHttpRequest對象有一個屬性，這個屬性要返回一個匿名的方法，所謂的回調函數，就是請求在後臺處理完，再返回到前臺所實現的功能。

xmlhttp.onreadystatechange = function (ev2) {
                    /*
                    0: 請求未初始化
                    1: 服務器鏈接已創建
                    2: 請求已接收
                    3: 請求處理中
                    4: 請求已完成，且響應已就緒
                    */
                    if(xmlhttp.readyState === 4){
                        // 判斷是否請求成功
                        if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                           xmlhttp.status === 304){
                            // 5.處理返回的結果
                            console.log("接收到服務器返回的數據");
                        }else{
                            console.log("沒有接收到服務器返回的數據");
                        }

                    }
                }

發送請求

xmlhttp.send

##處理返回的結果