认识Ajax
Ajax应用场景
1.页面上拉加载更多数据
2.列表数据无刷新分页
3.表单项离开焦点数据验证
4.搜索框提示文字下拉列表
Ajax运行环境
Ajax技术需要运行在网站环境下才会生效，可用Node创建的服务器作为网站服务器
Ajax运行原理
普通
浏览器端——-请求——->服务器端
浏览器端<——响应——-服务器端
开发人员不可控
ajax
浏览器端——– 创建——->Ajax——-请求——->服务器端
浏览器端<——– 响应——Ajax<——-响应——-服务器端
开发人员可控
ajax相当于浏览器发送请求与接收响应的代理人，以实现不影响用户浏览页面的情况下局部更新页面数据，从而提高用户体验
Ajax实现步骤(需重启服务器)
1.创建Ajax对象
var xhr=new XMLHttpPequest()
创建ajax对象httprequest使用http请求，返回xml文件
现在在ajax请求中一般服务器端一般返回json数据
2.告诉Ajax请求地址及请求方式
xhr.open('get','http://www.example.com');
open方法，第一个参数为请求方式，第二个参数是请求地址
3.发送请求
xhr.send()
4.获取服务器端给与客户端的响应数据
xhr.onload=function(){console.log(xhr.requestseText);}
服务器端响应的数据格式
在真实的项目中，服务器端*大部分情况下会以json对象作为响应数据的格式，*当客户端拿到数据时，要将json数据和html字符串进行拼接，然后将拼接的结果展示在页面上
在http请求与响应的过程中，无论是请求参数还是相应内容，如果是对象类型，最终都会被转化成对象字符串进行传输
JSON.parse()// 将字符串转化为json对象
请求参数传递
传统网站表单提交
<form method="get" action="http://www.example.com">
<input type="text" name="username">
<input type="password" name="password">
</form>
Get请求方式
xhr.open('get','http://www.example.com');
Post请求方式
xhr.setRequestHeader('Content-Type','applicate/x-www-form-urlencoded')
xhr.send('name=zhangsan&age=20')
请求报文
在HTTP请求和响应的过程中传递的数据就是叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵循规定好的格式
客户端发送请求报文，请求方式和请求地址，服务器进行响应
请求参数的格式
1.application/x-www-form-urlencoded
name=zhangsan&sex=男
2.application/json
{name:'zhangsan',age:'20',sex:'男'}
在请求头中指定Content-type属性的值是application/json,告诉服务器当前请求参数的格式是json
JSON.stringify()//将json对象转化为json字符串
Get请求是不能提交json对象数据格式的，传统网站的表单提交也是不支持json对象数据格式的
获取服务器端响应
Ajax状态码
在创建ajax对象，配置ajax对象，发送请求，一级接收完服务器端响应数据，这个过程中的每一步骤都会对应一个数值，这个数值就是ajax状态码。
0：请求未初始化（还没有调用open）
1：请求已经建立，但是还没有发送（还没有调用send）
2：请求已发送
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已完成，可以获取并使用服务器的响应
xhr.readyState // 获取ajax状态码
获取服务器端的响应
onreadystatechange事件
当Ajax状态码发生变化时将自动触发该事件
| 区别描述 | onload事件 | onreadystatuschange事件 |
|---|---|---|
| 是否兼容IE低版本 | 不兼容 | 兼容 |
| 是否需要判断Ajax状态码 | 不需要 | 需要 |
| 被调用次数 | 一次 | 多次 |
Ajax错误处理
1.网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期的结果
可判断服务器返回的状态码，粉别进行处理。xhr.status获取http状态码
2.网络畅通，服务器端没有收到请求，返回404状态码
检查请求地址是否错误
3.网络通常，服务器能收到请求，服务器端返回500状态码
4.网络中断，请求无法发送到服务器
会触发xhr对象下面的onerror事件，再onerror事件处理函数中对错误进行处理
状态码区分
Ajax状态码：表示Ajax请求的过程状态 ajax对象返回
HTTP状态码：表示请求的处理结果 是服务器端返回的
低版本IE浏览器的缓存问题
在低版本的IE浏览器中，Ajax请求有严重的缓存问题，即在请求地址不会发生变化的情况下，只有第一次请求会真正的发送到服务器端，后续的请求会从浏览器的缓存中获取结果，即使服务器端数据更新了，客户端还是拿到的是缓存中的旧数据
解决方案：在请求地址后面加请求参数，保证每一次请求中的请求参数的值不同
xhr.open('get','http://www.example.com?t='+Math.random())
同步异步概述
同步：一个人同一时间只能做同一件事情，只有一件事情做完后，才能做另外一件事情
console.log('before')
console.log('after')
异步：一个人一件事情做了一半，转而去做另一件事情，当其他事情做完后，再回过头来继续做之前未完成的事情
异步代码虽然需要花时间去执行，但是程序不会等待异步代码执行后再继续执行后续代码，而是直接执行后续代码，当后续代码执行完后再回头看异步代码是否返回结果，如果已有返回结果，再调用事先准备好的回调函数处理异步代码执行结果
console.log('before');
setTimeout(()=>{console.log('last)},2000)
console.log('after');