跨域請求之jQuery的ajax jsonp的使用解惑
- 高洛峰原創
- 2017-01-12 09:45:32873瀏覽
直接執行了error方法提示錯誤－ajax jsonp之前並沒有用過，對其的理解為跟普通的ajax請求差不多，沒有深入了解；出現了這種錯誤，幾經調試(檢查後台的程式碼和js部分的屬性設定)還是不行，讓我感覺很是意外和不解。於是，決定仔細研究下ajax jsonp的使用，並將最後測試成功的學習經驗和大家分享下!
首先，貼出可以成功執行的程式碼：
(頁部分)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type : "get",
async:false,
url : "ajax.ashx",
dataType : "jsonp",
jsonp: "callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
success : function(json){
alert(json);
alert(json[0].name);
},
error:function(){
alert('fail');
}
});
var a="firstName Brett";
alert(a);
});
</script>
</head>
<body>
</body>
</html>(處理程序部分)
reeeajax請求參數說明：
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傳入此方法(作為參數值)，其底層的實現，大概的猜想應該是：
<%@ WebHandler Language="C#" Class="ajax" %>
using System;
using System.Web;
public class ajax : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string callbackFunName = context.Request["callbackparam"];
context.Response.Write(callbackFunName + "([ { name:\"John\"} ] )");
}
public bool IsReusable {
get {
return false;
}
}
}更多跨域請求之jQuery的ajax jsonp的使用解惑相關文章請關注PHP中文網！