這一節主要演示下在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>