[TOC] # Ajax ### 1.步骤 <br> >[warning]1、创建 AJAX 对象； `let ajax= new XMLHttpRequest()` 2、设置请求路径，请求方式(get ,post)等； ` ajax.open('GET', '/get_data');` 3、绑定监听状态改变的处理函数，在处理函数可获取响应数据； ` ajax.onreadystatechange = ()=>{ // 获取响应回来的数据 } };` 4、发送请求。 `ajax.send()` ***** **创建Ajax对象会有兼容性的问题** ``` function createAjax() { var ajax; try { // 非 IE ajax = new XMLHttpRequest(); } catch (e) { // IE ajax = new ActiveXObject('Microsoft.XMLHTTP'); } return ajax; } ``` <br> ### 2.特点 **异步请求，局部刷新**。 >同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。 > >异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。 > >局部刷新指刷新页面部分内容。 **注意** **注意事项**： >>ajax 这门技术，必须要在网络协议环境下才可以使用。不能把网页直接拖入到浏览器执行，必须在 web 服务器模式下访问。 >> >>总结：ajax对我们来讲就是**书写一段js代码来向服务器发送请求(异步)**。 ### 3.ajax对象的属性 AJAX 对象有 4 个属性： ***** * readyState 总共有 5 个状态值，分别为 0 ~ 4，每个值代表了不同的含义：onreadystatechange * 0：初始化，AJAX 对象还没有完成初始化 * 1：载入，AJAX 对象开始发送请求 * 2：载入完成，AJAX 对象的请求发送完成 * 3：解析，AJAX 对象开始读取服务器的响应 * 4：完成，AJAX 对象读取服务器响应结束 * status 表示响应的 HTTP 状态码，常见状态码如下： * 200：成功 * 302：重定向 * 404：找不到资源 * 500：服务端错误 * responseText 获得字符串形式的响应数据。 * responseXML 获得 XML 形式的响应数据。 ***** <br> **总结** >[danger]在状态改变的处理函数一般针对** readyState == 4 且 status == 200** 的情况才处理，再根据后台返回的数据类型决定从 responseText 或者 responseXML 获取服务器响应回去来的数据。 <br> ### 4.避免缓存的方法 **避免缓存问题的写法**： AJAX 能提高页面载入的速度主要的原因是通过 AJAX 减少了重复数据的载入，也就是说在载入数据的同时将数据缓存到内存中，一旦数据被加载其中，只要我们没有刷新页面，这些数据就会一直被缓存在内存中，当我们提交的 URL 与历史的 URL 一致时，就不需要提交给服务器，也就是不需要从服务器上面去获取数据，虽然这样降低了服务器的负载提高了用户的体验，但是我们不能获取最新的数据。为了保证我们读取的信息都是最新的，我们就需要禁止他的缓存功能。解决方式有以下几种： * 在 URL 后面加上一个随机数：Math.random()。 * 在 URL 后面加上时间搓：new Date().getTime()。 * 在使用 AJAX 发送请求前加上 ajax.setRequestHeader('Cache-Control', 'no-cache')。