摘要: 发个请求也不简单啊。
- 原文:全面分析前端的网络请求方式
- 作者:ConardLi
Fundebug经授权转载,版权归原作者所有。
一、前端进行网络请求的关注点
大多数情况下,在前端发起一个网络请求我们只需关注下面几点:
- 传入基本参数(
url
,请求方式) - 请求参数、请求参数类型
- 设置请求头
- 获取响应的方式
- 获取响应头、响应状态、响应结果
- 异常处理
- 携带
cookie
设置 - 跨域请求
二、前端进行网络请求的方式
form
表单、ifream
、刷新页面Ajax
- 异步网络请求的开山鼻祖jQuery
- 一个时代fetch
-Ajax
的替代者axios、request
等众多开源库
三、关于网络请求的疑问
Ajax
的出现解决了什么问题- 原生
Ajax
如何使用 jQuery
的网络请求方式fetch
的用法以及坑点- 如何正确的使用
fetch
- 如何选择合适的跨域方式
带着以上这些问题、关注点我们对几种网络请求进行一次全面的分析。
四、Ajax 的出现解决了什么问题
在Ajax
出现之前,web
程序是这样工作的:
这种交互的的缺陷是显而易见的,任何和服务器的交互都需要刷新页面,用户体验非常差,Ajax
的出现解决了这个问题。Ajax
全称Asynchronous java script + XML
(异步java script
和XML
)
使用Ajax
,网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。
Ajax
本身不是一种新技术,而是用来描述一种使用现有技术集合实现的一个技术方案,浏览器的XMLHttpRequest
是实现Ajax
最重要的对象(IE6
以下使用ActiveXObject
)。
尽管X
在Ajax
中代表XML
, 但由于JSON
的许多优势,比如更加轻量以及作为java script
的一部分,目前JSON
的使用比XML
更加普遍。
五、原生 Ajax 的用法
这里主要分析XMLHttpRequest
对象,下面是它的一段基础使用:
var xhr = new XMLHttpRequest();
xhr.open('post','www.xxx.com',true)
// 接收返回值
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 ){
if(xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log(xhr.responseText);
}
}
}
// 处理请求参数
postData = {"name1":"value1","name2":"value2"};
postData = (function(value){
var dataString = "";
for(var key in value){
dataString += key+"="+value[key]+"&";
};
return dataString;
}(postData));
// 设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 异常处理
xhr.onerror = function() {
console.log('Network request failed')
}
// 跨域携带cookie
xhr.withCredentials = true;
// 发出请求
xhr.send(postData);
下面分别对XMLHttpRequest
对象常用的的函数、属性、事件进行分析。
函数
open
用于初始化一个请求,用法:
xhr.open(method, url, async);
method
:请求方式,如get、post
url
:请求的url
async
:是否为异步请求
send
用于发送HTTP
请求,即调用该方法后HTTP
请求才会被真正发出,用法:
xhr.send(param);
param
:http 请求的参数,可以为string、Blob
等类型。
abort
用于终止一个ajax
请求,调用此方法后readyState
将被设置为0
,用法:
xhr.abort();
setRequestHeader
用于设置HTTP
请求头,此方法必须在open()
方法和send()
之间调用,用法:
xhr.setRequestHeader(header, value);
getResponseHeader
用于获取http
返回头,如果在返回头中有多个一样的名称,那么返回的值就会是用逗号和空格将值分隔的字符串,用法:
var header = xhr.getResponseHeader(name);
属性
readyState
用来标识当前XMLHttpRequest
对象所处的状态,XMLHttpRequest
对象总是位于下列状态中的一个:
值 | 状态 | 描述 |
---|---|---|
0 | UNSENT |
代理被创建,但尚未调用 open() 方法。 |
1 | OPENED |
open() 方法已经被调用。 |
2 | HEADERS_RECEIVED |
send() 方法已经被调用,并且头部和状态已经可获得。 |
3 | LOADING |
下载中; responseText 属性已经包含部分数据。 |
4 | DONE |
下载操作已完成。 |
status
表示http
请求的状态, 初始值为0
。如果服务器没有显式地指定状态码, 那么status
将被设置为默认值, 即200
。
responseType
表示响应的数据类型,并允许我们手动设置,如果为空,默认为text
类型,可以有下面的取值:
值 | 描述 |
---|---|
"" |
将 responseType 设为空字符串与设置为"text" 相同, 是默认类型 (实际上是 DOMString )。 |
"arraybuffer" |
response 是一个包含二进制数据的java script ArrayBuffer 。 |
"blob" |
response 是一个包含二进制数据的 Blob 对象 。 |
"document" |
response 是一个HTML Document 或XML XMLDocument ,这取决于接收到的数据的 MIME 类型。 |
"json" |
response 是一个 java script 对象。这个对象是通过将接收到的数据类型视为JSON 解析得到的。 |
"text" |
response 是包含在DOMString 对象中的文本。 |
response
返回响应的正文,返回的类型由上面的responseType
决定。
withCredentials
ajax
请求默认会携带同源请求的cookie
,而跨域请求则不会携带cookie
,设置xhr
的withCredentials
的属性为true
将允许携带跨域cookie
。
事件回调
onr