快捷導(dǎo)航

在jquery中的ajax方法怎樣通過JSONP進(jìn)行遠(yuǎn)程調(diào)用

更新時(shí)間：2014年04月04日 11:39:31 作者：

這一節(jié)主要演示下在JQUERY中的ajax方法怎樣通過JSONP進(jìn)行遠(yuǎn)程調(diào)用,需要的朋友可以參考下

關(guān)于JSONP的概念和為什么要使用JSONP網(wǎng)上已經(jīng)有很多教程，這一節(jié)主要演示下在JQUERY中的ajax方法怎樣通過JSONP進(jìn)行遠(yuǎn)程調(diào)用

首先介紹下$.ajax的參數(shù)
type：請(qǐng)求方式 GET/POST
url:請(qǐng)求地址
async:布爾類型，默認(rèn)為true 表示請(qǐng)求是否為異步，如果為false表示為同步。
dataType：返回的數(shù)據(jù)類型
jsonp：傳遞給請(qǐng)求處理程序或頁面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)
jsonpCallback：自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫"?"，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù)
success：調(diào)用成功執(zhí)行的函數(shù)
error：異常處理函數(shù)

1.示例1
服務(wù)器端我們采用MVC的ACTION來返回?cái)?shù)據(jù)

復(fù)制代碼代碼如下:

 
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來傳輸數(shù)據(jù)

復(fù)制代碼代碼如下:

 
@{ 
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();"/> 

點(diǎn)擊提交按鈕后，發(fā)現(xiàn)服務(wù)器端的Request.QueryString["callback"]返回一個(gè)隨機(jī)函數(shù)名。這樣就被設(shè)置成JSONP格式來傳遞數(shù)據(jù)了

2.自定義函數(shù)名
可以在傳遞過程中自定義函數(shù)名，只要使用jsonpCallback參數(shù)就可以了。
jsonp:表示傳遞的參數(shù)，默認(rèn)為callback，我們也可以自定義，服務(wù)器段通過此參數(shù)，獲取自定義的函數(shù)名稱，服務(wù)器這樣獲取 Request.QueryString["callback"]
jsonpCallback表示傳遞的參數(shù)值，也就是回調(diào)的函數(shù)名稱，這是自定義的名稱。

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
functionSendData() { 
$.ajax({ 
type: "get", 
async: false, 
url: "/home/ReturnJson", 
dataType: "jsonp", 
jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback) 
jsonpCallback: "receive",//自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫"?"，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù) 
success: function(data) { 
alert(data.name); 
}, 
error: function() { 
alert('fail'); 
} 
}); 
} 

functionreceive(data) { 
alert(data.age); 
} 
</script> 