同源策略、跨域通信

栏目: 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 => {
  // 失败的回调
})
复制代码

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

查看所有标签

猜你喜欢:

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

图解网络硬件

图解网络硬件

[日] 三轮贤一 / 盛荣 / 人民邮电出版社 / 2014-7 / 69.00元

本书详细介绍了计算机网络硬件的相关知识,在对硬件设备、相关技术及规范进行详尽考据和整理的同时,侧重工程实践,重点讲述了在实际网络建设工程中真实使用的网络硬件设备及其相关背景知识,能够帮助读者深入理解计算机网络在工程实践中某些容易混淆的概念,如L3交换机和路由器等。 本书在讲解的同时,还辅以丰富的图例,使计算机网络设备的真实情况一目了然,同时深入浅出地介绍了原本复杂抽象的计算机网络术语,因此对......一起来看看 《图解网络硬件》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

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

Base64 编码/解码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具