跨域請求之jQuery的ajax jsonp的使用解惑

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

直接執行了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>

(處理常式部分) 複製代碼代碼如下:<%@ 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;
}
}
}

(請求抓包)

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對同步或非同步請求沒有影響。好了，如有解釋不對或不完整的地方，希望大家見諒，歡迎留言、扔板磚！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More