萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> JQUERY中的ajax方法怎樣通過JSONP進行遠程調用

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> 
copyright © 萬盛學電腦網 all rights reserved