原生 ajax

2024-01-18 09:22:10

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（服务器错误）   服务器处理请求出错

各类别常见状态码：

2xx

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

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

3xx

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

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

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

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

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

4xx （4种）

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

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

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

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

5xx （2种）

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

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

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

码农公寓