Ajax
传统网站存在的问题
- 网速慢的情况下，页面加载时间长，用户只能等待
- 表单提交后，如果一项内容不合适，需要重新填写所有的表单内容，使用效果差。
- 页面跳转，就会重新加载页面，造成资源浪费，增加用户等待时间。
Ajax概述
Ajax（Asynchronous JavaScript and XML），直译为“异步的JavaScript与XML技术”，是一种创建交互式网页应用的网页开发技术，用于创建快速动态网页，由杰西·詹姆士·贾瑞特所提出。与传统的Web应用相比，Ajax通过浏览器与服务器进行少量的数据交换就可以实现网页的异步更新，在不重新加载整个网页的情况下，即可对网页进行更新。
Ajax的应用场景
- 页面上拉加载更多数据
- 列表数据无刷新分页
- 表单项离开焦点数据验证
- 搜索框提示文字下拉列表
Ajax的基本使用步骤
1.创建Ajax对象
var xhr = new XMLHttpRequest();
2.告诉Ajax请求地址以及请求方式
xhr.open('get','http://www.example.com');
3.发送请求
xhr.send();
4.获取服务器端与客户端的响应数据
//设置监听器，等到服务器发送响应之后便执行下面的函数
xhr.onload = function () {
console.log(xhr.requestText);
}
请求参数传递
- GET请求方式
xhr.open('get','http://www.baidu.com?name=zhangsan&age=13')
- POST请求方式
//设置请求头Content-Type，告诉服务器当前请求参数的格式是字符串
xhr.setRequestHeader('content-Type',
'application/x-www-form-urlencoded');
xhr.send('name=zhangsan&age=20')
请求参数的格式
1.application/x-www-form-urlencoded
name=zhangsan&age=13
2.application/json
{name:'zhangsan',age:'20',sex:'男'}
服务器一般是以JSON对象传输数据，以下是JSON对象的两个重要方法：
- parse() 将字符串转换成json对象
- stringify() 将json对象转换成json字符串
注意：get请求不能提交json对象数据格式，传统网站的表单提交也不支持json对象数据格式的。
获取服务器端的响应
Ajax状态码
在创建ajax对象，配置ajax对象，发送请求，以及接收服务器端的响应数据，这个过程中的每一个步骤都会对应一个数值，这个就是ajax状态码。
0：请求未初始化（还没有调用open()）
1：请求已经建立，但是还没有发送（还没有调用send()）
2：请求已经发送
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已经完成，可以获取并使用服务器的响应了
xhr.readyState //获取Ajax状态码
var xhr = new XMLHttpRequest();
//0 已经创建了还没有初始化
console.log(xhr.readyState);
xhr.open('get','http://www.baidu.com');
//1 请求已经建立，但还没发送
console.log(xhr.readyState);
//当Ajax状态码改变后触发,必须要写在send之前
xhr.onreadyStateChange = function (){
//2 请求已经发送
//3：请求正在处理中，通常响应中已经有部分数据可以用了
//4：响应已经完成，可以获取并使用服务器的响应了
console.log(xhr.readyState);
}
xhr.send();
总结： 获取服务端响应的两种方法
1.利用onload
xhr.send();
xhr.onload = function () {
console.log(xhr.requestText);
}
2.通过readyState状态码
xhr.onreadyStateChange = function (){
if(xhr.readyState == 4) {
console.log(xhr.responseText);
}
}
xhr.send();
两种获取服务器端的区别
| 区别描述 | onload事件 | onReadyStateChange事件 |
|---|---|---|
| 是否兼容IE低版本 | 不兼容 | 兼容 |
| 是否要判断Ajax状态码 | 不需要 | 需要 |
| 被调用次数 | 一次 | 多次 |
Ajax错误处理
1.网络畅通，服务器能接收到请求，服务端返回的结果不是预期结果
- 可以判断服务器端返回的状态码，分别进行处理，xhr.status获取http状态码
2.网络畅通，服务器端没有接受到请求，返回404状态码 - 检查请求地址是否出错
3.网络畅通，服务器端能接收到请求，返回500状态码 - 服务器出错，找后端程序员沟通
4.网络中断，请求无法发送到服务器 - 会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。
低版本IE浏览器的缓存问题
问题：在低版本IE浏览器中，Ajax请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果，即使服务器端的数据更新了，客户端拿到的依然是缓存中的旧数据。
解决方案：在请求地址的后面加请求参数，保证每一次的请求参数的值不同。
xhr.open('get','http://www.baidu.com'+Math.random());
