初识ajax
ajax是一种技术方案,但并不是一种新技术。它依赖的是现有的CSS/HTML/JavaScript,而其中最核心的依赖就是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应,实现在页面不刷新的情况下和服务端进行数据交互。浏览器升级之后,出现了fetch,也可以认为是ajax的一种实现。(兼容性差)
使用XMLHttpRequest对象来发送一个Ajax请求。
status:200-300表示正常状态码。
status:404表示这个文件不存在。
status:503服务器收到了请求但是内部报错了。
status:304表示这个数据是有缓存的。
readyState:存有XMLHttpRequest的状态。从0~4发生变化
只要readyState属性的值由一个值变成另一个值,都会触发一次readystatechange事件。必须在调用open()之前指定onreadystatechange事件处理程序才能保证跨浏览器兼容性。与其他事件不同的是,这里没有向readystatechange事件处理程序中传递event对象,必须通过XHR对象本身来确定下一步该怎么做。
在接受响应之前,还可以调用abort()方法来取消异步请求,
调用这个方法之后,XHR对象会停止触发事件,而且也不在允许访问任何与响应有关的对象属性。
XMLHttpRequest标准又分为Level 1和Level 2。
1.缺点:
此属性可以设置HTTP请求的时限。与之相关的是timeout()事件,用来指定回调函数。
timeout属性表示请求在等待多少毫秒之后就终止,再给timeout设置一个数值后,如果在规定的时间内浏览器还没有接收到响应,那么就会触发timeout事件,进而会调用ontimeout事件处理程序。如果在超时终止请求之后再访问status属性,就会导致错误。为避免浏览器报告错误,可以将检查status属性的语句封装在一个try-catch语句中。
ajax直接传送FormData对象与点击submit提交网页表单的效果是一样的。
使用FormData的优点:不必明确地在XHR对象上设置请求头部,XHR能够识别传入的数据类型是FormData的实例,并配置适当的头部信息。
假定files是一个"选择文件"的表单元素(input[type="file"]),将它装入FormData对象,之后发送FormData即可实现文件的上传。
作用:指定xhr.response的数据类型。
作用:获取response数据
作用:表示发送数据。
xhr.send(data)的参数data可以是以下几种类型:
阮一峰:XMLHttpRequest Level 2 使用指南
你真的会使用XMLHttpRequest么?
《javascript高级程序设计》
饥人谷前端教程