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

}