原生 ajax

AJAX 全称(Async Javascript and XML) 即异步的 JavaScript 和 XML，ajax 并不是一门新的语言，是由html css js xml等语言组合实现异步请求一种方式

1.Ajax原理是什么？

        Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发送异步请求，从服务器获得数据，然后⽤ JavaScript 来操作 DOM ⽽更新⻚⾯

实现 Ajax 异步交互需要服务器逻辑进⾏配合，完成以下步骤：

• 创建 Ajax 的核⼼对象 XMLHttpRequest 对象

    let xhr = new XMLHttpRequest();
    readyState: 0 请求未初始化 刚刚实例化xmlHttpRequest
    readyState: 1 客户端与服务器建立链接 调用了open方法
    readyState: 2 请求已经被接受
    readyState: 3 请求正在处理中
    readyState: 4 请求处理完成,响应已就绪 已经拿到了服务器的返回结果

• 为xhr.onreadystatechange设置事件监听

    xhr.onreadystatechange = function (){

        if(xhr.readyState === 4){
            switch (xhr.status){
                case 200:{
                    console.log(JSON.parse(xhr.responseText));
                    break;
                }
                case 404:{
                    console.log("页面或者资源找不到");
                    break;
                }
            }

        }
    }

• 调用xhr.open(请求方式,请求地址,同步异步)

    xhr.open("GET","https://cnodejs.org/api/v1/topics",false);
    method(请求方式  string
    GET获取数据 POST发送数据 DELETE删除 PUT修改
    url(请求地址  string
    async(同步异步  布尔 false=>异步    true=>同步  默认值是false

• 构建请求所需的数据内容，并通过 XMLHttpRequest 对象的 send() ⽅法发送给服务器端

    xhr.send(null)

    console.log(xhr);

---

 2.HTTP常见状态码

        1xx    Informational（信息性状态码）    接受的请求正在处理
        2xx    Success（成功状态码）    请求正常处理完毕
        3xx    Redirection（重定向）    需要进行附加操作以完成请求
        4xx    Client error（客户端错误）    客户端请求出错，服务器无法处理请求
        5xx    Server Error（服务器错误）    服务器处理请求出错

各类别常见状态码：

1xx 

100 ：（客户端继续发送请求，这是临时响应）这个临时响应是用来通知客户端它的部分请求已被服务器接收，且仍未被拒绝；

101 ：服务器根据客户端的请求切换协议；主要用于 websocket 或者是 http2 升级；

2xx 

200 OK：表示从客户端发送给服务器的请求被正常处理并返回；

201 （已创建）：请求成功并且服务器创建了新的资源；

202 （已创建）：服务器已经接收请求，但尚未处理；

203 （非授权信息）：服务器已成功处理请求，但返回的信息可能来自另一个来源；

204 No Content：表示客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）；

205 （重置内容）：服务器成功处理请求，但没有返回任何内容；

206 （部分内容）：服务器成功处理了部分请求；

3xx 

300（多种选择）：针对请求，服务器可执行多种操作；

301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL；

302 Found：临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL；

       301与302的区别：前者是永久移动，后者是临时移动（之后可能还会更改URL）

303 See Other：表示请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源；

      302与303的区别：后者明确表示客户端应当采用GET方式获取资源

305 （使用代理）：请求者只能使用代理访问请求的网页；

307 （临时重定向）：服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求；

4xx （4种）

400 Bad Request：表示请求报文中存在语法错误；

401 Unauthorized：未经许可，需要通过HTTP认证；

403 Forbidden：服务器拒绝该次访问（访问权限出现问题）

404 Not Found：表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用；

405 （方法禁用）：禁用请求中指定的方法；

406（不接受）：无法使用请求的内容特性响应请求的网页；

407（需要代理授权）：此状态代码与401（未授权）类似，但指定请求者应当授权使用代理；

408（请求超时）：服务器等候请求时发生超时；

5xx （2种）

500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；

501 （已尚未实施）：服务器不具备完全请求的功能；

501 （错误网关）：服务器作为网关或者代理，从上游服务器收到无效响应；

503 Server Unavailable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求；

504（网关超时）：服务器作为网关或代理，但是没有及时从上游服务器收到请求；

505（HTTP 版本不受支持）：服务器不支持请求中所用的 HTTP 协议版本；

---

3.同源和跨域

⼀、跨域是什么

跨域 本质是浏览器基于 同源策略 的⼀种安全⼿段

同源策略 （ Sameoriginpolicy ），是⼀种约定，它是浏览器最核⼼也最基本的安全功能

所谓 同源 （即指在同⼀个域）具有以下三个相同点：

        协议相同（protocol ）

        域名相同（host ）

        端⼝相同（port ）

⼆、如何解决

解决跨域的⽅法有很多，下⾯列举了三种：

        JSONP   CORS   Proxy

1.JSONP ----- 原理：借助了script标签 src 请求资源时, 不受同源策略的限制

    优点： jsonp没有兼容性问题     

        缺点： jsonp只能用于get请求

2 .Proxy 为代理服务有利于保障⽹络终端的隐私或安全，防⽌攻击

        nginx 前后端通常通过 nginx 实现反向代理

        优点就是轻量级、启动快、高并发。

3.CORS（跨域资源共享）

        CORS 主要是后台工程师设置后端代码来达到前端跨域请求的

        优点： 功能强大支持各种 HTTP Method

        缺点： 兼容性不如 JSONP