跨域解决方案JSONP

什么是跨域

老生常谈的问题了。下面列出一个表格:

URL 说明 是否跨域
http://www.a.com/a.js http://www.a.com/b.js 同一个域名
http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一个域名,不同文件夹
http://www.a.com:8080/a.js http://www.a.com/b.js 同一个域名,不同端口
http://www.a.com/a.js http://79.23.1.21/b.js 域名与域名对应IP
http://www.a.com/a.js http://script.a.com/b.js 主域和子域
http://www.a.com/a.js http://a.com/b.js 一级域名和二级域名
http://www.XXX.com/a.js http://www.a.com/b.js 不同域名
http://localhost/a.js http://127.0.0.1/b.js 本地和本地对应的IP

牢记:只要协议schema ,域名,子域名,端口有一个不同的都是跨域!

而且跨域问题上,域仅仅是通过URL的首部来识别的,而不会去尝试判断两个域是否在同一个IP上(这涉及到DNS解析)

下面介绍几种能实现跨域的方法

图像Ping

JS高程提到的一个方法,利用的是img的src可以跨域。

var img= new Image();
img.onload=img.onerror=function(){
    console.log('Done~!');

};

img.src='http://www.example.com/test?name=Nicolas';

这个方法唯一的能力就是可以知道是否接受到了响应,但是浏览器无法得到任何信息,但是可以请求服务器,比如可以请求服务器做一个删除的操作,或者创建的操作,因为querystring可以通过img.src提交给服务器。

仅仅是 浏览器 –> 服务器

1.只能发送get请求,并且无法获得任何服务器的响应。
2. 仅仅是单向的数据传递,浏览器-->服务器

JSONP

JSON with Padding
JSONP 两部分组成: 回调函数+数据
JSONP中的回调函数
响应到来的时候,应该在页面中调用的函数。
JSON就是数据
数据是传入回调函数中的JSON数据。

JSONP的原理

动态添加一个

客户端解析script标签,并执行返回的js文档,此时js文档数据,作为参数传入到了客户端预先定义好的callback函数里。

可以说jsonp的方式原理上和

你可能感兴趣的:(JavaScript,前端)