1、Ajax(asynchronous javascript and xml)
是一种改善用户体验度的技术
实质上是利用浏览器内置的对象(ajax对象,类型是XMLHttpRequest)向服务器发送异步(ajax对象向服务器发送请求时,不会打断用户的其他操作)的请求,服务器将处理的数据返回给ajax对象,该对象将数据在页面局部更新,通过ajax向服务器发送请求
1)用ajax好处
以前的是通过浏览器向服务器发送请求
* 用户体验度差
* 数据量传输比较大,浏览器向服务器发送请求,服务器返回回来的是一个新的页面,原来的页面被销毁,信息会丢失,而ajax技术不会销毁该页面(局部刷新)
2、如何获取ajax对象
可以通过BOM、DOM(低版本的IE浏览器类型是ActiveXObject)
1)判断哪种类型的浏览器
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHttp');
}
3、XMLHttpRequest相关属性
* onreadystatechange:给ajax对象注册一个监听器(服务器返回过来的信息的后续工作在监听器里做,局部刷新)
* readyState:ajax对象与服务器的通讯状态(0(未初始化)/1/2/3/4(服务器已经响应结束处理结束))
* responseText:服务器返回的是文本类型的数据
* status:服务器响应的状态码(200/404(地址有错)/500(代码问题)...)
4、如何使用ajax对象向服务器发请求
1)get请求
*1、获取ajax对象
*2、初始化
xhr.open("get","checkUsername.do?username=zs",true/false); //true表示异步(常用),false表示同步(ajax对象向服务器发送请求,服务器响应回来之前,页面会被锁死,用户做不了其他操作)
*3、给ajax对象注册一个监听器(状态发生改变才会执行监听器中的代码块,最后才会被执行)
xhr.onreadystatechange=function(){};
*4、发送请求
xhr.send(null);
2)post请求
*1、获取ajax对象
*2、初始化(与get不同)
xhr.open("post","checkUsername.do",true/false);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); //post请求需要设置消息头(key-value),否则ajax对象传不过去
*3、给ajax对象注册一个监听器
xhr.onreadystatechange=function(){};
*4、发送请求
xhr.send("username=zs");
注:在以下情况下请使用post请求
a. 无法使用缓存文件(更新服务器上的文件或数据库)
b. 向服务器发送大量的数据(post请求没有数据量的限制)
c. 发送包含位置字符的用户输入时,post比get更稳定也更可靠
5、如果使用ajax对象向服务器发送请求,并且采用的get请求类型,那么IE浏览器有以下问题:
a. 中文乱码
导致原因:chrome与firefox浏览器采用的是utf-8格式处理中文,而IE采用的是gbk,服务器解码格式统一是 utf-8,因此IE浏览器会有中文乱码问题
解决方案:用 encodeURI(uri) 方法
将uri中的中文采用utf-8的格式处理
var uri="checkUsername.do?username="+username+"&v="+new Date().getTime();
xhr.open("get",encodeURI(uri),true); //初始化,encodeURI(uri)处理uri时采用utf-8格式输出
b. 缓存问题
如果每次发送请求的uri都未发生改变,那么浏览器不会真正的向服务器发请求,而是将缓存的数据返回给了浏览器
解决方案:
a. 采用post请求
b. 在uri地址后添加随机参数值/时间戳(将请求地址换成动态的,时间戳),如下:
xhr.open("get","checkUsername.do?username="+username+"&v="+new Date().getTime(),true); //初始化