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+")");
}