首先Ajax的运行环境必须实在服务器下的
Ajax使用步骤
- 首先需要创建一个Ajax对象
var xhr = new XMLHttpRequest()
- 告诉Ajax对象以什么方式发送请求,要想哪发送请求
xhr.open('get',url)
- 发送请求
xhr.send()
- 获取服务器端响应客户端的数据
xhr.onload=()=>{ xhr.responseText }
向服务器端发送数据 与 处理服务器端的响应
- 使用get传递请求参数:将参数放到请求地址的后面一起传递过去,
xhr.open('get', 'http://localhost:3000/get?username=zhangsan&age=25);
- 使用post传递参数:使用post传递参数需要设置参数的格式类型,
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
,这是传递字符串类型的参数,传递JSON数据类型的是:xhr.setRequestHeader('Content-Type','application/json');
,传递的参数需要放在send()
中,传递字符串类型的将参数的格式转为与get方式的参数相同后再放入send()中,使用JSON传递的参数需要先将其转为字符串类型的,然后再传xhr.send(JSON.stringify({name:'lisi',age:50}));
- 处理服务器端的响应:如果传过来的是字符串可以直接使用,如果是JSON类型的需要使用JSON.parse(xhr.reponseText)进行处理后再使用,否则默认的会是字符串类型
Ajax状态码与错误处理
Ajax状态码,状态码有5个,0,1,2,3,4。使用xhr.redayState可以获取Ajax的状态码(方法不用带括号)
0:创建好了Ajax对象,还未初始化,就是还没调用open()
1:请求已经连接,但是还没有发送,就是还没有调用send()
2:请求以进发送
3:请求正在处理中,通常响应中已经有部分数据可以用了
4:响应已经完成,可以获取并使用服务器的响应了
onreadystatechange事件,当Ajax状态码发生变化时自动触发该事件,再事件处理函数中,可以获取状态码并对其进行判断,当状态吗为4时就可以通过xhr.responseText获取服务器端的响应数据了
xhr.readystatechange=function(){if(xhr.readyState==4){console.log(xhr.responseText)}};
Ajax错误处理
1,网络畅通,服务器端能接受到请求,服务器端返回的结果不是预期结果。处理:可以判断服务器端返回的状态码,分别进行处理,xhr.status获取http状态码
,注意是HTTP状态码
2,网络畅通,服务器端没有接受到请求,返回404状态码。处理检查请求地址是否错误
3,网络畅通,服务器端能接受到请求,服务器端返回500状态码。处理服务器端发生错误,找后端程序员进行沟通
4,网络中断,请求无法发送到服务器端。处理会触发xhr对象下面的onerror事件,在onerror事件处理函数中对错误进行处理 xhr.onerror=function(){alert('网络中断,请联网后再试')}
低版本IE浏览器的缓存问题
**问题:**在低版本的 IE 浏览器中,Ajax 请求有严重的缓存问题,即在请求地址不发生变化的情况下,只有第一次请求会真正发送到服务器端,后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了,客户端依然拿到的是缓存中的旧数据
**解决方案:**在请求地址的后面加请求参数,保证每一次请求中的请求参数的值不相同。
xhr.open('get', 'http://www.example.com?t=' + Math.random());