ajax
XMLHttpRequest创建方式:
Var xmlHttpRqObj = new XMLHttpRequest();//普通创建方式
Var xmlHttpRqObj = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器中的方式
一般的创建方式
function CreateHttpRQ(){
if(window.navigator.appName == "Microsoft Internet Explorer"){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
return null;
}
}else{
return new XMLHttpRequest();
}
}
if(CreateHttpRQ()!=null){
window.status = "对象创建成功";
}
动态刷新jframe
2、ajax是什么?
(asynchronous javascript and xml 异步的javascript和xml)
ajax是一种用来改善用户体验的技术,其本质是通过浏览器
内置的一个特殊的对象(XMLHttpRequest)异步地(当这个
对象在向服务器发请求时,浏览器并不会销毁当前页面,用户
仍然可以对当前页面做其它的操作)向服务器发送请求。服务器
送回的并不是一个完整的页面,而是部分的数据(文本、或者是
xml文档),利用javascript,可以使用这些数据更新当前页面。
整个过程,页面无刷新,不打断用户的操作。
3、ajax对象
(1)如何获得ajax对象?
XMLHttpRequest并没有标准化,要区分浏览器来获得该对象。
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//非ie浏览器
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
(2)重要的属性
1)onreadystatechange:绑订一个事件处理函数(注册监听器),
,用来处理readystatechange事件(该事件是当ajax对象的
readyState属性值发生改变时产生的)。
2)responseText:服务器返回的文本。
3)responseXML:服务器返回的dom兼容的xml对象。
4)readyState: ajax对象在与服务器进行通讯时,会以
readyState值来表示当前通讯的状态,其值一共有五个
(0,1,2,3,4),4表示ajax对象已经接收到服务器返回的所有的
数据。
5)status:状态码
4、ajax编程
step1, 先获得ajax对象:
比如: var xhr = getXhr();
step2, 使用ajax对象发请求:
方式一: get请求
xhr.open(请求方式,请求地址,同步(false)还是异步);
请求方式: 'get','post'
比如: xhr.open('get',
'check_username.do?username=zs',true);
xhr.onreadystatechange=f1;
xhr.send(null);
方式二:post请求
比如:
xhr.open('post','check_username.do',true);
//给请求数据包添加一个content-type的消息头
xhr.setRequestHeader('content-type',
'application/x-www-form-urlencoded');
xhr.onreadystatechange=f1;
//post请求要将请求参数加在send方法里面
xhr.send('username=zs');
step3,编写服务器端的处理代码,一般只需要返回部分的数据。
step4,编写监听器中的代码
获得服务器返回的数据,然后更新当前页面。
function f1(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
利用txt进行一些dom操作。
}
}
5、ajax应用中编码问题
(1)发送get请求
浏览器内置的ajax对象负责对表单中的数据进行编码,
ie提供的ajax对象会使用gbk进行编码,而其它浏览器(
chrome,firefox)会使用utf-8进行编码。而服务器默认会
使用iso-8859-1去解码。所以会发生乱码问题。
解决办法:
step1, 告诉服务器如何解码,可以修改
tomcat的配置文件 conf/server.xml文件,添加
"URIEncoding=utf-8"(只针对get请求)。
step2, 使用encodeURI函数对请求地址进行编码。
(encodeURI是一个内置的javascript函数,会对请求
地址中的中文参数使用utf-8进行编码)。
(2)发送post请求
所有浏览器内置的那个ajax对象会使用utf-8对
中文请求参数进行编码。服务器默认会使用iso-8859-1去解码。
解决办法:
request.setCharacterEncoding("utf-8");
6,缓存问题
使用ie浏览器内置的ajax发送get请求时,会先查看是否
访问过该地址,如果访问过,不再访问了,会直接显示
之前访问的结果。
解决办法:
方式一: 在请求地址后面添加一个随机数,比如:
xhr.open('get','some?' + Math.random(),true);
方式二: 使用post方式。
1、ajax的优点
(1)页面无刷新,不打断用户的操作。
(2)按需获取数据,提升系统的性能。
(3)ajax是一种标准化的技术,不需要下载任何的插件。