新手學js之——學習ajax

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML）.

在 Javascript 中局部刷新 ajax 是一個亮點的，局部刷新 是不刷新界面的情況下，我們可以不用提交的情況下直接與後臺進行通信，所以這就大大減少後臺數據的訪問，減少時間延遲，特別是後臺數據信息很大的話，時間延遲上會是一個需要極其注意的因素。

好吧，先介紹一下幾點：

1、ajax 是使用 XMLHttpRequest 進行異步通訊的，XmlHttpRequest 使您可以使用JavaScript向服務器提出請求並處理響應，而不阻塞用戶。

所以首先要獲得我們要獲得 XMLHttpRequest 對象，又因爲由於瀏覽器內核的不同獲得 XMLHttpRequest 對象的。

if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

XMLHttpRequest 主要方法有：

xmlHttp.open(“method”,"url"，true);                            //建立連接調用服務器。

xmlHttp.onreadystatechange = ajaxCallBack;        //狀態改變即會觸發事件處理器（readyState）

xmlHttp.readyState                                                 //請求狀態。5個狀態：0—未初始化；1—正在加載；2—已加載；3—交互中；4—完成

xmlHttp.status                                 //服務器的HTTP狀態碼（如：404 = "文件末找到" 、200 ="成功" ，等等）

send(content)                                 //向服務器發送請求

xmlHttp.responsetext                    //服務器的HTTP狀態碼（如：404 = "文件末找到" 、200 ="成功" ，等等）

…………

2、步驟：

（1）創建XMLHttpRequest 對象實例；

（2）設定XMLHttpRequest 對象的回調函數，利用 xmlHttp.onreadystatechange = ajaxCallBack；（其中 ajaxCallBack 方法是回調函數）；

（3）設定請求屬性：用 open方法 設定HTTP 方法（get/post）,訪問的URL，

（4）將請求發動給服務器。利用send（） 方法。

3、實例：

js 代碼：

<script type="text/javascript">
        var xmlhttp;
        function getAjaxHttpRequest(){
            if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
            } else  {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlhttp;
        }

        function ajaxCallback(){
            if(xmlhttp.readyState == 4){
                if(xmlhttp.status == 200){
                    alert("I am coming！");
                }
            }
        }

        function do() {
            var xmlhttp=getAjaxHttpRequest();
            if(null != xmlhttp){
                xmlhttp.open("GET", "http://localhost:8080/test", true);
                xmlhttp.onreadystatechange = ajaxCallback;
                xmlhttp.send(null);
            }
        }
    </script>

這就是我淺顯的見識，在這拋磚引玉，希望大神指教……