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

问题描述

问 题

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放在已经声明的函数之前调用也会执行？

解决方案

//同源策略下有两个文件: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放的位置在哪里并不会影响最后的结果。

这篇关于javascript - jquery jsonp原理：js标签动态生成位置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！