javascript - JQuery-JSONP-Prinzip: JS-Tag-dynamisch generiertes Positionsproblem

Question

Das Prinzip von

jquery jsonp besteht darin, script标签中src属性来解决前后端数据请求遇到的跨域问题.有一点不明白的是jquery把动态生成的script标签追加到了head标签中，也就是文档的头部；一般我们的回调函数在body zu verwenden. Die Funktion wird zuerst deklariert und dann verwendet. Warum können die aus dem Hintergrund übergebenen Daten direkt ohne Deklaration abgerufen werden?

Hier ist ein Test, den ich gemacht habe:

//同源策略下有两个文件: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)

Wenn diese Codezeichenfolge über der deklarierten test函数下面就会打印出数字10，如果放在test Funktion platziert wird, wird ein Fehler gemeldet

ReferenceError: test is not defined

Im Vergleich zur Implementierung von jquery verstehe ich nicht ganz, warum dynamisch generierte js ausgeführt werden, selbst wenn sie vor der deklarierten Funktion aufgerufen werden?

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的语句的位置。至于放的位置只是一个形式罢了。