AJAX使用四步曲

前端之家收集整理的这篇文章主要介绍了AJAX使用四步曲前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

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

内容


定义:

AJAX=异步JavaScriptXML

它是一种用于创建快速动态的网页的技术,通过后台与服务器进行少量数据交换,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,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工作原理及其优缺点


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

猜你在找的Ajax相关文章