web通信类几个相关知识
1、什么是同源策略及限制?
同源策略限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互。
这是一个用于隔离潜在恶意文件的关键安全机制。
所谓同源,就是指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可。
所谓限制,即不是一个源的文档或者脚本不允许操作另一个:
1)、Cookie、LocalStorage和 IndexDB无法读取
2)、DOM 无法获得
3)、AJAX 请求不能发送
2、前后端如何通信?
Ajax WebSocket CORS
3、如何创建 Ajax?
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。
这其中最关键的一步就是从服务器获得请求数据
ajax过程:
1)、创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
2)、创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
3)、设置响应 HTTP 请求状态变化的函数
4)、发送 HTTP 请求
5)、获取异步调用返回的数据
6)、使用 JavaScript和 DOM 实现局部刷新
function load() {
/*1、创建XMLHttpRequest*/
var xhr;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} /* 2、向服务器发送请求(open()和send())
* open(method,url,async):
* 1)、method:请求的类型;GET 或 POST
* 2)、url:文件在服务器上的位置
* 3)、async:true(异步)或 false(同步)
*send(string):
* string:仅用于 POST 请求
*/
xhr.open('get', 'getUser.php?user=xxx&pass=xxxx', true);
xhr.send(); /*3、处理服务器响应
*onreadystatechange 事件
*readyState 状态(0,1,2,3,4)
*status (200,404,...)
*/
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// responseText获取字符串形式的响应数据 responseXML获取XML形式的响应数据
console.log(xhr.responseText);
}
}
4、跨域通信的几种方式?
(1)、jsonp(需要服务端支持)
<button id="btn">点击</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#btn').click(function(){
//向头部输入一个脚本,该脚本发起一个跨域请求
$("head").append("<script src='http://localhost:9090/student?
callback=showData'><\/script>");
}); function func(res){
alert(res.message+res.name+'你已经'+res.age+'岁了');
}
</script>
(2)、hash
//场景是当前页面 A 通过iframe 或 frame 嵌入了跨域的页面 B
//在 A 中的伪代码如下:
var B = document.getElementsByTagName('ifame');
B.src = B.src + '#' + 'data'; //在B中的伪代码如下:
window.onhashchange = function(){
var data = window.location.hash;
}
(3)、postMessage
//窗口A(http: A.com)向跨域的窗口B(http://B.com)发送信息
window.postMessage('data', 'http://B.com'); //在窗口B中监听
window.addEventListener('message',function(event){
console.log(event.origin); //http://A.com
console.log(event.source); //B window
console.log(evnet.data); //data
});
(4)、webSocket(需要服务端支持)
var ws = new WebSocket('wss://localhost:3000'); ws.onopen = function(evt){
console.log('Connection open ...');
ws.send('hello');
} ws.onmessage = function(evt){
console.log('Received Message:'+ evt.data);
ws.close();
} ws.onclose = function(evt){
console.log('Connection closed.');
}
(5)、CORS
CORS即“跨域资源共享”,这是一种最常用的跨域实现方式,一般需要后端人员在处理请求数据的时候,添加允许跨域的相关请求头信息。
大致思路是这样的:首先获取请求对象的信息,比如Origin字段,通过预先配置的参数判断请求是否合法,
然后设置相应对象response的头信息,实现跨域资源请求。
最新文章
- 如何编写稳定流畅的iOS移动端应用
- fasicon.js (无二维码版,如需要js创建二维码版本可联系我:770959294@qq.com)
- 迅雷9、迅雷极速版之迅雷P2P加速:流量吸血鬼?为什么你装了迅雷之后电脑会感觉很卡很卡?
- Jmeter 分布式性能测试
- Coder-Strike 2014 - Round 1 D. Giving Awards
- 【Win10】UAP/UWP (通用程序) 开发初体验(1) 之 开发准备
- paip. dsl 编程语言优点以及 常见的dsl
- yum安装node.js
- C学习笔记之预处理指令
- 图论(费用流):BZOJ 4514 [Sdoi2016]数字配对
- 只有20行Javascript代码!手把手教你写一个页面模板引擎
- 201521123057 《Java程序设计》第12周学习总结
- 【STL】c++ priority_queue的使用方法
- Building gRPC Client iOS Swift Note Taking App
- CentOS Bash 命令补全增强软件包 bash-completion
- 【blog】MySQL中tinytext、text、mediumtext和longtext详解
- python 中有趣的库tqdm
- python虚拟环境创建
- python 全栈开发,Day130(多玩具端的遥控功能, 简单的双向聊天,聊天记录存放数据库,消息提醒,玩具主动发起消息,玩具主动发起点播)
- jQuery对象的获取与操作方法总结