初识ajax

Posted 2023-03-19

参考技术A

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高级程序设计》
饥人谷前端教程