查看原文
其他

人人网FED 2018-05-29

前言

天气渐热了。今日早读文章由@人人网FED分享。

正文从这开始~

HTTP大家都不陌生,但是HTTP的许多细节就并不是很多人都知道了,本文将讨论一些容易被忽略但又比较重要的点。

首先,怎么用原生JS写一个GET请求呢?如下代码,只需3行:

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

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

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

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

如果是用原生的话就得拼在请求url上面,即open的第二个参数:

并且参数需要转义,如下代码所示:

function ajax (url, data) {
   
let args = [];
   
for (let key in data) {
       
// 参数需要转义
     args
.push(`${encodeURIComponent(key)} =
                                    ${encodeURIComponent(data[key])}`
);
   
}
   
let search = args.join("&");
   
// 判断当前url是否已有参数
   url
+= ~url.indexOf("?") ? `&${search}` : `?${search}`;
   
let xhr = new XMLHttpRequest();
   xhr
.open("GET", url);
   xhr
.send();
}

那为什么用jq就不用呢?因为jq帮我们做了,jq的ajax支持一个叫processData的参数,默认为true:

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

这个参数的作用是用来处理传进来的data的,如下jq的源码:

如果传了data,并且processData为true,并且data不是一个string了,就会调param处理data。然后我们来看下这个param函数是怎么实现的:

可以看到,它也是跟我自己实现的ajax类似,把key和value转义用”=”拼接,然后push到一个数组,最后再join地一下。不一样的地方是它的判断逻辑比我的复杂,它会再调一个buildParams的函数去处理key/value,因为value可能是一个数组,也可能是一个Object。如果value是一个Object,那么直接encode一下就会变成”[object Object]”的转义了:

所以buildParams在处理每个key/value时,会先判断当前value是否是一个数组或者是Object,如下图所示:

如果它是一个数组的话,这个数组的每一个元素都会变成单独的一个请求字段,它的key是父级的key拼上数组的索引得到,如{ids: [1, 2, 3]}就会被拼成:ids[0]=1、ids[1] = 2、ids[2] = 3,如果是一个Object的话key的后缀就是子Object的key,如{user: {id: 1333, name: “yin”}}会被拼成:user[id]=1333、user[name]=yin,否则就认为它是一个简单的类型,就直接调一下param函数定义的add,把它push到s那个数组。这里用到了递归调用,会不断地拼key值,直到value是一个普通变量了,就到了最后面的else逻辑。

也就是说,以下代码:

$.ajax({
   url
: "/list",
   data
: {
       user
: {
           name
: "yin",
           age
: 18
       
}
   
},
});

将会被拼成的url为:

/list?user[name]=yin&user[age]=18

注意上面的中括号还没有转义。而如果是一个数组的话:

$.ajax({
   url
: "/list",
   data
: {
       ids
: [1, 2, 3]
   
},
});

拼成的请求url为:

/list?ids[0]=1&ids[1]=2&ids[2]=3

如果后端用的Java的Spring MVC框架的话,是理解这种格式的,框架收到这样的参数后会生成一个Array,传递给业务代码,业务代码是不用关心怎么处理这种参数的。其它的框架应该也类似。

怎么用原生JS写一个POST请求呢?如下图所示:

POST请求的参数就不是放在url了,而是放在send里面,即请求体。你可能会问:难道就不能放url么?我就要放url。如果你够任性,那么可以,前提是后端所使用的http框架能够在url里面取数据,因为它一定会收到url,也一定会收到请求体,所以取决于它要怎么处理,按照http标准,如果请求方法是POST,那么应该是得去请求体拿的,就不会在url的search上取了,当然它可以改一下,改成两个都可以拿。

然后我们会发现请求的mime类型是text/plain:

并且查看请求参数的时候,并不是平时所看到能够按照字段一行行地展示:

这是为什么呢?这是因为我们没有设置它的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");

如果设置Content-Type为x-www-form-urlencoded的话,那么在检查的话,Chrome也会按字段分行展示了:

这个也是jq默认的Content-Type:

它是一种最常用的一种请求编码方式,支持GET/POST等方法,特点是:所有的数据变成键值对的形式key1=value1&key2=value2的形式,并且特殊字符需要转义成utf-8编号,如空格会变成%20:

由于中文在utf-8需要占用3个字节,所以它有3个%符号。

我们刚刚是xhr.send一个字符串,如果send一个Object会怎么样呢?如下代码所示:

let xhr = new XMLHttpRequest();
xhr
.open("POST", "/add");
xhr
.send({id:5, name: "yin"});

检查控制台的时候是这样的:

也就是说,实际上是调了Object的toString方法。所以可以看到,在send的数据需要转成字符串。

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

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

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

我们再看下其它的请求格式,如Github的REST API是使用json的格式发请求:

这个时候要求格式要变成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"
});

