Ajax的技術原理

標籤：ajax

昨天問道ajax是。我回答到不就是jquery架構提供的一個非同步通訊方法麼。當再問原理時我傻逼了。ajax技術其實我只在實習時用到了。感到很方便的東西它不需要每次更新都重新整理頁面。可以非同步請求伺服器。利用回呼函數進行處理常式。

在jquery API文檔中我們可以看到一個簡單的demo

$.ajax({   type: "POST",   url: "some.php",   data: "name=John&location=Boston",   success: function(msg){     alert( "Data Saved: " + msg );   }});

可以看到這個代碼的意思大概是利用post請求some.php這個方法。傳入參數是用 name=John&location=Boston這麼寫的。data參數也能用{foo:["bar1", "bar2"]}這樣的表現形式。但在發送時會自動轉換成前面的樣子。

那麼這樣一個ajax請求用js怎麼做到的呢？

這裡時利用了XMLHttpRequest對象進行實現的。但不同的瀏覽器擷取這個對象和該對象的方法不同。

可以看到這裡有open方法啊、send方法啊。還有個onreadystatechange這個屬性。這個屬性其實就是讓你設定回呼函數的。你可以寫匿名函數也可以寫函數名。如果要向伺服器發參數可以用setRequestHeader方法設定key value。回呼函數中我們也能擷取到狀態代碼、資訊等等。例如success的狀態代碼是200.重新導向是302.失敗是404之類的。利用這些東西我們就能寫一個簡單的實現。

function CreateXmlHttp() {    //非IE瀏覽器建立XmlHttpRequest對象    if (window.XmlHttpRequest) {        xmlhttp = new XmlHttpRequest();    }    //IE瀏覽器建立XmlHttpRequest對象    if (window.ActiveXObject) {        try {            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");        }        catch (e) {            try {                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");            }            catch (ex) { }        }    }}function Ustbwuyi() {    var data = document.getElementById("username").value;    CreateXmlHttp();    if (!xmlhttp) {        alert("建立xmlhttp對象異常！");        return false;    }    xmlhttp.open("POST", url, false);    xmlhttp.onreadystatechange = function () {        if (xmlhttp.readyState == 4) {            document.getElementById("user1").innerHTML = "資料正在載入...";            if (xmlhttp.status == 200) {                document.write(xmlhttp.responseText);            }        }    }    xmlhttp.send();}

這裡引用的是網上的代碼。我們簡單分析一下。首先我們擷取到了XMLHttpRequest對象。這裡判斷了一下是什麼瀏覽器。用了幾個if else。然後我們佈建要求方式、url、傳輸方式。false是同步、true是非同步。然後我們寫了個回呼函數。告訴這個回呼函數。我們只有在互動完成狀態為4時候才做以下代碼。這裡面我們又判斷了一下返回狀態代碼。說只有success時候我們才執行以下代碼。這裡貌似忘記用xmlhttp.setRequestHander("username",data);佈建要求時候的key-value了。

Ajax的技術原理