jsonp實現js跨域請求


sonp是跨域通信的一個協議

具體來說jsonp實現跨域請求其實是使用js文件引用(js文件不一定是.js結尾)可跨域的性質,將請求的結果包裹在客戶端需要調用的js方法內部。需要前后端配合使用。

前段代碼:

<script type="text/javascript">

//1.聲明方法

var handler = function (data) {

alert(data.text);

};

//2.后端提供jsonp服務的地址,輸出結果必須為handler(data)形式

// 提供jsonp服務的url地址(不管是什么類型的地址,最終生成的返回值都是一段javascript代碼)

var url = "http://localhost:58073/jsonpServer.aspx?text=CA1998&callback=handler";

// 創建script標簽,設置其屬性,利用script文件引用可跨域的特性

var script = document.createElement('script');

script.setAttribute('src', url);

// 把script標簽加入head,此時調用開始

document.getElementsByTagName('head')[0].appendChild(script);

</script>

jquery使用:

<script>

jQuery(document).ready(function(){

$.ajax({

type: "get",

async: false,

url: "http://localhost:58073/jsonpServer.aspx?text=CA1998",

dataType: "jsonp",

jsonp: "callback",//傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(一般默認為:callback)

jsonpCallback:"?",//自定義的jsonp回調函數名稱,默認為jQuery自動生成的隨機函數名,也可以寫"?",jQuery會自動為你處理數據

success: function (data) {

console.log(data);

alert(data.text);

},

error: function(){

alert('fail');

}

});

});

</script>

后端代碼:

protected void Page_Load(object sender, EventArgs e)

{

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

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

 

var jsonItem = new

{

code = 1,

text = text

};

 

var data = JsonConvert.SerializeObject(jsonItem);

 

Response.Write(callBack+"("+data+")");

}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM