JQUERY中的ajax方法怎樣通過JSONP進行遠程調用

 這一節主要示範下在JQUERY中的ajax方法怎樣通過JSONP進行遠程調用,需要的朋友可以參考下

關於JSONP的概念和為什麼要使用JSONP網上已經有很多教程，這一節主要示範下在JQUERY中的ajax方法怎樣通過JSONP進行遠程調用 

 

首先介紹下$.ajax的參數 

type：請求方式 GET/POST 

url:請求地址 

async:布爾類型，預設為true 表示請求是否為非同步，如果為false表示為同步。 

dataType：返回的資料類型 

jsonp：傳遞給請求處理常式或頁面的，用以獲得jsonp回呼函數名的參數名(一般預設為:callback) 

jsonpCallback：自訂的jsonp回呼函數名稱，預設為jQuery自動產生的隨機函數名，也可以寫"?"，jQuery會自動為你處理資料 

success：調用成功執行的函數 

error：異常處理函數 

 

1.樣本1 

伺服器端我們採用MVC的ACTION來返回資料 

 

 代碼如下:

public class HomeController : Controller 

{ 

// 

// GET: /Home/ 

 

public ActionResult Index() 

{ 

returnView(); 

} 

 

public ActionResult ReturnJson() 

{ 

string callback = Request.QueryString["callback"]; 

string json = "{'name':'張三','age':'20'}"; 

string result = string.Format("{0}({1})", callback, json); 

returnContent(result); 

} 

 

} 

 

用戶端使用jsonp來傳輸資料 

代碼如下:

@{ 

ViewBag.Title = "Index"; 

Layout = "~/Views/Shared/_Layout.cshtml"; 

} 

 

<script src="~/Scripts/jquery-1.7.1.min.js"type="text/javascript"> </script> 

<script type="text/javascript"> 

functionSendData() 

{ 

$.ajax({ 

type: "get", 

async: false, 

url: "/home/ReturnJson", 

dataType: "jsonp", 

success: function(data){ 

alert(data.name); 

}, 

error: function(){ 

alert('fail'); 

} 

}); 

} 

</script> 

 

<input type="button" value="提交" onclick="SendData();"/> 

 

點擊提交按鈕後，探索服務器端的Request.QueryString["callback"]返回一個隨機函數名。這樣就被設定成JSONP格式來傳遞資料了 

 

2.自訂函數名 

可以在傳遞過程中自訂函數名，只要使用jsonpCallback參數就可以了。 

jsonp:表示傳遞的參數，預設為callback，我們也可以自訂，伺服器段通過此參數，擷取自訂的函數名稱，伺服器這樣擷取 Request.QueryString["callback"] 

jsonpCallback表示傳遞的參數值，也就是回調的函數名稱，這是自訂的名稱。 

 代碼如下:

<script type="text/javascript"> 

functionSendData() { 

$.ajax({ 

type: "get", 

async: false, 

url: "/home/ReturnJson", 

dataType: "jsonp", 

jsonp: "callback",//傳遞給請求處理常式或頁面的，用以獲得jsonp回呼函數名的參數名(一般預設為:callback) 

jsonpCallback: "receive",//自訂的jsonp回呼函數名稱，預設為jQuery自動產生的隨機函數名，也可以寫"?"，jQuery會自動為你處理資料 

success: function(data) { 

alert(data.name); 

}, 

error: function() { 

alert('fail'); 

} 

}); 

} 

 

functionreceive(data) { 

alert(data.age); 

} 

</script>