Ajax实现局部动态更新实例Word文档格式.docx
《Ajax实现局部动态更新实例Word文档格式.docx》由会员分享，可在线阅读，更多相关《Ajax实现局部动态更新实例Word文档格式.docx（14页珍藏版）》请在冰豆网上搜索。
PRIMARYKEY（`Id`）
）ENGINE=InnoDBAUTO_INCREMENT=5DEFAULTCHARSET=utf8;
#Datafortable"
40000ALTERTABLE`stuscore`DISABLEKEYS*/;
INSERTINTO`stuscore`VALUES（1,'
杜淳'
'
200401'
94.50000'
0）,（2,'
马苏'
96.70000'
0）,（3,'
李晨'
95.40000'
1）,（4,'
立方'
200402'
89.70000'
1）,（5,'
À
î
Ï
ì
'
200709'
98'
0）,（6,'
Õ
Å
Ã
Î
0）,（7,'
Ò
Ç
0）;
40000ALTERTABLE`stuscore`ENABLEKEYS*/;
40014SETFOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS*/;
40014SETUNIQUE_CHECKS=@OLD_UNIQUE_CHECKS*/;
40111SETSQL_NOTES=@OLD_SQL_NOTES*/;
40101SETSQL_MODE=@OLD_SQL_MODE*/;
40101SETCHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT*/;
40101SETCHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS*/;
40101SETCOLLATION_CONNECTION=@OLD_COLLATION_CONNECTION*/;
本次工程：
ConnectionFactory.java（主要是对数据库的封装）
packagecom.cong.refresh;
importjava.sql.Connection;
importjava.sql.DriverManager;
importjava.sql.ResultSet;
importjava.sql.Statement;
publicclassConnectionFactory{
publicfinalstaticStringurl="
jdbc:
mysql:
//localhost:
3306/person"
;
publicfinalstaticStringuser="
数据库的用户名"
publicfinalstaticStringpassword="
数据库登录密码"
privateConnectioncon;
privateStatementstm;
privateResultSetrs;
ConnectiongetConnection（）{
try{
Class.forName（"
com.mysql.jdbc.Driver"
）;
return（Connection）DriverManager.getConnection（url,user,password）;
}
catch（Exceptione）{
e.printStackTrace（）;
returnnull;
}
publicvoidclosed（）{
if（con!
=null）
con.close（）;
}catch（Exceptione）{
DyUpdate.jsp
<
%@pagelanguage="
java"
contentType="
text/html;
charset=utf-8"
pageEncoding="
utf-8"
%>
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
"
http:
//www.w3.org/TR/html4/loose.dtd"
>
html>
head>
metahttp-equiv="
Content-Type"
content="
title>
Inserttitlehere<
/title>
scripttype="
text/javascript"
varXMLHttpReq;
varPREFIX="
Sort"
functioncreateXMLHttpRequest（）{
if（window.XMLHttpRequest）{
XMLHttpReq=newXMLHttpRequest（）;
}elseif（window.ActiveXObject）{
XMLHttpReq=newActiveXObject（"
Msxml2.XMLHTTP"
catch（e）{
try{
XMLHttpReq=newActiveXObject（"
Microsoft.XMLHTTP"
}
catch（e）{}
}
functionAddStateChange（）{
if（XMLHttpReq.readyState==4）{
if（XMLHttpReq.status==200）{
AddSortList（）;
else{
window.alert（"
您所请求的页面有异常。
"
functionaddSort（）{----当我们单击注册按钮的时候，调用addSort函数
name=document.getElementById（"
name"
）.value;
----取出<
inputtype=”text”>
的值
if（name=="
）{
return;
varurl="
dyUpdate?
action=add"
+"
&
name="
+name;
------这里定义url，关键是给servlet处理
createXMLHttpRequest（）;
XMLHttpReq.onreadystatechange=AddStateChange;
------调用AddStateChange（）;
XMLHttpReq.open（"
GET"
url,true）;
XMLHttpReq.send（"
null"
functionAddSortList（）{
varAddID=XMLHttpReq.responseXML.getElementsByTagName（"
id"
）[0].firstChild.nodeValue;
if（AddID!
=null）{
varrow=document.createElement（"
tr"
row.setAttribute（"
PREFIX+AddID）;
varcell=document.createElement（"
td"
cell.appendChild（document.createTextNode（name））;
row.appendChild（cell）;
vardeleteButton=document.createElement（"
input"
deleteButton.setAttribute（"
type"
"
button"
value"
删除"
deleteButton.onclick=function（）{
deleteSort（AddID）;
};
cell=document.createElement（"
cell.appendChild（deleteButton）;
document.getElementById（"
sortList"
）.appendChild（row）;
）.value="
functiondeleteSort（id）{
varurl="
action=delete"
id="
+id;
createXMLHttpRequest（）;
XMLHttpReq.onreadystatechange=DeleteStateChange;
XMLHttpReq.open（"
XMLHttpReq.send（null）;
functionDeleteStateChange（）{
if（XMLHttpReq.readyState==4）{
alert（"
nihao"
if（XMLHttpReq.status==200）{
deleteSortList（）;
else{
window.alert（"
functiondeleteSortList（）{
vardeleteID=XMLHttpReq.responseXML.getElementsByTagName（"
if（deleteID!
varrowToDelete=document.getElementById（PREFIX+deleteID）;
varsortList=document.getElementById（"
sortList.removeChild（rowToDelete）;
/script>
/head>
body>
tablestyle="
BORDER-COLLAPSE:
collapse"
borderColor=#111111cellSpacing=0cellPadding=2width=400bgcolor=#f5efe7border=0>
tr>
tdalign="
middle"
height=4colspan="
3"
/td>
/tr>
center"
bgColor=#dbc2b0height=19colspan="
B>
学员信息管理<
/B>
tdheight="
20"
增加新学员：
inputtype="
text"
id="
size="
15"
value="
注册"
onclick="
addSort（）;
>
学员信息管理：
tableborder="
1"
width="
400"
valign="
top"
align="
学员姓名：
tdid="
pos_1"
height="
操作<
tbodyid="
/tbody>
/table>
/body>
/html>
DyUpdateAction.java（servlet）
importjava.io.IOException;
importjava.io.PrintWriter;
importjava.sql.Connection;
importjava.sql.SQLException;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/**
*ServletimplementationclassDyUpdateAction
*/
publicclassDyUpdateActionextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
/**
*@seeHttpServlet#HttpServlet（）
publicDyUpdateAction（）{
super（）;
//TODOAuto-generatedconstructorstub
privatevoiddeleData（Statementst,PrintWriterout,Stringid）throwsException{
StringstrSql="
deletefromstuscorewhereid="
intinsRes=st.executeUpdate（strSql）;
if（insRes>
0）{
out.println（"
id>
+id+"
/id>
privatevoidinsertData（Statementst,PrintWriterout,Stringname）throwsException{
selectmax（id）fromstuscore"
ResultSetrs=st.executeQuery（strSql）;
intiMaxId=0;
intinsRes=0;
if（rs.next（））{
iMaxId=rs.getInt
（1）+1;
iMaxId=1;
catch（SQLExceptione）{
thrownewSQLException（"
errorofinsert"
if（iMaxId>
strSql="
insertintostuscorevalues（"
+iMaxId+"
+name+"
0）"
insRes=st.executeUpdate（strSql）;
name>
/name>
*@seeHttpServlet#doGet（HttpServletRequestrequest,HttpServletResponseresponse）
protectedvoiddoGet（HttpServletRequestrequest,HttpServletResponseresponse）throwsServletException,IOException{
//TODOAuto-generatedmethodstub
request.setCharacterEncoding（"
Stringaction=request.getParameter（"
action"
Stringname=request.getParameter（"
Stringid=request.getParameter（"
response.setContentType（"
text/xml;
charset=utf-8"
response.setHeader（"
Cache-Control"
"
no-cache"
PrintWriterout=response.getWriter（）;
out.println（"
response>
ConnectionFactoryfactory=newConnectionFactory（）;
Connectioncon=factory.getConnection（）;
Statementst=null;
ResultSetrs=null;
st=con.createStatement（）;
if（"
add"
.equals（action））{
insertData（st,out,name）;
}elseif（"
delete"
deleData（st,out,id）;
finally{
//JDBCUtil.close（rs,st,con）;
/response>
out.close（）;
*@seeHttpServlet#doPost（HttpServletRequestrequest,HttpServletResponseresponse）
protectedvoiddoPost（HttpServletRequestrequest,HttpServletResponseresponse）throwsServletException,IOException{
------这里的servlet主要整理出了
同时还作为控制器进行添加和删除操作
web.xml
?
xmlversion="
1.0"
encoding="
UTF-8"
web-appxmlns:
xsi="
//www.w3.org/2001/XMLSchema-instance"
xmlns="
xmlns:
web="
xsi:
schemaLocation="
id="
WebApp_ID"
version="
2.5"
<
display-name>
refresh<
/display-name>
welcome-file-list>
welcome-file>
DyUpdate.jsp<
/welcome-file>
/welcome-file-list>
servlet>
description
升级会员 