14.通信类

1.什么是通源策略及限制

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

* Cookie、Localstorage和IndexDB 无法读取
* DOM 无法取得
* AJAX 请求不能发送

---

2.前后端如何通信

* AJAX
* WebSocket
*CORS

---

3. Ajax是什么

我理解Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助。

---

4.Ajax的工作流程

(1).创建Ajax核心对象XMLHttpRequest

var xmlhttp;  
if (window.XMLHttpRequest)  
  {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
  xmlhttp=new XMLHttpRequest();  
  }  
else  
  {// 兼容 IE6, IE5  
  xmlhttp=newActiveXObject("Microsoft.XMLHTTP");  
  }  

(2)向服务器发送请求

xmlhttp.open(method,url,async);  
send(string)  

注意： open 的参数要牢记，很多面试官爱问这样的细节

• method：请求的类型；GET 或POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

send(string)方法post请求时才使用字符串参数，否则不用带参数。

注意：post请求一定要设置请求头的格式内容

xmlhttp.open("POST","ajax_test.html",true);  
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xmlhttp.send("fname=Henry&lname=Ford");  

(3)服务器响应处理

responseText 获得字符串形式的响应数据。
responseXML 获得XML 形式的响应数据。

==>同步处理

xmlhttp.open("GET","ajax_info.txt",false);  
xmlhttp.send();  
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 

直接在send()后面处理返回来的数据。

==>异步处理
异步处理相对比较麻烦，要在请求状态改变事件中处理。

xmlhttp.onreadystatechange=function()  
  {  
  if (xmlhttp.readyState==4 &&xmlhttp.status==200)  
    {  
   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;  
    }  
  }  

一共有5中请求状态，从0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

xmlhttp.status：响应状态码。这个也是面试比较爱问的，这个必须知道4个以上，比较常见的有：
200: "OK"
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
408 （请求超时） 服务器等候请求时发生超时。
500 （服务器内部错误） 服务器遇到错误，无法完成请求。

---

4.跨域通信的几种方式

cors、jsonp、hash、postmessage、websocket