ajax牛刀小试
日期：2014-05-16 浏览次数：20646 次
ajax小试牛刀
先贴出ajax框架代码：
下面写上两个jsp页面，实现ajax异步数据传输
ajaxSample.jsp
ajaxSample2_1.jsp
先贴出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> 副总经理"
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
