Ajax是一种技术方案,并不是什么新技术,Ajax请求使用XmlHttpRequest对象发送,

XmlHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信。

最早,微软在IE 5引进了这个接口。因为它太有用,其他浏览器也模仿部署了,ajax操作因此得以诞生。

XmlHttpRequest Level1主要属性

  * xhr.readyState:XMLHttpRequest对象的状态,等于4表示数据已经接收完毕。

  * xhr.status:服务器返回的状态码,等于200表示一切正常。

  * xhr.responseText:服务器返回的文本数据

  * xhr.responseXML:服务器返回的XML格式的数据

  * xhr.statusText:服务器返回的状态文本。

主要缺点

  • 受同源策略的限制,不能发送跨域请求;

  • 不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据;

  • 在发送和获取数据的过程中,无法实时获取进度信息,只能判断是否完成;

XmlHttpRequest Level2主要属性

在Level1的基础上增加以下内容

* xhr.timeout: 设置HTTP请求的时限,最长等待时间设为3000毫秒。过了这个时限,就自动停止HTTP请求

配套的回调函数 xhr.ontimeout = function(event){alert('请求超时!');}

* var formData = new FormData();formData.append('username', '张三');xhr.send(formData); 新加formData对象,可以直接传formData

* formData.append('files[]', files[i]);  xhr.send(formData); 上传文件

* xhr.open('GET', 'http://other.server/and/path/to/script'); 跨域资源共享CORS(IE9以上的支持)

* 接收二进制数据,参见阮老师的这篇文章

* 进度信息,包括上传的进度信息和下载的进度信息

xhr.onprogress = updateProgress; 下载

xhr.upload.onprogress = updateProgress;上传

function updateProgress(event) {

    if (event.lengthComputable) {

      var percentComplete = event.loaded / event.total;

    }

}

  * load事件:传输成功完成。

  * abort事件:传输被用户取消。

  * error事件:传输中出现错误。

  * loadstart事件:传输开始。

  * loadEnd事件:传输结束,但是不知道成功还是失败。

Level2新功能

  • 可以发送跨域请求,在服务端允许的情况下;

  • 支持发送和接收二进制数据;

  • 新增formData对象,支持发送表单数据;

  • 发送和获取数据时,可以获取进度信息;

  • 可以设置请求的超时时间;

xmlHttpRequest的使用

1、设置requestheadervar client = new XMLHttpRequest();

client.open('GET', 'demo.cgi');
client.setRequestHeader('X-Test', 'one');//必须在open之后,send之前,第一个参数不区分大小写,Content-Type/content-Type/content-type
client.setRequestHeader('X-Test', 'two'); //最终的值不会采用覆盖override的方式,而是采用追加append的方式,
最终request header中"X-Test"为: one, two
client.send();

2、获取ResponseHeader

getAllResponseHeaders
getResponseHeader(header) //只能拿到限制以外(即被视为safe)的header字段,而不是全部字段

3、设定response数据类型

level1  overrideMimeType
level2 xhr.responseType

4、获取response数据

xhr.response  ""
xhr.responseText ""
xhr.responseXML null

5、追踪状态

利用onreadystatechange事件
0 UNSENT (初始状态,未打开) 此时xhr对象被成功构造,open()方法还未被调用
1 OPENED (已打开,未发送) open()方法已被成功调用,send()方法还未被调用。注意:只有xhr处于OPENED状态,才能调用xhr.setRequestHeader()xhr.send(),否则会报错
2 HEADERS_RECEIVED(已获取响应头) send()方法已经被调用, 响应头和响应状态已经返回
3 LOADING (正在下载响应体) 响应体(response entity body)正在下载中,此状态下通过xhr.response可能已经有了响应数据
4 DONE (整个数据传输过程结束) 整个数据传输过程结束,不管本次请求是成功还是失败

6、设置超时时间

xhr.timeout

7、获取上传下载进度

