首頁 > web前端 > js教程 > 主體

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

高洛峰
發布: 2017-01-12 09:45:32
原創
855 人瀏覽過

直接執行了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(&#39;fail&#39;); 
} 
}); 
var a="firstName Brett"; 
alert(a); 
}); 
</script> 
</head> 
<body> 
</body> 
</html>
登入後複製

(處理程序部分) 

reee

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傳入此方法(作為參數值),其底層的實現,大概的猜想應該是: 

<%@ 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中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!