原生Ajax的用法
Ajax
全称 AsynchronousJavaScript+XML
(异步 JavaScript
和 XML
,网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。Ajax
本身不是一种新技术,而是用来描述一种使用现有技术集合实现的一个技术方案,浏览器的 XMLHttpRequest
是实现 Ajax
最重要的对象( IE6
以下使用 ActiveXObject
)。
1 | var xhr = new XMLHttpRequest(); |
下面分别对 XMLHttpRequest
对象常用的的函数、属性、事件进行分析。
函数
open
用于初始化一个请求,用法:
1 | xhr.open(method,url,async); |
method
:请求方式,如get、post
url
:请求的url
async
:是否为异步请求,默认true,异步
send
用于发送 HTTP
请求,即调用该方法后 HTTP
请求才会被真正发出,用法:
1 | xhr.send(param) |
param
:http请求的参数,可以为string、Blob
等类型.
abort
用于终止一个 ajax
请求,调用此方法后 readyState
将被设置为 0
,用法:
1 | xhr.abort() |
setRequestHeader
用于设置 HTTP
请求头,此方法必须在 open()
方法和 send()
之间调用,用法:
1 | xhr.setRequestHeader(header, value); |
getResponseHeader
用于获取 http
返回头,如果在返回头中有多个一样的名称,那么返回的值就会是用逗号和空格将值分隔的字符串,用法:
1 | 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
是一个包含二进制数据的JavaScriptArrayBuffer
。 - blob:
response
是一个包含二进制数据的Blob
对象 。 - document:
response
是一个HTMLDocument
或XMLXMLDocument
,这取决于接收到的数据的 MIME 类型。 - json:
response
是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为JSON
解析得到的。 - text:
response
是包含在DOMString
对象中的文本。
response
返回响应的正文,返回的类型由上面的 responseType
决定。
withCredentials
ajax
请求默认会携带同源请求的 cookie
,而跨域请求则不会携带 cookie
,设置 xhr
的 withCredentials
的属性为 true
将允许携带跨域 cookie
。
事件回调
onreadystatechange
1 | xhr.onreadystatechange = callback; |
当 readyState
属性发生变化时,callback会被触发。
onloadstart
1 | xhr.onloadstart = callback; |
在 ajax
请求发送之前( readyState==1
后, readyState==2
前), callback
会被触发。
onprogress
1 | xhr.onprogress = function(e){ |
回调函数可以获取资源总大小 total
,已经加载的资源大小 loaded
,用这两个值可以计算加载进度。
onload
1 | xhr.onload = callback; |
当一个资源及其依赖资源已完成加载时,将触发 callback
,通常我们会在 onload
事件中处理返回值。
异常处理
onerror
1 | xhr.onerror = callback; |
当 ajax
资源加载失败时会触发 callback
。
ontimeout
1 | xhr.ontimeout = callback; |
当进度由于预定时间到期而终止时,会触发 callback
,超时时间可使用 timeout
属性进行设置。
jQuery对Ajax的封装
`jQuery`提供的 `ajax`封装进行网络请求,包括 `$.ajax、$.get、$.post`等,这几个方法放到现在,我依然觉得很实用。
1 | // $.ajax只接收一个参数,这个参数接收一系列配置,其自己封装了一个 jqXHR对象 |
常用配置
url
当前页地址。发送请求的地址。
type
类型:String
请求方式 ( "POST"
或 "GET"
), 默认为 "GET"
。注意:其它 HTTP
请求方法,如PUT
和 DELETE
也可以使用,但仅部分浏览器支持。
timeout
类型:Number
设置请求超时时间(毫秒)。此设置将覆盖全局设置。
success
类型:Function
请求成功后的回调函数。
jsonp
在一个 jsonp
请求中重写回调函数的名字。这个值用来替代在 "callback=?"
这种 GET
或 POST
请求中 URL
参数里的 "callback"
部分。
error
类型:Function
。请求失败时调用此函数。
dataType
1 | "xml": 返回 XML 文档,可用 jQuery 处理。 |
data
类型:String
使用 JSON.stringify
转码
complete
类型:Function
请求完成后回调函数 (请求成功或失败之后均调用)。
async
类型:Boolean
默认值: true
。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false
。
contentType
类型:String
默认值: "application/x-www-form-urlencoded"
。发送信息至服务器时内容编码类型。
jQuery的替代者
axios
基于 Promise
对原生的 XHR
进行了非常全面的封装,使用方式也非常的优雅。另外, axios
同样提供了在 node
环境下的支持,可谓是网络请求的首选方案。
FetchAPI
是一个用用于访问和操纵HTTP管道的强大的原生 API。fetch
是作为 XMLHttpRequest
的替代品出现的。使用 fetch
,你不需要再额外加载一个外部资源。但它还没有被浏览器完全支持,所以你仍然需要一个 polyfill
。