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是一种标准化的技术，不需要下载任何的插件。