前端网络相关小结

手写 XMLHttpRequest 不借助任何库

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          console.log(xhr.responseText);
        }
      }
    };
    xhr.open('GET', 'url', true);
    //xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
    xhr.send(null);

当get时，open中的url拼好参数，send中不传参数
当post时，open中的url不带参数，send中传入参数，并且在open后send前设置请求头。

ajax 请求中的两种状态码

上述代码中有两种状态码，

第一种是 xhr.readyState ，它是浏览器判断请求过程中各个阶段的状态码；

0 - 代理被创建，但尚未调用 open（）

1 - open（）方法已经被调用

2 - send（）方法已经被调用，并且头部和状态已经可以获得

3 - 下载中，responseText 属性已经包含部分数据

4 - 下载操作已完成

第二种是 xhr.status ，它是HTTP 协议中规定的不同结果的返回状态说明。

1xx

信息性状态码，表示接受的请求正在处理

2xx

成功状态码，表示请求正常处理完毕

200 OK：表示从客户端发送给服务器的请求被正常处理并返回
204 No Content：表示客户端发送给服务端的请求得到了成功处理，但在返回的响应报文中不包含实体的主体部分（没有资源可以返回）
206 Patial Content：表示客户端进行了范围请求，并且服务器成功执行了这部分的GET请求，响应报文中包含由Content-Range 指定范围的实体内容

3xx

重定向状态码，表示需要进行附加操作以完成请求

301 Moved Permanently：永久重定向，表示请求的资源被分配了新的URL，之后应使用更改后的URL
302 Found：临时重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL

301和302的区别：前者是永久重定向，后者是临时重定向（之后可能还会更改URL）

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

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

304 Not Modified：表示客户端发送附带条件（是指采用GET方法的请求报文中包含if-Match、if-Modified-Since、if-None-Match、if-Range、if-Unmodified-Since中任一首部）的请求时，资源已找到，但未符合条件请求。
307 Temporary Redirect：临时重定向，与302有着相同的含义，307会遵照浏览器标准不会从POST变成GET（不同浏览器可能出现不同的情况）

4xx

客户端错误状态码，表示服务器无法处理请求

400 Bad Request：请求报文中存在语法错误
401 Unauthorized：未经许可，需要通过HTTP认证
403 Forbidden：服务器拒绝该次访问（访问权限出现问题）
404 Not Found：表示服务器上无法找到请求的资源，除此之外也可以是在服务器拒绝请求但是不想给出拒绝原因时使用

5xx

服务器错误状态码，表示服务器处理请求出错

500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误
503 Server Unavalable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求

前端网络相关小结

猜你喜欢