ajax牛刀小试-AJAX教程-爱易网页

ajax牛刀小试

日期：2014-05-16　浏览次数：20623 次

ajax小试牛刀
先贴出ajax框架代码：

<script language="javascript">
var http_request = false;

	function send_request(url){//初始化、指定处理函数、发送请求的函数
		http_request = false;
				//初始化XMLHttpRequest对象
		if(window.XMLHttpRequest){//Mozilla浏览器
			alert("火狐浏览器");
			http_request = new XMLHttpRequest();
			if(http_request.overrideMimeType){
			
				http_request.overrideMimeType("text/xml");
			}
		}else if(window.ActiveXObject){//IE浏览器
			alert("IE浏览器");
			try{
				http_request = new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e){
				try{
					http_request = new ActiveXOnject("Microsoft.XMLHTTP");
				}catch(e){}
			}
			
		}
		if(!http_request){//异常，创建对象实例失败
			window.alert("不能创建XMLHttpRequest对象实例");
			return false;
		}
	  	
	  	http_request.onreadystatechange = processRequest;
	  	//确定发送请求的方式和URL以及是否同步执行下段代码
	  	http_request.open("GET",url,true);
	  	http_request.send(null);
	  	
	}
	     //处理返回信息的函数
		function processRequest(){

			if(http_request.readyState==4){   //判断对象状态
				if(http_request.status==200){  //信息已经成功放回，开始处理信息
	          //alert(http_request.responseText);
			}else{
		        alert("您所请求的页面有异常");
				}
			}
		}


</script>

下面写上两个jsp页面，实现ajax异步数据传输

ajaxSample.jsp


<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<script language="javascript">
	
  	function showRoles(obj){
  		document.getElementById(obj).parentNode.style.display="";
  		document.getElementById(obj).innerHTML="loading....";
  		currentPos = obj;
  		//alert(currentPos);
  		send_request("ajaxSample2_1.jsp?playPos="+obj);
  	}
	
	var http_request = false;
	function send_request(url){//初始化、指定处理函数、发送请求的函数
		http_request = false;
				//初始化XMLHttpRequest对象
		if(window.XMLHttpRequest){//Mozilla浏览器
			alert("火狐浏览器");
			http_request = new XMLHttpRequest();
			if(http_request.overrideMimeType){
			
				http_request.overrideMimeType("text/xml");
			}
		}else if(window.ActiveXObject){//IE浏览器
			alert("IE浏览器");
			try{
				http_request = new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e){
				try{
					http_request = new ActiveXOnject("Microsoft.XMLHTTP");
				}catch(e){}
			}	
		}
		if(!http_request){//异常，创建对象实例失败
			window.alert("不能创建XMLHttpRequest对象实例");
			return false;
		}
	  	http_request.onreadystatechange = processRequest;
	  	//确定发送请求的方式和URL以及是否同步执行下段代码
	  	http_request.open("GET",url,true);
	  	http_request.send(null);
	}
	     //处理返回信息的函数
		function processRequest(){
			if(http_request.readyState==4){   //判断对象状态
				if(http_request.status==200){  //信息已经成功放回，开始处理信息
					//alert(http_request.responseText);
					document.getElementById(currentPos).innerHTML=http_request.responseText;
				}else{
					alert("您所请求的页面有异常");
				}
			}
		}
</script>

<body>
	<table width="200" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td height="20"><a href="javascript:void(0)" onClick="showRoles('pos_1')">经理室</a></td>
		</tr>	<tr style="display:none">
			<td height="20" id="pos_1">&nbsp;</td>
		</tr>
		<tr>
			<td height="20"><a href="javascript:void(0)" onClick="showRoles('pos_2')">开发部</a></td>
		</tr>
		<tr style="display:none">
			<td id="pos_2" height="20">&nbsp;</td>
		</tr>
	</table>
</body>
</html>

ajaxSample2_1.jsp


<body>
	<%
		String playPos = request.getParameter("playPos");
		if("pos_1".equals(playPos))
		   out.print("&nbsp;&nbsp;总经理<br>&nbsp;&nbsp;副总经理"

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

ajax牛刀小试

相关资料更多>

推荐阅读更多>