ajax小试牛刀

最新推荐文章于 2020-06-16 14:29:14 发布

xiaoliang330

最新推荐文章于 2020-06-16 14:29:14 发布

阅读量82

点赞数

分类专栏： Ajax 文章标签： Ajax IE 浏览器 JSP Microsoft

本文链接：https://blog.csdn.net/xiaoliang330/article/details/83886650

版权

Ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先贴出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"> </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"> </td>
		</tr>
	</table>
</body>
</html>

ajaxSample2_1.jsp



<body>
	<%
		String playPos = request.getParameter("playPos");
		if("pos_1".equals(playPos))
		   out.print("  总经理<br>  副总经理");
		else if("pos_2".equals(playPos))
		   out.print("  总工程师<br>  软件工程师");
	 %>
</body>

测试结果：


经理室
  总经理
  副总经理
开发部
  总工程师
  软件工程师

xiaoliang330

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax小试牛刀

先贴出ajax框架代码：[code="java"]var http_request = false; function send_request(url){//初始化、指定处理函数、发送请求的函数 http_request = false; //初始化XMLHttpRequest对象 if(window.XMLHttpRequest){//Mozilla浏...
复制链接

扫一扫