1. jsonp工作原理，参考jsonp.js
// 创建ajax【参考网址】https://segmentfault.com/a/1190000006669043
jsonp.js
jsonp = function (url, onsuccess, onerror, charset) {
var callbackName = util.getName('tt_player');
window[callbackName] = function () {
if (onsuccess && util.isFunction(onsuccess)) {
onsuccess(arguments[0]);
}
};
var script = util.createScript(url + '&callback=' + callbackName, charset);
script.onload = script.onreadystatechange = function () {
if (!script.readyState || /loaded|complete/.test(script.readyState)) {
script.onload = script.onreadystatechange = null;
// 移除该script的 DOM 对象
if (script.parentNode) {
script.parentNode.removeChild(script);
}
// 删除函数或变量
window[callbackName] = null;
}
};
script.onerror = function () {
if (onerror && util.isFunction(onerror)) {
onerror();
}
};
document.getElementsByTagName('head')[0].appendChild(script);
};
加载script标签的方式，将前端代码中的 ajax 请求去掉，添加了一个script标签，标签的 src 指向了另一个域http://www.abc.com
//告诉服务端结果以jsonp的函数名返回
<script src="http://www.abc.com/?data=name&callback=jsonp" charset="utf-8"></script>
//浏览器下发内容：
<script type="text/javascript">
//本地要注册一个jsonp全局函数将返回的data执行出来
jsonp({
data: {
},
});
</script>
jQuery 提供了方便使用 JSONP 的方式，虽然类似 ajax 的请求，但是本质是不一样的，且只能使用 get 请求，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type : "get",
async: false,
url : "http://local.sns.jutouit.com/test.php?id=1",
dataType: "jsonp",
jsonp:"callback", //请求php的参数名
jsonpCallback: "jsonhandle",//要执行的回调函数(参数值)
success : function(data) {
alert("age：" + data.age + " name：" + data.name + " sex："+data.sex);
}
});
});
</script>
</body>
</html>
2.利用hash通信
场景是当前页面 A 通过iframe或frame嵌入了跨域的页面 B
// 在A中伪代码如下：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
// 在B中的伪代码如下
window.onhashchange = function () {
var data = window.location.hash;
};
3. postMessage
// 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
B：window.postMessage('data', 'http://B.com');
// 在窗口B中监听message事件
A：window.addEventListener('message', function (event) {
console.log(event.origin);//http://A.com
console.log(event.source);//Awndow
console.log(event.data);//data
}, false);
4.Websocket
【参考资料】http://www.ruanyifeng.com/blog/2017/05/websocket.html
var ws = new WebSocket('wss://echo.websocket.org');
//建立连接
ws.onopen = function (evt) {
console.log('Connection open ...');
//发送消息
ws.send('Hello WebSockets!');
};
//接受服务器消息
ws.onmessage = function (evt) {
console.log('Received Message: ', evt.data);
//关闭连接
ws.close();
};
//关闭连接时的返回
ws.onclose = function (evt) {
console.log('Connection closed.');
};
5. CORS
【参考资料】http://www.ruanyifeng.com/blog/2016/04/cors.html
CORS是一个W3C标准，全称是“跨域资源共享”（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
// url（必选），options（可选）
fetch(’/some/url/’, {
method: ‘get’,
}).then(function (response) {
}).catch(function (err) {
// 出错了，等价于 then 的第二个参数，但这样更好用更直观
});