8、可以发送的数据类型

  • ArrayBuffer

  • Blob

  • Document

  • DOMString

  • FormData

  • null

 
  • 如果data是 Document 类型,同时也是HTML Document类型,则content-type默认值为text/html;charset=UTF-8;否则为application/xml;charset=UTF-8

  • 如果data是 DOMString 类型,content-type默认值为text/plain;charset=UTF-8

  • 如果data是 FormData 类型,content-type默认值为multipart/form-data; boundary=[xxx]

  • 如果data是其他类型,则不会设置content-type的默认值

9、关于xhr.withCredentials

withCredentials默认为false,跨域时默认不能携带认证信息,例如Cookie,若需要,则设置为true,同时服务端Access-Control-Allow-Credentials要设置为true

Access-Control-Allow-Origin设置为请求页面的域名,不能写*

10、

onreadystatechange 每当xhr.readyState改变时触发;但xhr.readyState由非0值变为0时不触发。
onloadstart 调用xhr.send()方法后立即触发,若xhr.send()未被调用则不会触发此事件。
onprogress xhr.upload.onprogress在上传阶段(即xhr.send()之后,xhr.readystate=2之前)触发,每50ms触发一次;xhr.onprogress在下载阶段(即xhr.readystate=3时)触发,每50ms触发一次。
onload 当请求成功完成时触发,此时xhr.readystate=4
onloadend 当请求结束(包括请求成功和请求失败)时触发
onabort 当调用xhr.abort()后触发
ontimeout xhr.timeout不等于0,由请求开始即onloadstart开始算起,当到达xhr.timeout所设置时间请求还未结束即onloadend,则触发此事件。
onerror 在请求过程中,若发生Network error则会触发此事件(若发生Network error时,上传还没有结束,则会先触发xhr.upload.onerror,再触发xhr.onerror;若发生Network error时,上传已经结束,则只会触发xhr.onerror)。注意,只有发生了网络层级别的异常才会触发此事件,对于应用层级别的异常,如响应返回的xhr.statusCode4xx时,并不属于Network error,所以不会触发onerror事件,而是会触发onload事件。

11、事件触发顺序

    1. 触发xhr.onreadystatechange(之后每次readyState变化时,都会触发一次)

    2. 触发xhr.onloadstart
      //上传阶段开始:

    3. 触发xhr.upload.onloadstart

    4. 触发xhr.upload.onprogress

    5. 触发xhr.upload.onload

    6. 触发xhr.upload.onloadend
      //上传结束,下载阶段开始:

    7. 触发xhr.onprogress

    8. 触发xhr.onload

    9. 触发xhr.onloadend

最新文章

  1. PHP中curl的CURLOPT_POSTFIELDS参数使用细节
  2. fzuoop期中练习
  3. VS 创建虚拟目录失败,映射到其他文件夹!
  4. python 程序构架
  5. go中方法的接收者是值或者指针的区别
  6. 小韦系统装工行网银U盾驱动的方法
  7. 2-1-1 GDI
  8. 一条结合where、group、orderby的linq语法
  9. Triangles
  10. Android学习【Android内核编译流程和错误笔记】
  11. 算法导论之python实现插入排序
  12. BOM 浏览器对象模型学习
  13. lua元表
  14. UOJ207:共价大爷游长沙
  15. linux查看日志文件内容命令tail、cat、tac、head、echo
  16. 元组tuple插入字符串的方式
  17. python3 练手实例1 计算三角形周长和面积
  18. 物联网框架ServerSuperIO.Core(.netcore)跨平台,一套设备驱动通吃嵌入式、上位机、云服务
  19. Vue 组件&组件之间的通信 父子组件的通信
  20. linux下c程序 daemon、fork与创建pthread的顺序问题

热门文章

  1. WPF 打印实例
  2. android Camera2 API使用详解
  3. php将秒转换为 分:秒 函数
  4. C# GC Finalizer IDispseable,.Net的垃圾回收机制
  5. 使用NAudio实现Wav转Mp3
  6. Windows实用小工具-问题步骤记录器
  7. 用汇编语言给XP记事本添加“自动保存”功能 good
  8. Delphi中inherited问题
  9. 10个有趣的javascript和css库(2019年5月最新)
  10. Angular4初学