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的头信息，实现跨域资源请求。

web通信类几个相关知识

猜你喜欢