ajax的请求过程
1、新建ajax对象:
IE6不兼容new XMLHttpRequest();
IE6下,ajax对象的兼容方法:
try判断的方法:
var xhr = null;
try { xhr = new XMLHttpRequest(); }
catch (e) { xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); }
window判断的方法:
var xhr = null;
if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
else { xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); }
2、发送请求的准备工作 :
通过get、post发送某个信息,但是这一步无法显示出来,相当于网址,post方式,文件信息地址在xhr.send();中
open()有3个参数:请求方式、请求地址、是否异步
如:xhr.open(‘get‘,‘1.php‘,true); xhr.open(‘post‘,‘2.post.php‘,true);
请求方式:get、post、request:
如:xhr.open(‘get‘,‘2.get.php?username=leo&age=30&‘,true);
get方式:
缓存引起无法刷新:在url?后面连接一个随机数,时间轴如:xhr.open(‘get‘,‘2.get.php?username=leo&age=30&‘ new Date().getTime(),true);
中文乱码无法显示:编码encodeURI 如:xhr.open(‘get‘,‘2.get.php?username=‘ encodeURI(‘刘伟‘) ‘&age=30&‘ new Date().getTime(),true);
如:xhr.send(‘username=刘伟&age=30‘);
post方式:
post没有缓存问题
中文无需编码
在send()前面,必须申明发送的数据类型 如:xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);
数据放在send()里面作为参数传递
地址(接口):
静态地址,如:xhr.open(‘get‘,‘1.txt‘,true);
动态地址:如:xhr.open(‘get‘,‘1.php‘,true);
是否异步:
false:同步:阻塞 前面的代码会影响后面代码的执行 很少使用同步(除非后面的操作,需要前面的数据)
true:异步:非阻塞 前面的代码不会影响后面代码的执行
3、提交发送的请求:
如:xhr.send();
4、等待服务器返回内容:
返回正确内容的条件:1、readyState值发生改变 2、readyState属性值为4 3、status属性值为200
onreadystatechange事件 当状态值发生改变时触发
readyState属性:请求状态
0 未初始化)还没有调用open()方法
1 (载入)已调用send()方法,正在发送请求
2 (载入完成)send()方法完成,已收到全部响应内容
3 (解析)正在解析响应内容
4 (完成)响应内容解析完成,可以在客户端调用了
status属性:服务器(请求资源)的状态码(http状态码)
1、消息(1字头)
2、成功(2字头) 如:200 OK
3、重定向(3字头)
4、请求错误(4字头)
5、服务器错误(5、6字头)
返回的内容
responseText:ajax返回的内容,就存在于这个属性下面,以字符串的形式