Ajax 学习笔记

Asynchronous JavaScript and XML

异步网络请求 基于XMLHttpRequest对象与服务端进行交互

优点

• 无刷新跟新页面
• 兼容性好

缺点

• 浏览器不能后退，加入收藏
• ajax 竞态关系

XMLHttpRequest

属性

属性	介绍
onreadystatechange	当readyState发生变化时触发
readyState	请求状态码
response	返回一个Blob、ArrayBuffer、Document或DOMString。类型受responseType影响
responseText	返回一个DOMString。请求不成功或者未发送的情况下返回NULL
responseType	响应类型
responseURL	返回序列化URL、URL为空返回字符串
responseXML	返回一个Document。请求未发送、不成功或者解析失败，返回null
status	请求响应状态
statusText	返回一个DomString ，包含http响应状态
timeout	超时，定义一个最大的请求响应时间
ontimeout	超时调用事件
upload	上传过程
withCredentials	指定跨域请求是否带有授权信息
-----	---------
channel	一个nslChannel ，执行请求时，对象使用的通道
mozAnon	布尔值，为true情况下， 请求在没有身份认证header头和cookie的情况下发送
mozSystem	布尔值。为true情况下，请求将不强制执行同资源策略
mozBackgroundRequest	布尔值。知识是否时服务器请求

方法

方法名	作用
abort	终止请求
getAllResponseHeaders	返回有用CRLF分隔的相应头的字符串形式，没有收到则返回null
getResponseHeader	返回指定响应头的字符串，未收到响应， 或者响应不存在该报头，返回null
opne	初始化一个请求
overrideMimeType	重写MIME类型
send	发送请求
setRequestHeader	设置HTTP请求头
openRequest	初始化一个请求

事件

事件名	说明
abort	停止请求的时候触发
error	当请求发生错误的时候触发
load	请求成功完成的时候触发
loadend	请求结束的时候触发
loadstart	收到响应数据的时候触发
progress	接收数据开始周期时触发
timeout	超时未接受到数据时触发

简单实现

//创建对象
const xhr = new XMLHttpRequest()

//请求方式，地址，发送请求
xhr.open('GET','http://...？id=1212');
xhr.send();

open( method,url,async,user,passwored) 完整参数

• method：http请求方式
• url: DomString 发送url
• async： 是否异步
• user: 用户名
• passworeed:密码

//post请求
xhr.open('POST','http...');
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("id=1212&name=my");

content-type	作用
text/html	html文件类型
text/xml	xml类型
text/plain	纯文本
image/jpeg	jpeg图片
image/png	png图片
image/gif	gif图片
application/json	json数据
applicaiton/xml	xml数类型
application/xhtml+xml	HXTML数据格式
application/aton+xml	Atom Xml聚合格式类型
applicaiton/octet-stream	二进制数据
application/x-www-form-urlencoded	form表单数据被& 分隔的键值对
multipart/from-data	表单文件上传使用格式类型

响应状态

XMLHttpRequest.readyState

代表着服务器响应状态

0. unsent：创建了但没有open调用
1. opende: 调用open
2. headers_received: 调用send方法，头部和状态可以获得
3. loaing: 下载响应体
4. done: 完成

当xhr.redayState == 4 时代表服务器返回了所有数据

XMLHttpRequest.status

获取http状态码

获取响应内容

• responseText: 一个DomString，返回一个纯文本值，当该值为""的时候 请求还没到达send（）；nu l l 代表请求失败
• responseXML: 处理xml响应， send() 为到达或者失败的时候 null
• response: 返回响应正文

跨域问题需要注意

同一个 域，协议名，域名，端口一致 例如

1. https://www.lfweixiao.com/d01
2. https://www.lfweixiao.com/d02

ajax 工具

http://www.axios-js.com/docs/

简化了自己编写ajax，快捷开发

底部