一、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);
}
}
网友评论