同源与跨域
1.同源
协议、域名、端口号都一样(默认端口号为80)
2.跨域
协议、域名、端口号中存在一项或多项不一样
同源策略:浏览器的安全机制,网站A、网站B之间不同源,不允许进行资源交换
拦截时间:资源返回时被浏览器拦截
跨域数据请求:JSONP和CORS
JSONP:不是W3C标准,但兼容性好(兼容低版本IE),只支持GET请求,不支持POST请求
CROS:W3C标准,兼容性不好,不兼容低版本浏览器,支持GET请求和POST请求
JSONP原理:利用<script>
标签不受同源策略的影响,通过src属性,来请求分同源的js脚本,请求跨域的数据接口,通过函数调用的形势来接受跨域接口调用回来的数据
实现一个简单JSONP跨域数据请求:
<body>
//函数定义
<script>
function abc(data) {
console.log('拿到了Data数据:')
console.log(data)
}
</script>
//函数调用
//?callback=abc通过查询字符串的形势来调用abc函数
<script src="./js/getdata.js?callback=abc"></script>
</body>
./js/getdata.js文件中代码
abc({name:'王';age:24;})
<body>
<script>
function abc(data) {
console.log('JSONP响应回来的数据是:')
console.log(data)
}
</script>
//?callback=abc通过查询字符串的形势来调用abc函数
//&name=ls&age=30参数
<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=abc&name=ls&age=30"></script>
</body>
待更新…
jQuery中JSONP的实现过程
jQuery中的JSONP,也是通过<script>
标签的src属性来实现跨域数据访问的,只不过是通过动态创建和移除<script>
标签的方式来发起JSONP数据请求。
在发起JSONP请求的时候,当态向<header>
中append<script>
标签
在JSONP请求成功后,动态从<header>
中移除刚才append进去的<script>
标签
例子:
<body>
<button id="btnJSONP">发起JSONP数据请求</button>
<script>
$(function () {
$('#btnJSONP').on('click', function () {
// 发起JSONP的请求
$.ajax({
url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?address=北京&location=顺义',
// 代表我们要发起JSONP的数据请求,必须要
dataType: 'jsonp',
//自定义参数名称
jsonp: 'callback',
//自定义回调函数名称
jsonpCallback: 'abc',
success: function (res) {
console.log(res)
}
})
})
})
</script>
</body>