ajax概述
它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验。
运行环境
ajax技术需要运行在网站环境中才能生效。
运行原理
ajax相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验。
实现步骤
创建ajax对象
var xhr=new XMLHttpRequest()
告诉ajax请求地址和请求方式
xhr.open('请求方式','请求地址')
发送请求
xhr.send()
获取服务端给予客户端响应的数据
xhr.onload=function(){
console.log(xhr.responseText)
}
服务端响应的格式
在http请求与响应中,无论是请求参数还是响应内容,如果是对象类型,最终都会被转化为对象字符串进行传输。
JSON.parse()//将json字符串转化为json对象
请求参数传递
GET请求方式
xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');
POST请求方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('name=zhangsan&age=20');
请求报文格式
1.当使用的请求方式是post请求时,需要设定请求的类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
2.当请求的参数是一个json字符串类型的,设定的请求类型
xhr.setRequestHeader('Content-Type','application/json')
注:get请求是不能提交json对象数据格式的,传统网站的表单提交也是不支持json对象数据格式的。
获取服务端响应
ajax状态码
在创建ajax对象,配置ajax对象,发送请求,以及接收完服务器端响应数据,这个过程中的每一个步骤都会对应一个数值,这个数值就是ajax状态码。
0:请求未初始化(还没有调用open())
1:请求已经建立,但是还没有发送(还没有调用send())
2:请求已经发送
3:请求正在处理中,通常响应中已经有部分数据可以用了
4:响应已经完成,可以获取并使用服务器的响应了
xhr.readyState // 获取Ajax 状态码
onreadystatechange 事件
当 Ajax 状态码发生变化时将自动触发该事件
在事件处理函数中可以获取 Ajax 状态码并对其进行判断,当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了.
// 当Ajax状态码发生变化时
xhr.onreadystatechange = function () {
// 判断当Ajax状态码为4时
if (xhr.readyState == 4) {
// 获取服务器端的响应数据
console.log(xhr.responseText);
}
}
两种获取服务端响应方式的区别
Ajax 错误处理
1.网络畅通,服务器端能接收到请求,服务器端返回的结果不是预期结果。
可以判断服务器端返回的状态码,分别进行处理。xhr.status 获取http状态码
2.网络畅通,服务器端没有接收到请求,返回404状态码。
检查请求地址是否错误。
3.网络畅通,服务器端能接收到请求,服务器端返回500状态码。
服务器端错误,找后端程序员进行沟通。
4.网络中断,请求无法发送到服务器端。
会触发xhr对象下面的onerror事件,在onerror事件处理函数中对错误进行处理