Jsonp
首先来了解一下JSON，JSON 是一种轻量级的数据交换格式，简单的说，JSON 可以将 JS 对象中表示的一组数据转换为字符串，然后就可以在网或者程序之间轻松的传递这个字符串，并在需要的时候将它还原为各个编程语言所支持的数据格式。
那么 Jsonp 就是 json 的一种应用方式。众所周知，Ajax 请求普通文件存在跨域无权限访问的问题，但是在 web 页面上加载 script 标签请求 src 里面的内容时，是拥有跨域的能力的，于此同时还有 img 标签，iframe 标签。
举个栗子：
<head>
<title></title>
<script type="text/javascript"> */
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
jsonp在 jQuery里面的使用
<head>
<title>跨域测试</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
function showData (data) { //自定义的callback函数
console.info("调用showData");
}
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: "http://localhost:9090/student",
type: "GET",
dataType: "jsonp", //指定服务器返回的数据类型
//jsonp: "theFunction", //指定参数名称
jsonpCallback: "showData", //指定自定义callback
success: function (data) { //success是$.ajax自动创建的回调函数
console.info("调用success");
var result = JSON.stringify(data);
$("#text").val(result);
}
});
});
});
</script>
</head>
网友评论