这个时候processData为false,告诉jq不要处理数据了——即拼成key1=value1&key2=value2的形式,直接把传给它的数据send就好了。

我们可以比较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);

它通常用于上传文件,上传文件必须要使用这种格式。上面代码发送的内容如下图所示:

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

然后再讨论一个问题,我们知道在浏览器地址栏输入一个网址请求数据,这个时候是用的GET请求,而我们在代码里面用ajax发的GET请求也是GET,浏览器访问网址的GET和ajax的GET有什么区别吗?

为了能够观察到浏览器自已发出去的GET,需要用一个抓包工具看一下这个GET是怎么样的,如下图所示:

浏览器自己发的GET有一个明显的特点,它会设置http请求头的Accept字段,并且把text/html排在第一位,即它最希望收到的是html格式。而动态的ajax抓包显示是这样的:

可以看到,使用地址栏访问的和使用ajax的get请求本质上都是一样的,只是使用ajax我们可以设置http请求头,而使用地址栏访问的是由浏览器添加默认的请求头。

上面是使用http抓的包,我们可以看到请求的完整url,包括请求的参数,而如果是抓的https的包的话,GET放在url上的参数就看不到了:

也就是说https的请求报文是加密的,包括请求的uri等,需要解密后才能看到。那是不是说使用https的GET也是安全的,而不是https的POST不会比GET安全?

我们先来看一下http的请求报文,如下图所示:

如果使用抓包工具的话,可以看到请求报文确实是按照上图排列的,如图所示的GET:

而POST是这样的:

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

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

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

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

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

接着讨论请求响应状态码。很多人都知道200、404、500这几个,对于其它的可能就不甚了解了。这里我把一些常用的状态码列一下。

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,如下图所示:

304 Not Modified 没有修改

在本地使用webpack-dev-server开发的时候,如果没有改js/css,那么刷新页面的时候请求本地的js/css文件将返回304,如下图所示:

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

W/“10e632-Oz38I6asQyS459XpsaJYkjMUoZI”

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

400 Bad Request 请求无效

当必要参数缺失、参数格式不对时,后端通常会返回400,如下图所示:

并带上了提示信息:

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

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

403 Forbidden 拒绝服务

服务能够理解你的请求,包括传参正确,但是拒绝提供服务。例如,服务允许直接访问静态文件:

但是不允许访问某个目录:

否则,别人对你服务器上的文件就一览无遗了。

403和401的区别在于,401是没有认证,没有登陆验证之类的错误。

500 内部服务器错误

如业务代码出现了异常没有捕获,被tomcat捕获了,就会返回500错误:

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

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

502 Bad Gateway 网关错误

如下图所示:

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

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

nginx返回了502.

504 Gateway Timeout 网关超时

通常是因为服务处理请求太久,导致超时,如PHP服务默认的请求响应最长处理时间为30s,如果超过30s,将会挂掉,返回504,如下图所示:

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

101 协议转换

websocket是从http升级而来,在建立连接前需要先通过http进行协议升级:

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

这些状态码实际上就是一个数字,可以任意返回,但是最好是按照http的规定返回合适的状态码。如果返回4、5、6开头的http状态码,浏览器将会打印错误,认为当前请求失败。

我们还没有说怎么判断请求成功了,如下代码所示:

xhr.open("POST", UPLOAD_URL);
xhr
.onreadystatechange = function() {
   
// readyState为4表示请求完成
   
if (this.readyState === 4){
       
if (this.status === 200) {
           
let response = JSON.parse(this.responseText);
           
if (!response.status || response.status.code !== 0) {
               
// 失败    
               callback
.failed && callback.failed();
           
} else {    
               
// 成功    
               callback
.success(response.data.url);
           
}          
       
} elseif (this.status >= 400 || this.status === 0) {
           
// 失败    
           callback
.failed && callback.failed();
       
// 正常不应该返回20几的状态码,这种情况也认为是失败
       
} else {    
           callback
.failed && callback.failed();
       
}
   
}
};
xhr
.send(formData);

这里有个问题,如果返回的状态码是3开头的重定向,需要自己再去发一个请求吗?

实践证明,不需要,浏览器会自动重定向,如下图所示:

最后,本文提到了3种常用的请求编码,分别是application/www-x-form-urlencoded、application/json、multipart/form-data,第一种是最常用的一种,适用于GET/POST等,第二种常见于请求响应的数据格式,第三种通常用于上传文件。然后还比较了POST和GET,虽然两者的请求数据都在http报文里面,只是位置不一样,但是考虑到用户、搜索引擎等使用场景,POST还是会比GET更安全。最后说了几个常用的http状态码,并用一些实际的例子加深印象和理解。

关于本文

作者:@人人网FED
原文:

https://juejin.im/post/5a757d2f5188254e5c6c404a

最后,为你推荐


【第1088期】webpack & HTTP/2


【第571期】基于Postman的API自动化测试

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存