如何进行网站性能优化,厦门网站建设培训,淘宝网页制作代码,网站制作和美工一、什么是同源策略及限制
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。源#xff1a;协议、域名和端口#xff0c; 默认端口是80 三者有一个不同#xff0c;即源不同#xff0c;就是跨域
ht…一、什么是同源策略及限制
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。源协议、域名和端口 默认端口是80 三者有一个不同即源不同就是跨域
https://www.baidu.com:80/
https://www.baidu.com:8080
// 不同源限制不是一个源的文档你没有权利去操作另一个源的文档主要限制方面 3-1. Cookie、LocalStorage 和 IndexDB 无法读取 3-2. DOM无法获得 3-3. Ajax 请求不能发送
二、前后端如何通信
Ajax 同源下通信方式WebSocket 支持同源和跨域通信CORS 支持同源和跨域通信
三、如何创建Ajax
XMLHttpRequest 对象的工作流程 1-1 声明对象兼容IE 1-2 根据请求方式的不同设置不同传参方式 1-3 open方法确定发送的方式、地址、是否异步 1-4 send方法发送请求 1-5 监听响应状态变化, 处理返回数据 /*** [json 实现ajax的json]* param {[type]} options [description]* return {[type]} [description]*/util.json function (options) {var opt {url: ,type: get,data: {},success: function () {},error: function () {},};util.extend(opt, options);if (opt.url) {// ①声明对象兼容IEvar xhr XMLHttpRequest? new XMLHttpRequest(): new ActiveXObject(Microsoft.XMLHTTP);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();// ③ open方法确定发送的方式、地址、是否异步xhr.open(type, url.replace(/\?$/g, ), true);// ④ send方法发送请求xhr.send();}if (type POST) {xhr.open(type, url, true);xmlhttp.setRequestHeader(Content-type, application/x-www-form-urlencoded);xhr.send(dataArr.join());}// ⑤ 监听响应状态变化xhr.onload function () {// ⑥ 处理返回数据 200表示成功返回 304表示缓存中读取 如果请求是媒体资源还需要判断206因为媒体资源是分段返回的if (xhr.status 200 || xhr.status 304) {var res;if (opt.success opt.success instanceof Function) {res xhr.responseText;if (typeof res string) {res JSON.parse(res);opt.success.call(xhr, res);}}} else {if (opt.error opt.error instanceof Function) {opt.error.call(xhr, res);}}};}};兼容性处理事件的触发条件事件的触发顺序
四、跨域通信的几种方式
1.JSONP
JSONP 再出来postMessage之前一直使用JSONP进行跨域通信JSONP 原理 利用script标签的异步加载来实现的JSONP 具体的实现逻辑 3-1 向服务端发送请求并告诉服务端callback的名称
script srchttp:www.abc.com/?callbackjsonp/script3-2 服务端返回数据全局注册jsonp函数同时执行本地jsonp函数
script srchttp:www.abc.com/?callbackjsonp/script
scriptjsonp({data: {}})
/script代码实现步骤 4-1 确定回调函数的名称 4-2 根据名称注册全局函数 4-3 动态创建scrpit标签 4-4 监听脚本的加载事件 4-5 监听加载是否成功成功后删除该script标签同时删除全局函数 4-6 往html里面新增script标签发送请求 具体代码实现 /*** [function jsonp]* param {[type]} url [description]* param {[type]} onsucess [description]* param {[type]} onerror [description]* param {[type]} charset [description]* return {[type]} [description]*/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
Hash: url中#号后面的东西为hash, hash的变动页面不会刷新search: url中?号后面的东西叫searchsearch的改变页面会刷新所以search不能做跨域通信使用hash通信 代码实现
// 利用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
postMessage同源策略是限制跨域通信实际业务中又需要跨域通信使用postMessage实现跨域通信H5新出的postMessage代码实现
// postMessage// 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息Awindow.postMessage(data, http://B.com);// 在窗口B中监听Bwindow.addEventListener(message, function (event) {console.log(event.origin); // 确定发送的源, http://A.comconsole.log(event.source); // A window的引用console.log(event.data); // data}, false);4.WebSocket
WebSocket支持跨域通信WebSocket 代码实现
// Websocket【参考资料】http://www.ruanyifeng.com/blog/2017/05/websocket.html// wss 服务器地址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
CORS支持跨域通信的Ajax
// CORS【参考资料】http://www.ruanyifeng.com/blog/2016/04/cors.html// url必选options可选fetch(/some/url/, {method: get,}).then(function (response) {}).catch(function (err) {// 出错了等价于 then 的第二个参数但这样更好用更直观});
