ajax詳解，以及非同步JSOP的實現

標籤：

    這裡我使用的是jquery的ajax方法   包括三個方法 ： get() , post(),   getJson()

get() 和post()的格式我就使用一下格式，很方便：

    

 1 $.ajax({ 2                     url: ‘地址, 3                     type: ‘get或post‘, 4                     data: { 5                         //這是要傳遞的參數，根據自己需求填寫 6                         studentNum:123, 7                         classId:1, 8                     }, 9                   //success 方法返回的兩個參數，一個是返回的對象，一個是描述狀態的字串，第二個參數一般不用，所以一般就寫成 10                   //success:function(json) 11                     success: function(json, textStatus) {12                         if(json.success) {13                             //操作；14                         } else {15                             alert(json.msg)16                         }17                     },18                     error: function() {  19                        //操作20                     }

error 方法返回的參數有三個   

error: function (jqXHR, textStatus, errorThrown)

第一個參數 jqXHR jqXHR：這裡的jqXHR是一個jqXHR對象，在Jquery1.4和1.4版本之前返回的是XMLHttpRequest對象，1.5版本以後則開始使用jqXHR對象，該對象是一個超集，就是該對象不僅包括XMLHttpRequest對象，還包含其他更多的詳細屬性和資訊。

這裡主要有4個屬性：

• readyState :目前狀態,0-未初始化，1-正在載入，2-已經載入，3-資料進行互動，4-完成。
• status  ：返回的HTTP狀態代碼，比如常見的404,500等錯誤碼。
• statusText ：對應狀態代碼的錯誤資訊，比如404錯誤資訊是not found,500是Internal Server Error。
• responseText ：伺服器響應返回的文本資訊

第二個參數 String textStatus：返回的是字串類型，表示返回的狀態，根據伺服器不同的錯誤可能返回下面這些資訊："timeout"（逾時）, "error"（錯誤）, "abort"(中止), "parsererror"（解析錯誤），還有可能返回空值。

第三個參數 String errorThrown：也是字串類型，表示伺服器拋出返回的錯誤資訊，如果產生的是HTTP錯誤，那麼返回的資訊就是HTTP狀態代碼對應的錯誤資訊，比如404的Not Found,500錯誤的Internal Server Error。

 

接下來就是getJson()；

這就是所謂的跨域請求，也就是JSONP；但是JSONP只能是get（）請求，把get()請求稍微改動就JSONP了，代碼如下：

只變動了兩個地方， dataType 和jsonp 

 1    $.ajax({ 2             type : "GET", //傳遞參數就是在url後面加上?action=getmsg 等等，參數之間用&隔開  最後還要加上callback=? 3             url : "http://active.zol.com.cn/guofeng/profile2.php?action=getmsg&callback=?", 4             dataType : "jsonp", 5            jsonp: ‘callback‘, 6             success : function(json){ 7                 $(‘#msg_box‘).html(json.msg); 8                9             }10         });

 

 

 

另一種就是使用getJson()這個方法。

 $.getJSON("http://active.zol.com.cn/guofeng/profile2.php?callback=?",    function(data) {        $(‘#result‘).val(‘My name is: ‘ + data.nick);    });

記得在url後面加上?callback=? 原理不必知道，這就是規範，知道這樣使用就可以了。

 

最後補充一點，就是ajax的data的一個參數 async

類型：Boolean

預設值: true。預設設定下，所有請求均為非同步請求。如果需要發送同步請求，請將此選項設定為 false。

注意，同步請求將鎖住瀏覽器，使用者其它操作必須等待請求完成才可以執行

一個很使用的例子就是 ： 使用者點擊一個按鈕，調用一次ajax請求，那麼有的使用者會著急的時候會連續點擊從而造成不必要的問題，只要把async設定成false就行了，使用者不管點擊多少次，必須這個請求完成之後才會進行下次請求。

 

  

ajax詳解，以及非同步JSOP的實現