同源策略、跨域通信

栏目: JavaScript · 发布时间: 5年前

http/https
  1. CookielocalStorageindexDB 等无法读取。
  2. 无法获取操作 DOM
  3. AJAX 请求不能发送。

3、前后端通信

Ajax
WebScoket
CORS

4、如何创建Ajax

XMLHttpRequest
关键代码:
// 1. 第一步,申明xhr对象,考虑ie的兼容性。
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveObject('Microsoft.XMLHTTP');
// 2. 确定请求的方式,get/post等, get参数拼接在url中。
xhr.open(method, url, true)
// 3. 发送数据
3. xhr.send() /  xhr.send(data)
// 判断http的状态
4. xhr.onload = function() {
    // 判断xhr.status
    if(xhr.status === 200 || xhr.status === 304 || xhr.status === 206) {
        // 304,服务器判断本地有缓存
        // 206,请求媒体资源可能返回资源的一部分
    } else {}
}
复制代码

5、跨域通信的几种方式

  1. JSONP
// 原理:利用script标签的异步加载来实现。就像在head头中加载script标签一样。
// jsonp,和后台约定的回调函数名
var jsonp = function() {
  // 创建script标签
  var script = document.createElement('script');
  // 给script添加属性,如src,在src中约定callback函数。
  script.src = 'http:/www.test.com/?name=zhangsan&callback=jsonp'
  // script加载完的回调
  script.onload = function() {}
  // script加载失败的回调
  script.onerror = function() {}
  // 将script添加到head标签中
  document.getElementsByTagName('head')[0].appendChild(script);
}
复制代码
  1. Hash
// 原理:Hash改变页面不会刷新,search的改变会刷新页面
// 在A中,代码如下
var objB = document.getElementsByTagName('iframe')[0];
objB.src = objB.src + '#' + 'data';
// 在B中,监听hash的变化
window.onhashchange = function() {
  var data = window.location.hash  // 拿到是#后面所有的内容
};
复制代码
  1. postMessage
// 如A源向B源发送数据data
// A, 参数含义:发送的数据,接受方的源或者"*"
window.postMessage('data', 'http/B.com'); 
// B: 监听message,判断消息来源,接受数据
window.addEventListerr('message', function(event) {
    console.log(event);
    // event.origin // 消息来源,'http/A.com'
    // event.source // A的引用window
    // event.data  // 接受的数据
}, false)
复制代码
  1. WebSocket
// 1. 申明
var ws = new WebSocket('wss://....'); // wss/ws => 加密/不加密
// 2. 建立链接
ws.onopen = function(e) {
  console.log('开始连接...');
  ws.send('hello WebSocket!');
}
// 3. 接受消息
ws.onmessage = function(e) {
  console.log('接收数据:'+ e.data);
  ws.close() // 关闭连接
}
// 4. 关闭连接的回调,确定以关闭连接
ws.onclose= function(e) {
  console.log('连接关闭');
}
复制代码
  1. CORS
// 可以简单的理解为支持跨域通信的Ajax
// 原理:浏览器会拦截ajax请求,如果发现是跨域请求,则会在请求头中加一个origin
// 需要用到es6的fetch API
fetch('/api/uri', {
  // 在这里配置跨域参数
  method: 'get',
  params: {}
}).then(res => {
  // 成功的回调
}).catch(error => {
  // 失败的回调
})
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Elements of Programming

Elements of Programming

Alexander A. Stepanov、Paul McJones / Addison-Wesley Professional / 2009-6-19 / USD 39.99

Elements of Programming provides a different understanding of programming than is presented elsewhere. Its major premise is that practical programming, like other areas of science and engineering, mus......一起来看看 《Elements of Programming》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具