Ajax是什么?
Ajax是JavaScript基于XMLHttpRequest对象向服务端发送异步请求,并且能获取和处理后端返回的数据,它可以实现页面的局部刷新。Ajax是异步发送请求的,所以不阻碍用户的其他操作,具有快速的响应能力,页面无刷新或者局部刷新提高了用户的体验度,而无需加载完整的页面也减轻了服务器和宽带的压力,与JSON轻量级的存储方式结合,方便对数据的解析,并且Ajax拥有众多库,如jQuery AJAX,Axios,上手方便。
Ajax的工作流程?
- JS通过XMLHttpRequest向后端发送异步请求。
- 服务器端接受请求,处理并返回数据。
- JS通过XMLHttpRequest获取并解析服务器端,返回的数据内容。
- js通过动态更新DOM或者其他。
Ajax有哪些弊端?
- 不支持浏览的后退功能,破坏浏览器后退机制。
- 浏览器不兼容,在浏览器下需做兼容处理。
- 因为数据是由后台返回,对搜索引擎优化不友好。
- 使用不当,会增大网络的请求数量,需要配合防抖 ,节流等性能优化。
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()