学习Ajax之XMLHttpRequest对象

来源：互联网发布：老友记转运海淘知乎编辑：程序博客网时间：2024/05/04 14:17

Ajax的核心是XMLHttpRequest对象,所有的东西都是通过它来实现的.今天就来创建一个XMLHttpRequest对象.并用它来生成一次请求,并处理响应.

正确创建XMLHttpRequest对象

由于浏览器的差异,创建这个对象需要通过浏览器能力的检测.从而相应的实例化这个对象.通常我们是通过构造函数来实例化一个XMLHttpRequest对象.这样做的好处是可以复用.因为我们一般不可能只是创建一个.而通常是创建多个.

function createXmlHttpObject(){var xmlHttp = null;try{xmlHttp = new XMLHttpRequest();}catch(e){try{xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}

生成一次请求.

有了上面的函数.利用它创建一个对象.并用open()和send()方法生成一次请求.最好我们将这个请求也写到一个函数里面.因为请求是在需要的时候再发出.比如点击链接或者按下键盘按钮等.所以我们可以这样做:

function myFirstRequest(){xmlHttp=createXmlHttpObject();//不支持则抛出错误的话if (xmlHttp == null) {alert ("Oop! Browser does not support HTTP Request.")return;}//你要请求的URL,独立弄出来,你可能需要做些处理.var url;xmlHttp.onreadystatechange=function(){//处理请求过程中的状态.包括返回数据的处理.}//以GET方式请求URL,参数true表示异步.(我强烈大家设置为true否则为阻塞模式)xmlHttp.open("GET", url, true);//GET方式发送null.POST方式则需要发送数据.xmlHttp.send(null);}

生成请求的框框大概就是这个样子了.

处理响应

上面的注释,’处理请求过程中的状态‘就是这里要介绍的内容.

onreadystatechange属性指定了一个方法(function)这个方法在请求的不同阶段将被几次调用.我们可以通过它来访问XMLHttpRequest对象中的属性来判断交换的状态和返回的数据.这些属性是:
readyState 是个表是下列状态的整数值:
0:尚未初始化.
1:载入中
2:载入完成
3:交互
4:完成

status是一个表示请求状态的数字代码:这个是由服务器生成的http协议状态.比如我们常看到的200表示’OK’,404表示’没有找到’等.

statusText是与状态代码相关的一条信息.

知道了上面的信息.就可以分开做判断,最后对返回数据做些处理.

下面是一个常用的onreadystatechange方法.

xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4 &amp;&amp; xmlHttp.status==200){//服务器正常.并返回的需要的数据.我们在这里//对responseText做处理.} else {//载入中.或者其他情况.}}

当然你也看到了.上面的例子并不完整.他没有细分readyState的各个阶段.所以还有一个比较常用的.用switch语句.或者依然用if语句做些细致的判断.简单的句子.这里不重复了.

到这里你大概已经基本Ajax请求的处理方法了.接下来我写个很简单的例子.(基于PHP).你也可以搭建一个PHP环境.实验一下这个例子:

服务器端的代码:

<?phpif(isset($_GET['name'])){if(''==$_GET['name']){echo '请输入名字';}else{echo 'Name: '.$_GET['name'];}}else{echo 'This is a server file';}?>

用户端代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test Ajax (GET)</title><script language="javascript">(function(){if(!window.YHLJS) window['YHLJS']={};function createXmlHttpObject(){var xmlHttp = null;try{xmlHttp = new XMLHttpRequest();}catch(e){try{xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}function myFirstRequest(){xmlHttp=createXmlHttpObject();//不支持则抛出错误的话if (xmlHttp == null) {alert ("Oop! Browser does not support HTTP Request.")return;}var url;var data=document.getElementById('name').value;//alert(data);url='server.php?name='+data;xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4 && xmlHttp.status==200){alert(xmlHttp.responseText);document.body.style.cursor = 'auto';} else {document.body.style.cursor = 'wait';}}//以GET方式请求URL,参数true表示异步.(我强烈大家设置为true否则为阻塞模式)xmlHttp.open('GET', url, true);//GET方式发送null.POST方式则需要发送数据.xmlHttp.send(null);}window['YHLJS']['myFirstRequest']=myFirstRequest;})();  <form id="send" method="post" action="" onsubmit="YHLJS.myFirstRequest();return false"><div><label>您的名字:<input type="text" name="name" id="name" tabindex="1" value="" /> </label><input type="submit" name="post_submit" id="post_submit" value="提交" tabindex="1" /></div></form></div></body></html>