js跨域请求(jsonp)
封装jsonp:
由于ajax不能跨域,所以我们有必要封装一个跨域请求的jsonp方法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<body>
</body>
</html>
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
ajax与jsonp的异同
(1.目的一样 获取数据 2.本质不一样)
1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;
2.但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取
4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。
https://www.jianshu.com/p/7ed76b7fba47
ajax的jsonP
-1.前端请求:
function test() {
$.ajax({
url:'http://localhost:8081/hh',
type:'GET',
dataType:'jsonp',
jsonpCallback:"callbackName",
success:function (data) {
alert(data)
}
})
}
-2.后端接口:
app.get('/hh', function (req, res) {
res.header('Access-Control-Allow-Origin', '*');
var r = {"aa":11}
res.send("callbackName("+JSON.stringify(r)+")");
})