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

}

原文地址:https://www.cnblogs.com/zhoushiya/p/12107680.html