HTTP请求

小鱼儿 2022-05-23 00:13 417阅读 0赞

原生JS写一个GET请求

let xhr = new XMLHttpRequest();
    xhr.open("GET", "/list");
    xhr.send();

xhr.open第一个参数是请求方法，第二个参数是请求url，然后把它send出去就行了。

如果需要加上请求参数，如果用jQuery的ajax，那么是这么写的：

$.ajax({ url: "/list", data: { page: 5 }
    });

如果是用原生的话就得拼在请求url上面，即open的第二个参数：  
![这里写图片描述][70]

并且参数需要转义，如下代码所示：

原生JS写一个POST请求,如下图所示：  
![这里写图片描述][70 1]

设置它的Content-Type，如下代码：

let xhr = new XMLHttpRequest();
    xhr.open("POST", "/add");
    xhr.setRequestHeader("Content-type", 
                               "application/x-www-form-urlencoded");
    xhr.send("id=5&name=yin");

除了字符串之外，send还支持FormData/Blob等格式，如：

let form = $("form")[0];
    xhr.send(new FormData(form));

但最后都是被转成字符串发送。

要求格式要变成json，就需要指定Content-Type为application/json，然后send的数据要stringify一下：

let xhr = new XMLHttpRequest();
    xhr.open("POST", "/add");
    xhr.setRequestHeader("Content-type", "application/json");
    let data = {id:5, name: "yin"};
    xhr.send(JSON.stringify(data));

如果是用jq的话，那么可以这样：

$.ajax({ processData: false, data: JSON.stringify(data), contentType: "application/json" });

我们可以比较json和urlencoded这两种形式的优缺点，json的缺点是parse解析的工作量要明显高于split(“&”)的工作量，但是json的优点又在于表达复杂结构的时候比较简洁，如二维数组(m n)在urlencoded需要拆成m n个字段，而json就不用了。所以相对来说，如果请求数据结构比较简单应该是使用常用的urlencoded比较有利，而比较复杂时使用json比较有利。通常来说比较常用的还是urlencoded.

还有第3种常见的编码是multipart/form-data，这种也可以用来发请求，如下代码所示：

let formData = new FormData();
    formData.append("id", 5); // 数字5会被立即转换成字符串 "5"
    formData.append("name", "#yin");
    // formData.append("file", input.files[0]);
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "/add");
    xhr.send(formData);

每个字段之间用一个随机字符串隔开，保证发送的内容不会出现这个字符串，这样发送的内容就不需要进行转义了，因为如果文件很大的话，转义需要花费相当的时间，体积也可能会成倍地增长。

http的请求报文，如下图所示：  
![这里写图片描述][70 2]

所以本质上GET/POST是一样的，只是GET把数据拼到url，而POST是放到请求体。另外一点，url是有长度限制的，包括浏览器和接收的服务如nginx，而请求体是没有限制的（浏览器没有限制，但是一般nginx接收会有限制），还有POST的数据支持多种编码格式。

虽然如此，POST还是比GET安全的，体现在以下几点：

1.GET参数是放在url上面，用户可以保存为书签、传播链接，如果参数有敏感数据，如登陆的密码，那么可能会泄露

2.搜索引擎在爬取网站的时候如果修改数据库的请求支持GET，那么很可能数据库会无意被搜索引擎修改

3.script/img等标签是GET请求，会更加方便跨站请求伪造，在浏览器地址栏输入也是GET，也是为修改请求提供便利

**http状态码解读**

**301 永久转移**

当你想换域名的时候，就可以使用301，如之前的域名叫www.renfed.com，后来换了一个新域名fed.renren.com，希望用户访问老域名的时候能够自动跳转到新的域名，那么就可以使用nginx返回301：

server {
        listen       80;
        server_name  www.renfed.com;
        root         /home/fed/wordpress;
        return       301 https://fed.renren.com$request_uri;
    }

浏览器收到301之后，就会自动跳转了。搜索引擎在爬的时候如果发现是301，在若干天之后它会把之前收录的网页的域名给换了。

还有一个场景，如果希望访问http的时候自动跳转到https也是可以用301，因为如果直接在浏览器地址栏输入域名然后按回车，前面没有带https，那么是默认的http协议，这个时候我们希望用户能够访问安全的https的，不要访问http的，所以要做一个重定向，也可以使用301，如：

server {
        listen       80; 
        server_name  fed.renren.com;
    
        if ($scheme != "https") {
             return 301 https://$host$request_uri;
        }   
    }

**302 Found 资源暂时转移**

很多短链接跳转长链接就是使用的302，如下图所示：  
![这里写图片描述][70 3]

**304 Not Modified 没有修改**

