1.ajax(asynchronous javascript and xml)
asynchronous:异步地
(1)ajax是什么?
是一种用来改善"用户体验"的技术,其实质是
利用浏览器内置的一个特殊对象(XMLHttpRequest,
即ajax对象)异步地向服务器发送请求,服务器返回
部分数据(一般不需要返回完整的页面),浏览器利用
这些数据对当前页面做局部更新。整个过程,页面
无刷新,不打断用户的操作,也会提升系统的性能。
注:
异步地:当ajax对象向服务器发送请求时,
浏览器不会销毁当前页面,用户仍然
可以对当前页面做其它操作。
(2)如何获得ajax对象
需要区分浏览器(没有标准化)
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr =
new ActiveXObject('MicroSoft.XMLHttp');
}
return xhr;
}
(3)ajax对象几个重要属性
1)onreadystatechange:绑订一个事件处理函数,
该函数会处理readystatechange事件。
注:当ajax对象的readyState属性值发生了
变化(比如从0变成了1),就会产生readystatechange
事件。
2)readyState:有5个值,分别是0,1,2,3,4,表示
ajax对象与服务器通信的状态(进展程度),当值为
4时,表示ajax对象已经获得了服务器返回的所有的
数据。
3)responseText:获得服务器返回的文本。
4)responseXML:获得服务器返回的xml文档。
5)status:获得状态码。
(4)编程步骤
step1,获得ajax对。
比如:
var xhr = getXhr();
step2,发送请求。
发get请求
xhr.open('get',
'check_uname.do?username=king',true);
xhr.onreadystatechange=f1;
xhr.send(null);
注:
第三个参数如果为true,表示异步地发送请求;
如果为false,表示同步地发送请求(当ajax对象
发送请求时,浏览器会锁定当前页面)。
发post请求
xhr.open('post','check_uname.do',true);
xhr.setRequestHeader('content-type',
'application/x- www-form-urlencoded');
xhr.onreadystatechange=f1;
xhr.send('username=king');
注:因为按照http协议要求,post请求的请求
数据包里面要包含有"content-type"消息头。
step3,编写服务器端的程序(一般只需要返回部分数据)。
step4,编写事件处理函数。
function f1(){
if(xhr.readyState == 4 &&
xhr.status == 200){
var txt = xhr.responseText;
更新页面...
}
}
asynchronous:异步地
(1)ajax是什么?
是一种用来改善"用户体验"的技术,其实质是
利用浏览器内置的一个特殊对象(XMLHttpRequest,
即ajax对象)异步地向服务器发送请求,服务器返回
部分数据(一般不需要返回完整的页面),浏览器利用
这些数据对当前页面做局部更新。整个过程,页面
无刷新,不打断用户的操作,也会提升系统的性能。
注:
异步地:当ajax对象向服务器发送请求时,
浏览器不会销毁当前页面,用户仍然
可以对当前页面做其它操作。
(2)如何获得ajax对象
需要区分浏览器(没有标准化)
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr =
new ActiveXObject('MicroSoft.XMLHttp');
}
return xhr;
}
(3)ajax对象几个重要属性
1)onreadystatechange:绑订一个事件处理函数,
该函数会处理readystatechange事件。
注:当ajax对象的readyState属性值发生了
变化(比如从0变成了1),就会产生readystatechange
事件。
2)readyState:有5个值,分别是0,1,2,3,4,表示
ajax对象与服务器通信的状态(进展程度),当值为
4时,表示ajax对象已经获得了服务器返回的所有的
数据。
3)responseText:获得服务器返回的文本。
4)responseXML:获得服务器返回的xml文档。
5)status:获得状态码。
(4)编程步骤
step1,获得ajax对。
比如:
var xhr = getXhr();
step2,发送请求。
发get请求
xhr.open('get',
'check_uname.do?username=king',true);
xhr.onreadystatechange=f1;
xhr.send(null);
注:
第三个参数如果为true,表示异步地发送请求;
如果为false,表示同步地发送请求(当ajax对象
发送请求时,浏览器会锁定当前页面)。
发post请求
xhr.open('post','check_uname.do',true);
xhr.setRequestHeader('content-type',
'application/x- www-form-urlencoded');
xhr.onreadystatechange=f1;
xhr.send('username=king');
注:因为按照http协议要求,post请求的请求
数据包里面要包含有"content-type"消息头。
step3,编写服务器端的程序(一般只需要返回部分数据)。
step4,编写事件处理函数。
function f1(){
if(xhr.readyState == 4 &&
xhr.status == 200){
var txt = xhr.responseText;
更新页面...
}
}
1.编码问题
(1)get请求
1)乱码问题产生的原因
ie浏览器会使用"gbk"对中文参数进行编码,
而其它浏览器会使用"utf-8"进行编码,服务器端
默认会使用"iso-8859-1"来解码。
2)解决方式
step1,服务器端统一使用"utf-8"来解码。
修改 /conf/server.xml,添加
<Connector URIEncoding="utf-8"/>
注:
对于get请求,会使用"utf-8"来解码。
step2,使用encodeURI函数对请求参数进行编码。
注:该函数会使用"utf-8"来对参数进行编码。
(2)post请求
1) 乱码问题产生的原因
浏览器会使用"utf-8"对中文参数进行编码。
服务器端默认会使用"iso-8859-1"来解码。
2)解决方式
request.setCharacterEncoding("utf-8");
2.缓存问题
(1)什么是缓存问题
ie浏览器在发送get请求时,会比较请求地址是否
访问过,如果访问过,则不再发送新的请求,而是
显示之前访问过的结果。
(2)解决方式
1)方式一
在请求地址后面添加一个随机数。
比如 getNumber.do? + Math.random();
2)方式二
改用post请求。