【知识梳理】3.8通信类
1.同源策略及限制
源:协议（http://）、域名（www.example.com）、端口（80）
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
目的：这是一个用于隔离潜在恶意文件的关键的安全机制。
限制范围:
- Cookie、LocalStorage 和 IndexDB 无法读取；
- DOM 无法获得；
- AJAX 请求不能发送。
参考文档：浏览器同源政策及其规避方法
可以跨域的三个标签：
- <img src="xxx.png">
- <link href="xxx">
- <script src="xxx">
三个标签的场景
- <img>，用于打点统计，统计网站可能是其他域；
- <link><script>，可以使用CDN，CDN的也是其他域；
- <script>，可以用于jsonp
2.前后端通信
- Ajax（仅支持同源通信）
- WebSocket（支持同源、跨域）
- CORS（支持同源、跨域）
3.手动编写一个ajax
- 处理IE兼容性问题，
var xhr = XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');readyState
- 0，（未初始化）还没有调用send()方法；
- 1，（载入）已经调用send()方法，正在发送请求；
- 2，（载入完成）send()方法执行完成，已经接收到全部相应内容；
- 3，（交互）正在解析响应内容；
- 4，（完成）响应内容解析完成，可以再客户端调用了。
status
- 2**，表示成功处理请求，如200；
- 3**，需要重定向，浏览器直接跳转；
- 4**，客户端请求错误，如404；
- 5**，服务器端错误。
var xhr = new XMLHttpRequest();
xhr.open("GET","/api",false);
xhr.onreadystatechange = function(){
//这里的函数异步执行
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText);
}
}
}
xhr.send(null);4.创建Ajax
- XMLHTTPRequest对象的工作流程
- 兼容性处理
- 事件的触发条件
- 事件的触发顺序
参考文档：聊聊Ajax那些事
util.json = function (options) {
var opt = {
url: '',
type: 'get',
data: {},
success: function () {},
error: function () {},
};
util.extend(opt, options);
if (opt.url) {
var xhr = XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP');//1.声明对象，处理IE兼容性
var data = opt.data,
url = opt.url,
type = opt.type.toUpperCase(),
dataArr = [];
for (var k in data) {
dataArr.push(k + '=' + data[k]);
}
if (type === 'GET') {
url = url + '?' + dataArr.join('&');
xhr.open(type, url.replace(/\?$/g, ''), true);//2.open，确定XMLHttpRequest对象的发送方式（用的那个协议：GET/POST等）
xhr.send();//3.发送请求
}
if (type === 'POST') {
xhr.open(type, url, true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(dataArr.join('&'));
}
xhr.onload = function () {//4.响应
if (xhr.status === 200 || xhr.status === 304 ||xhr.status === 206) {//206适用于接收部分媒体资源，304利用本地缓存
var res;
if (opt.success && opt.success instanceof Function) {
res = xhr.responseText;
if (typeof res ==== 'string') {
res = JSON.parse(res);//转成JSON
opt.success.call(xhr, res);
}
}
} else {
if (opt.error && opt.error instanceof Function) {
opt.error.call(xhr, res);
}
}
};
}
};5.JSONP实现原理
<script>
//此处定义回调函数
window.callback = function(data){
//这是我们跨域得到的信息
console.log(data);
}
</script>
<script src="http://www.baidu.com/api.js"></script>
<!-- 以上将返回 callback({x:100,y:200})，此处执行回调函数 -->6.跨域通信的几种方式
- 1.JSONP
原理：通过script标签的异步加载实现的；
//JSONP
//1.浏览器发送请求,告诉服务端callback的名称
<script src="http://www.abc.com/?data=name&callback=jsonp" charset="utf-8"></script>
//2.服务器响应下发script内容，callback的名称作为函数名返回
<script>
jsonp({
data:{
}
})
</script>
//代码实现
/**
* [function 在页面中注入js脚本]
*/
util.createScript = function (url, charset) {
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
charset && script.setAttribute('charset', charset);
script.setAttribute('src', url);
script.async = true;
return script;
};
//本地需要有以callback的名称创建函数
util.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);
};- 2.Hash
url地址中#后边的叫Hash,Hash变动页面不会刷新（Hash做跨域通信的基本原理）；
url地址中?后边的叫search,search变动页面会刷新页面，所以search不能做跨域通信。
// hash
// 场景：当前页面 A 通过iframe或frame嵌入了跨域的页面 B，要给跨域的 B 发送消息
// 在A中伪代码如下：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';//通过JSON.stringify()转成字符串'data'
// 在B中的伪代码如下
window.onhashchange = function () {
var data = window.location.hash;
};- 3.postMessage
H5中新增加的实现跨域通信的方式
// postMessage
// 场景：窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
Bwindow.postMessage('data', 'http://B.com');
// 在窗口B中监听
Awindow.addEventListener('message', function (event) {
console.log(event.origin);//http://A.com
console.log(event.source);//Awindow
console.log(event.data);//data
}, false);- 4.WebSocket
// Websocket
var ws = new WebSocket('wss://echo.websocket.org');//ws非加密，wss加密
//发送消息onopen
ws.onopen = function (evt) {
console.log('Connection open ...');
ws.send('Hello WebSockets!');
};
//接收消息onmessage
ws.onmessage = function (evt) {
console.log('Received Message: ', evt.data);
ws.close();
};
//关闭连接
ws.onclose = function (evt) {
console.log('Connection closed.');
};参考文档：WebSocket 教程
- 5.CORS
新的通信标准（通过新的API:fetch()实现CORS通信）。可以理解为：支持跨域通信的Ajax。当你在浏览器中发送一个ajax跨域请求时，浏览器会在http头中加入一个origin。如果只是一个普通的ajax，跨域时就会被浏览器拦截。
// CORS
// url（必选），options（可选）
fetch('/some/url/', {
method: 'get',
}).then(function (response) {
//then 回调
}).catch(function (err) {
// catch捕获错误；出错了，等价于 then 的第二个参数，但这样更好用更直观
});参考文档：跨域资源共享 CORS 详解
- 6.服务器端设置 http header
//注意：不同后端语言的写法可能不一样
//第二个参数填写允许跨域的域名城，不建议直接写"*"
response.setHeader("Access-Control-Allow-Origin","http://a.com,http://b.com");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.addHeader("Access-Control-Allow-Methods","GET,POST,PUT,DELETE,OPTIONS");
//接受跨域的cookie
response.setHeader("Access-Control-Allow-Credentials", "true"); 相关推荐
kentrl 2020-11-10
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07
李永毅 2020-07-05
坚持着执着 2020-07-05