一、ajax介绍
ajax:Asynchronous(异步) JavaScript and XML。
ajax的含义:通过js语法实现的异步网络请求技术。实现页面的局部更新(传统的form表单请求数据a标签请求数据等手段)这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
异步:当代码执行到耗时操作时,先向后执行其他代码,等耗时操作处理完毕,再通过回调函数来处理耗时操作的结果。
同步:当代码执行到耗时操作时,代码暂停执行,等耗时代码执行完毕,再继续向后执行。
二、创建并配置ajax
1、创建xhr对象
var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
2、请求配置参数:open()
xhr.open('GET','./data.json',true);
//第一个参数:设置请求方法:GET/POST/PUT...
//第二个参数:请求路径:相对路径(如果请求的是同一台服务器的文件,使用相对路径'./data.json')、
//绝对路径(如果请求的是服务器中的某一个数据接口,则需要使用绝对路径'http://www.baidu.xom/data/json'),
//如果请求参数是GET则在路径后面拼接所传参数'./data.json?username='+encodeURI('张三'),
//接口和参数之间使用“?”链接,参数和参数 之间使用“&”链接,key值和value值之间使用“=”链接。
//第三个参数:配置请求是否为异步请求,默认不给值时为true,表示异步请求,false为同步请求
3、发送请求:send()
xhr.send(null);
//如果请求方式是POST,则在这里放所传递的参数
4、设置请求状态:readystatechange事件在每次请求状态发生改变,都会触发该事件。
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//当readyState属性值为4,且status属性值为200-300之间(一般是200)表示服务器已经把数据返回回来。
//从xhr下的responseText属性中拿到服务器返回的值
console.log(xhr.responseText);
}
}
如果传递的参数中含有中文需要对中文进行转码,encodeURI()只能对中文进行转码。
var str=encodeURI('张三');
XHR 对象的 readyState 属性:
- 0:未初始化。尚未调用 open() 方法。
- 1:启动。已经调用 open() 方法,但尚未调用 send() 方法。
- 2:发送。已经调用 send() 方法,但尚未接收响应。
- 3:接收。已经接收到部分响应数据。
- 4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了
XHR对象的属性:
*responseText: 作为响应主体被返回的文本。
*responseXML: 如果响应的内容类型是 “text/xml”或”application/xml”,这个属性中将保存包含着相应数据的XML DOM文档。
- status: 响应的HTTP状态。
- statusText: HTTP状态的说明。
接受响应之后,第一步是检查 status 属性,以确定响应已经成功返回。状态码: - 200 表示成功。
- 304 表示请求的资源并没有修改,可以直接使用浏览器中缓存的版本,响应也是有效的。
- 500表示服务器错误。
三、请求参数注意事项
请求服务器,服务器会有数据缓存,如果两次请求一样,第二次会直接使用缓存中的数据。
解决方法:在传递参数时在URL后面添加一个随机数,Math.random()。这种方法也不会对服务器造成影响。
ajax发送的get请求,浏览器会首先获取到请求路径,用这个路径去匹配缓存中的请求记录,如果记录中存在一个一模一样的请求路径,则把记录中的缓存的服务器返回值发送回来,只有在没有找到对应记录的情况下,才会向服务器请求数据。
解决get请求缓存问题:在请求的路径后拼接一个随机数为接口参数,这样每次发起的请求路径会因为这个随机数变得不同,浏览器在记录中无法找到这条记录,因此就会从服务器获取最新的数据了。
经验:密码中有&或者=会导致密码失效
四、使用ajax请求xml和json的不同
//1、创建请求对象
var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
//2、配置请求参数
xhr.open('GET','./data.xml',true);
//xhr.open('GET','./data.json',true);
//3、发送请求
xhr.send(null);
//4、监听请求状态
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//获取json格式的数据,通过responseText属性获取的,拿到的数据时字符串类型,
//可以通过parse方法把字符串格式的json数据转为对象类型。
console.log(xhr.responseText);
//把json数据转为对象类型的数据
var obj=JSON.parse(xhr.responseText);
console.log(obj);
//获取xml格式的数据
//如果请求的数据时xml格式。可以通过responseXML属性获取到该数据的DOM结构,有利于数据解析。可以用节点获取数据。
console.log(xhr.responseXML);
}
}