標籤：w3c js jquery ajax jsonp
前天在項目中寫的一個ajax jsonp的使用，出現了問題：可以成功獲得請求結果，但沒有執行success方法，直接執行了error方法提示錯誤——ajax jsonp之前並沒有用過，對其的理解為跟普通的ajax請求差不多，沒有深入瞭解；出現了這種錯誤，幾經調試(檢查背景代碼和js部分的屬性設定)還是不行，讓我感覺很是意外和不解。於是，決定仔細研究下ajax jsonp的使用，並將最後測試成功的學習經驗和大家分享下!
首先，貼出可以成功執行的代碼：
(頁面部分)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>Untitled Page</title> 5 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 6 <script type="text/javascript"> 7 jQuery(document).ready(function(){ 8 $.ajax({ 9 type : "get",10 async:false,11 url : "ajax.ashx",12 dataType : "jsonp",13 jsonp: "callbackparam",//傳遞給請求處理常式或頁面的，用以獲得jsonp回呼函數名的參數名(預設為:callback)14 jsonpCallback:"success_jsonpCallback",//自訂的jsonp回呼函數名稱，預設為jQuery自動產生的隨機函數名15 success : function(json){16 alert(json);17 alert(json[0].name);18 },19 error:function(){20 alert(‘fail‘);21 }22 });23 var a="firstName Brett";24 alert(a);25 });26 </script>27 </head>28 <body>29 </body>30 </html>
(處理常式部分)
1 <%@ WebHandler Language="C#" Class="ajax" %> 2 3 using System; 4 using System.Web; 5 6 public class ajax : IHttpHandler { 7 8 public void ProcessRequest (HttpContext context) { 9 context.Response.ContentType = "text/plain";10 string callbackFunName = context.Request["callbackparam"];11 context.Response.Write(callbackFunName + "([ { name:\"John\"} ] )");12 }13 14 public bool IsReusable {15 get {16 return false;17 }18 }19 20 }
(請求抓包)
ajax請求參數說明：
dataType String預期伺服器返回的資料類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊來智能判斷，比如XML MIME類型就被識別為XML。在1.4中，JSON就會產生一個JavaScript對象，而script則會執行這個指令碼。隨後伺服器端返回的資料會根據這個值解析後，傳遞給回呼函數。可用值:
"xml": 返回 XML 文檔，可用 jQuery 處理。
"html": 返回純文字 HTML 資訊；包含的script標籤會在插入dom時執行。
"script": 返回純文字 JavaScript 代碼。不會自動緩衝結果。除非設定了"cache"參數。‘‘‘注意：‘‘‘在遠程請求時(不在同一個域下)，所有POST請求都將轉為GET請求。(因為將使用DOM的script標籤來載入)
"json": 返回 JSON 資料 。
"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回呼函數。
"text": 返回純文字字串
jsonp String在一個jsonp請求中重寫回呼函數的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL參數裡的"callback"部分，比如{jsonp:‘onJsonPLoad‘}會導致將"onJsonPLoad=?"傳給伺服器。
jsonpCallback String為jsonp請求指定一個回呼函數名。這個值將用來取代jQuery自動產生的隨機函數名。這主要用來讓jQuery產生度獨特的函數名，這樣管理請求更容易，也能方便地提供回呼函數和錯誤處理。你也可以在想讓瀏覽器緩衝GET請求的時候，指定這個回呼函數名。
ajax jsonp與普通的ajax請求的主要區別在於——請求響應結果的處理。如上面代碼所示的響應結果為：
success_jsonpCallback([ { name:"John"} ] ); ————其實就是，調用jsonp回呼函數success_jsonpCallback,並將要響應的字串或json傳入此方法(作為參數值)，其底層的實現，大概的猜想應該是： function success_jsonpCallback(data) { success(data); } 經測試，ajax jsonp對同步或非同步請求沒有影響。Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
