JSONP的原理

290 阅读1分钟
原理:
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 1.动态创建script标签,设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 2.把script标签加入head,此时调用开始
document.getElementsByTagName('head')[0].appendChild(script); 
我们看到调用的url中传递了一个code参数,告诉服务器我要查的是CA1998次航班的信息,而callback参数则告诉服务器,我的本地回调函数叫做flightHandler,所以请把查询结果传入这个函数中进行调用。 
OK,服务器很聪明,这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html
(服务端的实现这里就不演示了,与你选用的语言无关,说到底就是拼接字符串):
flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
})
3.其实就是你的src请求的无论是不是js路径,返回的资源永远是一个js脚本,然后你会去用之前动态创建的script标签去加载这个资源,这个资源里面调用了你之前定义好的方法