该用户从未签到
|
Ajax
1、ajax是什么?
asynchronous javascript and xml(异步的
javascript和xml)。
为了解决传统的web应用当中“等待-响应-等待"
的弊端而创建的一种技术,其实质可以理解为:
使用浏览器内置的一个对象(XmlHttpRequest)向
服务器发送请求,服务器返回xml数据或者是文本
数据给浏览器,然后在浏览器端,使用这些数据
更新部分页面,整个过程,页面无任何的刷新。
“等待-响应-等待”:指的是,在传统的web应用
当中,比如注册,用户填写完整个注册信息,然后
提交,此时,浏览器会将整个注册页面抛弃,等待
服务器返回一个新的完整的页面。在等待过程当中,
用户不能够做其它操作。服务器生成新的页面发送
给浏览器,浏览器需要重新解析这个页面生成相应的
界面。
2、ajax编程
step1 获得XmlHttpRequest对象。
该对象由浏览器提供,但是该类型并没有标准化。
ie和其它浏览器不同,其它浏览器都支持该类型,
而ie不支持。
function getXmlHttpRequest(){
var xhr = null;
if((typeof XMLHttpRequest)!='undefined'){
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
step2 使用XmlHttpRequest向服务器发请求。
a,发送get请求
var xhr = getXmlHttpRequest();
//open(请求方式,请求地址,同步/异步)
//请求方式: get/post
//请求地址:如果是get请求,请求参数添加到地址之后。
// 比如 check_user.do?username=zs
//同步/异步:true表示异步。
xhr.open('get','check_user.do',true);
//注册一个监听器(即当xhr的状态发生改变
//产生了readystatechange事件,该事件会由
//f1函数来处理。我们需要在f1函数里面获得
//服务器返回的数据,然后更新页面)
xhr.onreadystatechange=f1;
//只有调用send方法之后,请求才会真正发送
xhr.send(null);
b,发送post请求
var xhr = getXmlHttpRequest();
xhr.open('post','check_username.do',true);
//必须添加一个消息头content-type
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr.onreadystatechange=f1;
xhr.send('username=zs');
step3 在服务器端,处理请求。
step4 在监听器当中,处理服务器返回的响应。
xhr.onreadystatechange=f1;
function f1(){
//编写相应的处理代码
}
或者
xhr.onreadystatechange=function(){
//编写相应的处理代码
if(xhr.readyState == 4){
//只有readyState等于4,xhr才完整地接收
//到了服务器返回的数据。
//获得文本数据
var txt = xhr.responseText;
//获得一个xml dom对象。
var xml = xhr.responseXML;
//dom操作、更新页面
}
};
3、XmlHttpRequest对象的重要属性
a, onreadystatechange: 注册一个监听器(也就是,
绑订一个事件处理函数)。
b, readyState:返回该对象与服务器通讯的状态。
返回值是一个number类型的值,不同的值表示的
含义如下:
0 (未初始化) 对象已建立,但是尚未初始化
(尚未调用open方法)。
1 (初始化) 对象已建立,尚未调用send方法。
2 (发送数据) send方法已调用。
3 (数据传送中) 已接收部分数据。
4 (响应结束)接收了所有的数据。
c, responseText:获得服务器返回的文本。
d, responseXML:获得服务器返回的XML dom对象。
e, status:获得状态码
4、缓存问题
在使用ie浏览器时,如果使用get方式发送请求,
浏览器会将数据缓存起来。这样,当再次发送请求
时,如果请求地址不变,ie不会真正地向服务器
发请求,而是将之前缓存的数据显示给用户。
解决方式:
方式一:使用post方式。
方式二:在请求地址后面添加一个随机数。
|
|