JavaScript 笔记(18)- XMLHttpRequest 对象

原创 乘风逐月 随笔 JavaScript 122阅读 2018-06-20 10:29:01 举报

一、XMLHttpRequest 对象

Ajax技术的核心是 XMLHttpRequest 对象,简称 XHR,可以异步的从服务器获取信息。多数浏览器都支持原生的 XHR 对象,可以使用 XMLHttpRequest 构造函数创建。

1、XHR 的方法

(1)open():与服务器端建立连接
使用 XHR 对象时,要调用的第一个方法是 open() ,该方法接受3个参数:要发送请求的类型('get'、'post'等)、请求的URL和表示是否异步发送请求的布尔值。例如:

注:
a. URL 是相对于执行代码的当前页面(也可以使用绝对路径)
b. 只能向同一个域中使用相同端口和协议的 URL 发送请求,否则会引发安全错误调用
(2)send(data):向服务器端发送请求数据
发送特定请求,必须调用 send() 方法,该方法接受一个参数,即要作为请求主体发送的数据。数据格式为:name=value&name=value&... 。 如果不需要通过请求主体发送数据,则必须传入 null,因为该参数对浏览器来说是必须的。调用 send() 方法后,请求就会被分派到服务器。
注:对于 get 请求,send()方法失效,但不能被省略,参数传null,参数添加到 URL后面。
(3)abort()
在接收到响应之前调用该方法可以取消异步请求
(4)setRequestHeader()
设置请求头信息,该方法接收两个参数:头部字段名称和头部字段值。要成功发送请求头部信息,必须在调用 send() 方法之前调用 setRequestHeader() 方法。
(5)getResponseHeader(头部字段名)
获取相应的响应头部信息
(6)getAllResponseHeaders()
获取包含所有响应头部信息的字符串
(7)overrideMineType(MIME)
重写响应的 MIME 类型

2、XHR 的属性

(1)readyState
readyState属性表示请求过程的当前阶段。取值如下:
a. 0: 未初始化,尚未调用 open() 方法
b. 1: 启动,已经调用 open() 方法,但尚未调用 send() 方法
c. 2: 发送,已经调用 send() 方法,但尚未接收到响应
d. 3: 接受,已经接收到部分响应数据
e. 4: 完成,已经接收到全部响应数据,而且已经可以在客户端使用了
(2)responseText
接收服务器端的 Text 格式的响应数据
(3)responseXML
接收服务器端的 XML 格式的响应数据
(4)status
获取服务器端的状态码。在接收到响应后,第一步是检查 status 属性,确保响应已经成功返回。可以将 HTTP 状态码为 200 作为成功的标志,此时 responseText/responseXML 属性的内容已经就绪。
(5)statusText
HTTP 状态的说明
(6)timeout
超时设定,表示请求在等待响应多少毫秒之后就终止

3、XHR 的事件

(1)readystatechange
只要 readState 属性值变化都会触发 readystatechange 事件,所以可以通过该事件检测 readyState 属性的值,一般开发人员只需关注 readState 值为4的阶段。但是在调用 open() 之前就必须指定 readystatechange 事件处理程序才能保证跨浏览器的兼容性。
(2)timeout
设置了 timeout 属性后,在指定时间内浏览器没有接收到响应会终止请求,此时会触发 timeout 事件

4.关于 post 请求

默认情况下,服务器对post请求和提交web表单的请求并不会一视同仁,可以使用 XHR 来模仿表单提交: 首先将 Content-Type 头部信息设置为 application/x-www-form-urlencoded ,即表单提交时的内容类型。然后将要提交的内容进行序列化,最后通过 XHR 发送到服务器。
示例:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复