下面是小弟写的代码:功能包括实现调用文本,调用XML,换换样式;(说明直接复制不能运行,因为有数据库,想运行自已加,看不懂很正常,看得懂,说明你原来就会,因为是写给我自已看的,不好意思.......)
------------------------------------------------------
<%@ page c%>
<html>
<head>
<title>AJAX练习测试!</title>
<style type="text/css">
.out {
background: #708090;
color: #ffff00;
}
.over {
background: #fffafa;
color: #ff00ff;
}
</style>
<script type="text/javascript">
function query(){
var req=new ActiveXObject('Microsoft.XMLHTTP');
var salary=document.getElementById('sa').value;
var url='server.jsp?sal='+salary;
req.open('get',url,true);
req.;
req.send(null);
}
function callback(){
var state=req.readyState;
if(state==4){
//第一种精况,返回文本的情况
//var data=req.responseText;
//第二步以XML返回,好处本身是树形结构,所以就可以用DOM进行访问
var data=req.responseXML;
var emps=xmlData.getElementsByTagName("emp");
//var v=(emps[0].getElementsByTagName("ename"))[0].firstChild.data;
//alert(v);
//在这里调啊
clear();
fillInfoXml(emps);
//第一种:调用fillInfo
//fillInfo(data);
}
function fillInfo(message){
//得到节点
var info=document.getElementById("info");
//附入HTML
info.innerHTML=message;
}
function fillInfoXml(emps){
var _tr,_td1,_td2
var size=emps.length
var inof_body=document.getElementById("info_body");
for(var i=0;i<size;i++){
_tr=document.createElement("tr");
_td1=document.createElement("td");
_td2=document.createElement("td");
//换换样式
_td1.(){this.className='out';}
_td2.(){this.className='out';}
_td1.(){this.className='over';}
_td2.(){this.className='over';}
var emp=emps;
var ename=emp.getElementsByTagName("ename")[0].firstChild.data;
var empno=emp.getElementsByTagName("empno")[0].firstChild.data;
//创建两个文本结点
var enameNode=document.createTextNode(ename);
var empn.createTextNode(empno);
_td1.appendChild(empnoNode);
_td2.appendChild(empnoNode);
_tr.appendChild(_td1);
_tr.appendChild(_td2);
info_body.appendChild(_tr);
}
}
//把节点inof_body下的东西清空
function clear(){
var info_body=document.getElementById("info_body");
var length=info_body.childNodes.length;
for(var i=length-1;i>=0;i--){
info_body.removeChild(info_body.childNodes);
}
}
}
</script>
</head>
<body>
<form action="server.jsp">
salary:
<input type="text" id="sa" name="sal">
<input type="button" value="提交" >
</form>
<div id="info">
<table border="1">
<tbody id="info_body"></tbody>
</table>
</div>
</body>
</html>
--------------------------------------------
<%@ page c%>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<%
String sal = request.getParameter("sal");
if (sal == null || sal.length() == 0) {
return;
}
Context ctx = new initialContext();
DataSource ds = ctx.lookup("java:comp/env/jdbc/ds");
Connection con = ds.getConnection();
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("select empno,ename form emp where sal=" + sal);
%>
<table border="1">
<tr>
<td>
empno
</td>
<td>
ename
</td>
</tr>
<%
while (rs.next()) {
%>
<tr>
<td><%=rs.getString(1)%></td>
<td><%=rs.getString(2)%></td>
</tr>
<%
}
con.close();
%>
</table>
</body>
</html>
-------------------------------------------
<%@ page c%>
<html>
<head>
<title>没事</title>
</head>
<body>
<%
System.out.println("你好啊!");
out.print("ajax server response!");
%>
</body>
</html>
-------------------------------------------
<%@ page c%>
<html>
<head>
<title>AJAX练习测试!</title>
<script type="text/javascript">
function test(){
var req=new ActiveXObject('Microsoft.XMLHTTP');
req.open('get','server1.jsp',true);
req.;
req.send(null);
}
function callback(){
var state=req.readyState;
if(state==4){
var data=req.responseText;
//调用fillInfo
fillInfo(data);
}
function fillInfo(message){
//得到节点
var info=document.getElementById("info");
//附入HTML
info.innerHTML=message;
}
}
</script>
</head>
<body>
<input type="button" value="提交" >
<div id="info"></div>
</body>
</html>
-----------
最新评论