javascript - jquery jsonp原理：js标签动态生成位置问题

Question

jquery jsonp的原理就是借助script标签中src属性来解决前后端数据请求遇到的跨域问题.有一点不明白的是jquery把动态生成的script标签追加到了head标签中，也就是文档的头部；一般我们的回调函数在body中，函数先声明后使用，没有声明就直接调用为什么也能获取到后台传过来的数据呢？

下面是我做的一个测试：

//同源策略下有两个文件:a.html和b.js.
//a.html中的内容为:


//<script type="text/javascript" src="b.js"></script>

function test(val){
    console.log(val)
}

//<script type="text/javascript" src="b.js"></script>


//b.js的内容为：
test(10)

这串代码放在已经声明的test函数下面就会打印出数字10，如果放在test函数上面就报错了

ReferenceError: test is not defined

对比jquery的实现方式我不是太理解为什么动态生成的js放在已经声明的函数之前调用也会执行？

Answer 1

//同源策略下有两个文件:a.html和b.js.
//a.html中的内容为:


//<script type="text/javascript" src="b.js"></script>

function test(val){
    console.log(val)
}

//<script type="text/javascript" src="b.js"></script>


//b.js的内容为：
test(10)

如果是直接链入的src的话，浏览器解析是从上往下解析的，就会先取回b.js里面的值，a.js的函数还未加载进入页面，此时是没有test()这个函数的，所以会报错

但是发ajax请求是等页面完成后再去请求的，即等是先声明好了一个回调函数再去 创建一个script去请求，所以此时的script放的位置在哪里并不会影响最后的结果。

Answer 2

因为你忽略了异步的问题，从执行顺序来说，当从服务器发回的script标签加载完成之后，你本地的callback函数肯定是已经定义完成的，因此能够的调到相应的方法。
简单来说就是：
jsonp=定义本地回调函数=>加载script标签=>运行所加载script标签内容。

Answer 3

jsonp 说白了就是个约定:
'我们俩隔太远了, 够不着, 你东西要怎么给我?'
'要不我往你那扔吧, 你能接住么?'
'可以, 我有个篮子(callback), 在你1点钟方向(callbackName), 你往那扔'
至于篮子存不存在, 位置摆的对不对, 并不影响你们的约定

Answer 4

jsonp引入的js加载位置是在执行jsonp获取js的语句的位置。至于放的位置只是一个形式罢了。