jquery使用jsonp進行跨域調用

jopen 10年前發布 | 153K 次閱讀 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()  
       {  
           return View();  
       }  

       public ActionResult ReturnJson()  
       {  
           string callback = Request.QueryString["callback"];  
           string json = "{'name':'張三','age':'20'}";  
           string result = string.Format("{0}({1})", callback, json);  
           return Content(result);  
       }  

   }  </pre> <div class="dp-highlighter bg_csharp">


            客戶端使用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">  
     function SendData()  
     {  
         $.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">  
    function SendData() {  
        $.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');  
            }  
        });  
    }  

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