Ajax面试

Ajax是什么？

Ajax是JavaScript基于XMLHttpRequest对象向服务端发送异步请求，并且能获取和处理后端返回的数据，它可以实现页面的局部刷新。Ajax是异步发送请求的，所以不阻碍用户的其他操作，具有快速的响应能力，页面无刷新或者局部刷新提高了用户的体验度，而无需加载完整的页面也减轻了服务器和宽带的压力，与JSON轻量级的存储方式结合，方便对数据的解析，并且Ajax拥有众多库，如jQuery AJAX,Axios,上手方便。

Ajax的工作流程？

1. JS通过XMLHttpRequest向后端发送异步请求。
2. 服务器端接受请求，处理并返回数据。
3. JS通过XMLHttpRequest获取并解析服务器端，返回的数据内容。
4. js通过动态更新DOM或者其他。

Ajax有哪些弊端？

1. 不支持浏览的后退功能，破坏浏览器后退机制。
2. 浏览器不兼容，在浏览器下需做兼容处理。
3. 因为数据是由后台返回，对搜索引擎优化不友好。
4. 使用不当，会增大网络的请求数量，需要配合防抖 ，节流等性能优化。

Ajax的实现

创建Ajax对象(初始化对象)

var xhr=new XMLHttpRequest()

 

调用open方法打开TCP连接

xhr.open("请求方式","请求地址?key=value&key2=value2",true(异步)/false(同步))

 设置onreadystatechange事件

//当Ajax的状态码发生改变时即可出发该事件 可多次调用
xhr.onreadystatechange=function(){
xhr.readyState//获取Ajax的状态码
//Ajax的状态码有0~4
//0---刚初始化xhr
//1---调用了open方法，打开了TCP连接，请求未发送
//2---响应头回来了，请求发送了
//3---响应正文接收到一部分，请求处理中
//4----响应正文全部验收完毕
//xhr.status属性可获取HTTP状态码，服务器端返回
//xhr.status==200(状态请求成功)
}

发送请求

xhr.send()