一、使用Ajax
1、什么是ajax?是一种用来改善用户体验的技术,本质上是利用浏览器提供的一个
特殊对象(XMLHttpRequest对象,一般也可以称之为ajax对象)向
服务器发送异步请求;服务器返回部分数据,浏览器利用这些数据
对当前页面做部分更新;整个过程,页面无刷新,不打断用户的操作。
注:
异步请求,指的是,当ajax对象发送请求时,浏览器不会销毁
当前页面,用户仍然可以对当前页面做其它操作
2、获取ajax对象
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//非ie浏览器
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('MicroSoft.XMLHttp');
}
return xhr;
}3、ajax对象的几个重要属性onreadystatechange: 绑订事件处理函数,用来处理readystatechange
事件。
注:当ajax对象的readyState属性值发生了任何的改变,比如
从0变成了1,就会产生readystatechange事件。
readyState:有5个值(分别是0,1,2,3,4),用来获取ajax对象与服务
器通信的进展。其中,4表示ajax对象已经获得了服务器返回的所
有的数据。
responseText:获得服务器返回的文本数据。
responseXML:获得服务器返回的xml数据。
status:获得状态码。
4、编程步骤step1. 获得ajax对象
比如 var xhr = getXhr();
step2. 调用ajax对象的方法,发送请求
方式一 get请求
xhr.open('get','check.do?adminCode=king',true);
xhr.onreadystatechange = f1;
xhr.send(null);
注:
true: 异步 (浏览器不会销毁当前页面,用户仍然可以
对当前页面做其它操作)
false:同步 (浏览器不会销毁当前页面,但是会锁定当前
页面,用户不能够对当前页面做任何操作)。
方式二 post请求
xhr.open('post','check.do',true);
xhr.setRequestHeader('content-type',
'application/x-www-form-urlencoded');
xhr.onreadystatechange = f1;
xhr.send('adminCode=king');
注(了解):
按照http协议要求,如果发送的是post请求,应该包含有
content-type消息头,但是,ajax默认不会带这个消息头,
所以,需要调用setRequestHeader方法来添加这个消息头。
step3. 编写服务器端的程序
注:不需要返回完整的页面,只需要返回部分数据。
step4. 编写事件处理函数
if(xhr.readyState == 4 &&
xhr.status == 200){
//ajax对象已经获得了服务器返回的所有数据,
//而且服务器处理正确。
var txt = xhr.responseText;
页面更新...
}
二、Ajax的使用问题1. 编码问题
(1)get请求
1)为什么会有乱码?
ie浏览器提供的ajax对象,在发送get请求时,会对中文参数
值使用"gbk"来编码,其它浏览器会使用"utf-8"来编码。服务器
端默认会使用"iso-8859-1"来解码。所以会有乱码。
2)如何解决?
step1. 服务器端,统一使用"utf-8"来解码。
可以修改
step2.客户端,使用encodeURI函数对中文参数值进行编码。
注:
encodeURI函数是javascript内置的函数,会使用"utf-8"
来编码。(
//step2. 发送请求
var uri = 'check.do?adminCode='
+ $F('adminCode');
xhr.open('get',encodeURI(uri),true);)
(2)post请求
1)为什么会有乱码?
浏览器提供的ajax对象在发送post请求时,对中文参数值会使用
"utf-8"来编码,而服务器端会使用"iso-8859-1"来解码。(在servlet添加request的方法)
2)如何解决?
request.setCharacterEncoding("utf-8")