JS//通信、AJAX

JS——通信、AJAX

一、通信

1）什么是同源策略及限制

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

*Cookie、LocalStorage 和 IndexDB 无法获取
*DOM 无法获取
*AJAX 请求不能发送

2）前后端如何通信

*Ajax（同源下使用）
*WebSocket（不限制同源策略）
*CORS（支持同源、跨域通信）

3）如何创建Ajax

*XMLHttpRequest 对象的工作流程
*兼容性处理
*事件的触发条件
*事件的触发顺序
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象；
(2)创建一个新的HTTP请求,并指定该HTTP请求的方式、URL及验证信息；
(3)设置响应HTTP请求状态变化的函数；
(4)发送HTTP请求；
(5)获取异步调用返回的数据；
(6)使用JavaScript和DOM实现局部刷新。

var xhr = new XMLHttpRequest()
xhr.open("GET","/api",false)  //true。false是否异步执行
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if(xhr.status == 200) {
                alert(xhr.responseText)
        }
    }
}
xhr.send(null)

4）跨域通信的几种方式

（5个都要说出来，别人会问原理）

• JSONP
• Hash（Hash改变不改变页面，search改变会改变页面）
• postMessage
• WebSocket
• CORS

二、AJAX

1 知识点

1.1 XMLHttpRequest

（即：如何创建 AJAX）

1.2 状态码说明

readyState（状态值）：
0 - （未初始化）还没有调用send()方法
1 - （载入）已调用send()方法，正在发送请求
2 - （载入完成）send()方法执行完成，已经接收到全部相应内容
3 - （交互）正在解析响应内容
4 - （完成）响应内容解析完成，可以在客户端调用了

status（状态码）：
2** - 表示成功处理请求。如200
3** - 需要重定向，浏览器直接跳转
4** - 客户端请求错误。如404
5** - 服务器错误

1.3 跨域

1.3.1 什么是跨域

浏览器有同源策略，不允许 ajax 访问其他域接口

http://www.yourname.com/page1.html
http://m.imooc.com/course/ajaxcourserecom?cid=459
跨域条件：协议、域名、端口，有一个不同就算跨域
（http默认端口80，https默认端口43）

可以跨域的三个标签：
有三个标签允许跨域加载资源
img src=***>
link href=***>
script src=***>

三个标签的场景：
img>用于打点统计，统计网站可能是其他域
link>script>可以使用CDN，CDN的也是其他域
script>可以用于JSONP

跨域注意事项：
所有的跨域请求都必须经过信息提供方允许
如果未经允许即可获取，那是浏览器同源策略出现漏洞

1.3.2 JSONP

JSONP实现原理：
利用src或href属性不受同源策略限制的特点，
动态创建script标签， 将远程接口赋值给src获取数据，
并通过回调函数来接受和处理数据，达到跨域的目的。

var script = document.createElement('script');
script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回调执行函数
function onBack(res) {
    alert(JSON.stringify(res));
}

1.3.3 服务器端设置 http header

2 问答

题目：
*手动编写一个 ajax，不依赖第三方库
*跨域的几种实现方式

2.1 手动编写一个 ajax，不依赖第三方库

（同“一”中内容）

2.2 跨域的几种实现方式

（同“一”中内容）