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