前端通信Ajax

最新推荐文章于 2024-05-19 22:19:27 发布

Wzh小吴

最新推荐文章于 2024-05-19 22:19:27 发布

阅读量180

点赞数 2

文章标签： json javascript ajax

本文链接：https://blog.csdn.net/m0_49569569/article/details/125313433

版权

同源策略

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键安全机制。

什么是源：协议、域名与端口。这三者任何一个不一样的话，就算是跨域

什么是限制：不是一个源的文档，没有权限去操作另一个源的文档

Cookie、LocalStorage 和 IndexDB无法读取。
Dom无法获得
Ajax请求不能发送
复制代码

前后端通信方式

Ajax 支持同源通信
WebSocket 不受同源策略影响
CORS 既支持同源通信也支持跨域通信

如何创建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');
         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);
             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 () {
             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);
                 }
             }
         };
     }
 };

复制代码

跨域通信的几种方式

JSONP(只支持GET请求)

通过 script 标签的异步加载来实现的。利用script标签不受同源策略的限制，天然可以跨域的特性。

<script>
var script = document.createElement('script');
script.type = 'text/javascript';

script.src = 'https://api.asilu.com/geo/&callback=jsonp';//这个是获取当前经纬度的接口
document.head.appendChild(script);//创建并添加script标签到<head>下

// 回调执行函数
function jsonp(res) {
    console.log(res);//打印jsonp返回的信息
}
</script>
复制代码

Hash

url的#后面的内容就叫Hash。Hash的改变，页面不会刷新。

// 在A中伪代码如下：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';

// 在B中的伪代码如下
window.onhashchange = function () {
  var data = window.location.hash;
};
复制代码

postMessage

H5中新增的postMessage()方法，可以用来做跨域通信

// 在A窗口中操作如下：向B窗口发送数据
    Bwindow.postMessage('data', 'http://B.com'); //这里强调的是B窗口里的window对象

// 在窗口B中监听 message 事件
    Awindow.addEventListener('message', function (event) {   //这里强调的是A窗口里的window对象
        console.log(event.origin);  //获取 ：A窗口url
        console.log(event.source);  //获取：A window对象
        console.log(event.data);    //获取传过来的数据
    }, false);
复制代码

WebSocket

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现

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.');
};
复制代码

CORS(现代浏览器普遍跨域解决方案)

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信

Wzh小吴

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端通信Ajax

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键安全机制。什么是源：协议、域名与端口。这三者任何一个不一样的话，就算是跨域什么是限制：不是一个源的文档，没有权限去操作另一个源的文档...
复制链接

扫一扫