(1)什么是ajax?
(asynchronous javascript and xml)
异步的javascript和xml
为了解决传统的web应用(当用户点击提交之后,
浏览器会销毁当前页面,然后等待服务器返回一个
新的页面)"等待-响应-等待"的弊端而创建的一种
技术。该技术的实质是,利用浏览器内置的一个
特殊的对象(XMLHttpRequest,该对象属于
BOM模型)异步地(浏览器不会销毁当前页面,用户
可以继续做其它的操作)向服务器发送请求,服务器
送回部分的数据(xml或者text的形式),在浏览器端,
可以使用这些数据部分更新页面。在整个过程当中,
浏览器无刷新。
(2)ajax对象
a,如何获得ajax对象?
ajax对象没有标准化,要获得该对象,需要区分浏览器。
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//非ie浏览器
xhr = new XMLHttpRequest();
}else{
//ie浏览器
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
}
b,ajax对象的属性
onreadystatechange:注册监听器(即给ajax对象
绑订一个事件处理函数)
responseText:获得服务器返回的文本。
responseXML:获得服务器返回的xml数据。
readyState: ajax在与服务器进行通讯时的状态值,
一共有5个,分别是0,1,2,3,4。当值为4时,表示
ajax对象已经获得了服务器返回的所有的数据。
此时,才可以使用responseText,responseXML
获得服务器返回的数据。
status:获得状态码
(3)编程
step1,获得ajax对象
var xhr = getXhr();
step2,使用ajax对象发送请求
方式一: get请求
//open(请求方式,请求地址,同步还是异步);
//true:异步,ajax对象发送请求的同时,用户可以
//对当前页面做其它的操作。
//false:同步,ajax对象发送请求的同时,会锁定
//当前页面,用户只能等待服务器的响应。
xhr.open('get',
'check_username.do?username=zs',true);
//注册一个监听器
xhr.onreadystatechange=f1;
//请求参数要添加到请求地址后面。
xhr.send(null);
方式二:post请求
xhr.open('post');
step3, 服务器处理请求,只需要返回部分的数据给客户
端。
step4,在监听器当中,编写相应的处理代码
function f1(){
//只有readyState等于4,xhr才获得了服务器
//返回的所有的数据
if(xhr.readyState == 4){
//获得服务器返回的数据
var txt = xhr.responseText; //或者responseXML
//dom操作:更新页面
...
}
}
方式二: post请求
step1,获得ajax对象
var xhr = getXhr();
step2,发送请求
xhr.open('post','check_username.do',true);
//post请求,要将请求参数放到send方法里面。
//默认情况下,xhr对象生成的请求数据包
//没有content-type消息头,需要使用
//setRequestHeader添加这样一个消息头。
xhr.setRequestHeader('content-type',
'application/x-www-form-urlencoded');
xhr.onreadystatechange=f1;
xhr.send("username=zs");
(4)编码问题
a, 链接地址当中包含了中文,如何处理?
如果链接地址包含了中文,浏览器都会对中文
按utf-8进行编码。服务器默认情况下,会使用
iso-8859-1进行解码。
解决方式:
通知服务器,按正确的编码格式进行解码:
对于tomcat,可以修改/conf/server.xml
,添加URIEncoding="utf-8"。修改完后,重新
启动服务器。
b,如果链接地址包含了中文参数值,如何处理?
<a href="some.do?name=花花"></a>
浏览器会按照打开链接所在的页面的编码格式
对中文参数值进行编码。
解决方式:
step1,添加URIEncoding="utf-8"
step2,页面统一使用utf-8编码。
c,在ajax编程当中,如何处理编码问题?
第一种情况: 发送get请求
ie使用gbk对中文参数值进行编码,其它浏览器
使用utf-8对中文参数值进行编码。
解决方式:
step1,添加URIEncoding="utf-8"
step2,使用encodeURI函数对请求地址进行
编码。
第二种情况:发送post请求
浏览器会使用utf-8对中文参数值进行编码。
解决方式:
request.setCharacterEncoding("utf-8");