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)" >经理室</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)" >开发部</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;副总经理");else if("pos_2".equals(playPos)) out.print("&nbsp;&nbsp;总工程师<br>&nbsp;&nbsp;软件工程师"); %></body>
测试结果：
经理室总经理副总经理开发部总工程师软件工程师
页:
[1]