在本地使用webpack-dev-server开发的时候，如果没有改js/css，那么刷新页面的时候请求本地的js/css文件将返回304，如下图所示：  
![这里写图片描述][70 4]

webpack-dev-server的服务怎么知道没有修改呢，因为浏览器在请求的时候带上了etag，如：

> W/“10e632-Oz38I6asQyS459XpsaJYkjMUoZI”

服务会计算当前文件的etag，它是一个文件的哈希值，然后比较一下传过来的etag，如果相等，则认为没有修改返回304。如果有修改的话就会返回200和文件的内容，并重新给浏览器一个新的etag。下次请求的时候浏览器就会带上这个新的etag。如果把控制台的disable cached打开的话，那么浏览器即使有etag也不会带上。另外一个判断有没有修改的字段是Last Modified Time，这是根据文件的修改时间。

**400 Bad Request 请求无效**

当必要参数缺失、参数格式不对时，后端通常会返回400，如下图所示：  
![这里写图片描述][70 5]

并带上了提示信息：

\{“message”:”opportunityId type mismatch required type ‘long’ “\}

通过400可以知道请求参数有误，结合提示信息，说明需要传一个数字，而不是字符串。

**403 Forbidden 拒绝服务**

服务能够理解你的请求，包括传参正确，但是拒绝提供服务。例如，服务允许直接访问静态文件,但是不允许访问某个目录：否则，别人对你服务器上的文件就一览无遗了。

403和401的区别在于，401是没有认证，没有登陆验证之类的错误。  
![这里写图片描述][70 6]

**500 内部服务器错误**

如业务代码出现了异常没有捕获，被tomcat捕获了，就会返回500错误：  
![这里写图片描述][70 7]

如：数据库字段长度限制为30个字符，如果没有判断直接插入一条31个字符的记录，就会导致数据库抛异常，如果异常没有捕获处理，就直接返回500。

当服务彻底挂了，连返回都没有的时候，那么就是502了。

**502 Bad Gateway 网关错误**

![这里写图片描述][70 8]

这种情况是因为nginx收到请求，但是请求没有打过去，可能是因为业务服务挂了，或者是打过去的端口号写错了：

server {
        location / {
            # webpack的服务
            proxy_pass https://127.0.0.1:7071;
        }
    }

**504 Gateway Timeout 网关超时**

通常是因为服务处理请求太久，导致超时，如PHP服务默认的请求响应最长处理时间为30s，如果超过30s，将会挂掉，返回504，如下图所示：  
![这里写图片描述][70 9]

这种情况可能是因为服务还要请求第三方的服务，第三方服务处理时间较久没有返回，如在向FCM发送Push的时候，如果一个请求里面需要发送的订阅的浏览器(subscriptions)太多了，就经常会处理很久，导致504.

**101 协议转换**

![这里写图片描述][70 10]

**600是一种不太常用的状态码**，表示服务器没有返回响应头部，只返回实体内容。

3种常用的请求编码，分别是application/www-x-form-urlencoded、application/json、multipart/form-data，第一种是最常用的一种，适用于GET/POST等，第二种常见于请求响应的数据格式，第三种通常用于上传文件。然后还比较了POST和GET，虽然两者的请求数据都在http报文里面，只是位置不一样，但是考虑到用户、搜索引擎等使用场景，POST还是会比GET更安全。

转载自[https://mp.weixin.qq.com/s/XaiFrB4h3Y-upEoFZo2Jdg][https_mp.weixin.qq.com_s_XaiFrB4h3Y-upEoFZo2Jdg]

[70]: /images/20220523/84f4da194f18439b902510e2e3e69435.png
[70 1]: /images/20220523/07bd906518aa4148a982dde1223fd3e0.png
[70 2]: /images/20220523/6dff4fe128944bb488f2d95d5a84e6fe.png
[70 3]: /images/20220523/f6ae575b685946f2a578b04f0fbe032d.png
[70 4]: /images/20220523/2ba3b915fb8843d4a5d9be8e672ebdc6.png
[70 5]: /images/20220523/870c55862d5f44088b9c76586126287e.png
[70 6]: /images/20220523/c42b97b511ef48629bcc01d727f4aa86.png
[70 7]: /images/20220523/af150b1a41d54bbf92adcdf38edff05c.png
[70 8]: /images/20220523/0170f34dc32c40a3a8dbda10a5f19fcb.png
[70 9]: /images/20220523/fec4880e6f7a4b5cbf9920dd994511f8.png
[70 10]: /images/20220523/6d8f0c70214d4260aec0d123b77d0cf9.png
[https_mp.weixin.qq.com_s_XaiFrB4h3Y-upEoFZo2Jdg]: https://mp.weixin.qq.com/s/XaiFrB4h3Y-upEoFZo2Jdg