AJAX使用四步曲

前言

AJAX这个东西还是很模糊的，下面会对AJAX这个技术进行详细讲解一些，另外，在网上商城中应用到了，使用它有四个步骤，下面详细介绍一些。

内容

定义：

AJAX=异步JavaScript和XML

它是一种用于创建快速动态的网页的技术，通过后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

工作原理：

相当于在用户和服务器之间加了一个中间层（AJAX引擎），使用户操作与服务器响应异步化。并不是所有用户请求都提交给服务器，像一些数据验证和数据处理等都交给了Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为服务器提交请求。

应用方式为：

*创建XMLHttpRequest对象

第一种：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

第二种：

var xmlHttp;
try{//Firefox,Opera 8.0+,Safari
	xmlHttp=new XMLHttpRequest();
}
catch(e){
	try{//Internet Explorer
		xmlHttp=new ActiveObject("Msxml2.XMLHTTP");
	}
	catch(e){
		try{
			xmlHttp=new ActiveObject("Microsoft.XMLHTTP");
		}
		catch(e){}
	}
}
return xmlHttp;

*设置监听的对象

将服务器响应形式发送给前台界面，响应结果为：

ResponseText：获得字符串形式的响应数据

ResponseXML：获得XML形式的响应数据

监听的结果情况：

*打开链接

*发送请求

小例子

需求：

通过点击查询订单详情按钮，得出订单信息；（采用AJAX异步加载）

解决方式：

1、创建异步加载的对象

2、设置监听

3、
打开链接

4、
发送

Demo

<script type="text/javascript">
	function showDetail(oid){
		//获得按钮对象
		var but = document.getElementById("but"+oid);
		//获得div对象
		var div1 = document.getElementById("div"+oid);
		if(but.value == "订单详情"){
			//1、创建异步加载对象
			var xhr = createXmlHttp();
			//2、设置监听
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4){
					if(xhr.status == 200){
						div1.innerHTML = xhr.responseText;//获得字符串形式的响应数据
					}
				}
			}
			//3、打开链接
			xhr.open("GET","${pageContext.request.contextPath}/adminOrder_findOrderItem.action?tiem="+new Date().getTime()+"&oid="+oid,true);
			//4、发送
			xhr.send(null);
			but.value = "关闭";
		}else{
			but.value="订单详情";
			div1.innerHTML = "";
		}
	}

	function createXmlHttp(){
		var xmlHttp;
		try{//Firefox,Opera 8.0+,Safari
			xmlHttp=new XMLHttpRequest();
		}
		catch(e){
			try{//Internet Explorer
				xmlHttp=new ActiveObject("Msxml2.XMLHTTP");
			}
			catch(e){
				try{
					xmlHttp=new ActiveObject("Microsoft.XMLHTTP");
				}
				catch(e){}
			}
		}
		return xmlHttp;
	}
</script>

小结

ITOO项目的时候，用到AJAX异步请求，但是没有这么仔细的写下来过，AJAX的也是有优缺点的，但是个人感觉利大于弊。感兴趣的同胞们可以看看AJAX的优缺点，我在这里就不复制粘贴了。AJAX工作原理及其优缺点

感谢您的宝贵时间······