学习Ajax之XMLHttpRequest对象

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环境.实验一下这个例子:

服务器端的代码:

<?php
if(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>

学步园