文档库

最新最全的文档下载
当前位置:文档库 > Ajax:异步请求(在不刷新整个页面的情况下,实现局部交换客户端及服务

Ajax:异步请求(在不刷新整个页面的情况下,实现局部交换客户端及服务

AJAX 的要点是 XMLxmlHttpuest 对象。

不同的浏览器创建 XMLxmlHttpuest 对象的方法是有差异的。

IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLxmlHttpuest 的 JavaScript 内建对象。

一、创建请求

①首先要判断当前的客户所使用的浏览器的内核类型,因为不同的浏览器内核创建XMLxmlHttpuest 对象的方法是有差异的。

判断是IE的内核:window.ActiveXObject

判断不是IE内核:window.XMLxmlHttpuest

②创建请求

创建IE的内核的请求xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

创建非IE的内核的请求xmlHttp=new XMLHttpRequest();

(备注:较新版本的 Internet Explorer,则需要使用对象 Msxml2.XMLHTTP,而较老版本的 Internet Explorer 则使用 Microsoft.XMLHTTP)

建议使用一下代码:

try{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}catch (e){

// Internet Explorer

try{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}catch (e){

try{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}catch (e){

alert("您的浏览器不支持AJAX!");

return false;

}

}

}

或者

try{

if( window.ActiveXObject ){

for( var i = 5; i; i-- ){

try{

if( i == 2 ){

xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );

}else{

xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );

alert("Msxml2.XMLHTTP." + i + ".0" );

xmlHttp.setRequestHeader("Content-Type","text/xml");

xmlHttp.setRequestHeader("Charset","gb2312"); }

break;

}

catch(e){

xmlHttp = false;

}

}

}else if( window.XMLxmlHttpuest ){

xmlHttp = new XMLHttpRequest();

if (xmlHttp.overrideMimeType){

xmlHttp.overrideMimeType('text/xml');

}

}else{

alert("不支持您的浏览器");

}

}catch(e){

xmlHttp = false;

}

或者

if(window.ActiveXObject){

//创建IE内核的请求

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}else if(window.XMLHttpRequest){

//创建火狐内核的请求

xmlHttp = new XMLHttpRequest();

}else{

alert("咱不支持您的浏览器!");

}

二、发送请求

①准备数据

url:即请求的资源

method:请求的方式GET/POST(只使用GET)

②打开请求,装载数据

xmlHttp.open("GET",url,true);

③做好处理结果的准备

xmlHttp.onreadystatechange=dowork;(dowork是一个JS)

④发送请求

xmlHttp.send(null);

三、处理结果

①当请求状态发生改变的时候,自动回调属性onreadystatechange中的函数(方法,这

里指的是dowork),在改方法中处理结果

状态有五种,对应如下:

0:请求未初始化(还没有调用 open())。

1:请求已经建立,但是还没有发送(还没有调用 send())。

2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。

3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。 4:响应已完成;您可以获取并使用服务器的响应了。

function dowork(){

if(xmlHttp.readyState == 4){

//alert("获得响应");

var text = xmlHttp.responseText;//获得servlet中传递过来的数据放到text中

var lab2 = document.getElementById('lab2');//取得本页面(jsp)中的叫“lab2”的label中

lab2.innerHTML=text;//将text中的内容放到lab2中

}

}

②将获得的数据放到lable中

var text = xmlHttp.responseText;//获得servlet中传递过来的数据放到text

var lab2 = document.getElementById('lab2');//取得本页面(jsp)中的叫“lab2”的label中

将获得的数据放到input中

var text = xmlHttp.responseText;

document.getElementById('inputId').value = text;//inputId是那个input对应的ID