Ajax學習筆記

標籤：響應   line   erro   .ajax   ros   var   asc   空格   logs   

Ajax(Asynchronous Javascript And XML) 非同步訪問伺服器的網頁技術，無需重新整理網頁，即可擷取服務端資訊，對用戶端資訊經行判斷和識別；AJax只是串連伺服器與用戶端的一個介面，將用戶端的資訊傳遞到伺服器，通過伺服器端的檔案對Ajax提供的資訊執行相關的操作，資訊的來源是從頁面上通過js擷取

ajax主要是通過XMLHttpRequest對象實現非同步作業的

1.建立XMLHttpRequest對象

var request；

if(window.XMLHttpRequest){

request = new XMLHttpRequest();

}else{

request = new ActiveObject("Microsoft.XMLHttp");

}

因為IE7以下並不支援XMLHttpRequest對象，所以使用這種方法建立，一般可以忽略，直接使用var request = new XMLHttpRequest();建立

 

2.http請求

http協議是無狀態的協議瀏覽器和伺服器之間的請求分為如下幾步：（1）建立TCP串連    （2）Web瀏覽器向Web伺服器發送給請求命令（3）Web瀏覽器發送要求標頭資訊（4）Web伺服器應答

（5）Web伺服器發送回應標頭資訊（6）Web伺服器發送資料（7）Web伺服器關閉TCP串連

 

3.發送請求

request.open(method,url,async)

method 請求方式 post get

url  請求地址

async 預設為true即非同步，false為同步

request.send(String)

String 可不填，為發送需要發送的資料

 

4.響應

responseText  字串形式的響應資料

responseXML：XML形式的響應資料status和statusText（） ： 以數字或文本的形式返回HTTP狀態代碼

getAllRequestHeader():擷取所有的回應標頭資訊

getResponseHeader() :擷取特定欄位的回應標頭資訊

5.readyState屬性

0：請求未初始化，open未調用

1：伺服器串連已經建立

2：請求已經接收

3：請求處理中

4：請求已經完成

request.onreadystatechange =function(){

//監聽事件 是否返響應

} 6.具體代碼原生js實現 

<script>    var request = new XMLHttpRequest();    request.open("GET","");//空格為提交到的幕後處理檔案，如php 驚悚片等    //request.setRequestHeader("","");//當open的method是post方式時，需要調用此方法，設定相應的參數    request.send();//發送    request.onreadystatechange =function(){//監聽事件 是否返響應        if(request.readyState===4){            if(request.status==200){                var data = JSON.parse(request.responseText);                if(data.success){                    //操作成功執行的操作                }else{                    alert("參數錯誤");                }            }        }    }    </script>

jquery實現

<script>    $(document).ready(function(){        $("#search").click(function(){            $.ajax({                type:"post",                url:"",//伺服器位址的後台檔案地址                dataType:"json",                data:"",                success:function(data){                },                error:function(jqXHR){                    alert(jqXHR.status);                }            })        })    })</script>

 

Ajax學習筆記