ajax小试牛刀

xiaoliang330 · 发表于 2013-1-23 01:32:35

先贴出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>

测试结果：

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

		自动登录	找回密码
密码			立即注册