Ajax几个简单的案例（ajax_用户唯一验证、ajax_返回xml数据的处理（包括分页处理）
当然开发的前提是把相应的包导入项目中（开发环境myeclipse）
ajax_用户唯一验证(servlet):
如图在myeclipse中的ajax_servlet项目中的index.jsp实现页面的显示：
Index.jsp代码：
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"
+request.getServerName()+":"+request.getServerPort()
+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>MyJSP'index.jsp'startingpage</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<!--
<linkrel="stylesheet"type="text/css"href="styles.css">
-->
<scripttype="text/javascript"
src="${pageContext.request.contextPath}/js/util.js"></script>
<scripttype="text/javascript"
src="${pageContext.request.contextPath}/js/user/reg.js"></script>
</head>
<body>
<divalign="center">
<formaction="">
用户名：<inputtype="text"id="uname"/><spanid="cname"></span><br>
密码：<inputtype="password"id="upass"/><br><input
type="submit"value="注册"/>
</form>
</div>
</body>
</html>
然后在webroot下新建一个js文件夹，这个里面写我们的js代码实现ajax使用
在util.js中封装了发送和接收的请求和一些必要的代码
Util.js文件代码：
//通过id获取dom对象
function$(id){
returndocument.getElementById(id);
}
//创建XMLHttpRequest对象
functioncreateXHR(){
//声明
varxhr;
//IE浏览器XMLHTTP组件的名称
varaVertion=["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp.2.0","Microsoft.XMLHttp"];
try{
//firefoxopera等浏览器
xhr=newXMLHttpRequest();
}catch(ex){
for(vari=0;i<aVertion.lengrh;i++){
try{
xmlHttpRequest=newActiveXObject(aVersion[i]);
returnxmlHttpRequest;
}catch(ex){
continue;
}
}
}
returnxhr;
}
varxhr=createXHR();
functionsendPost(content,url,success,fail){
//ajax处理操作
//创建xhr对象
//触发器
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200||xhr.status==304){
success(xhr);
}else{
fail(xhr);
}
}
};
//打开请求
xhr.open("POST",true);
//设置类型
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求
xhr.send(content);
}
然后再user下的reg.js中写要完成的代码
Reg.js文件代码：
window.onload=function(){
//获取id="uname"节点对象
varunameDom=$("uname");
//为节点注册onblur事件
unameDom.onblur=function(){
//根据value属性获取穿的的值并且拼成传递的参数
varcontent="name="+unameDom.value;
//封装请求的url路径
varurl="./servlet/regUser.do?time="+newDate().getTime();
sendPost(content,disposeSuccess,disposeFail);
functiondisposeSuccess(){
$("cname").innerHTML=xhr.responseText;
}
functiondisposeFail(){
alert("请求失败");
}
};
};
最后在src下建立action处理方法
UserAction.java文件代码：
packagewww.csdn.net.servlet;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassUserServletextendsHttpServlet{
/**
*
*/
privatestaticfinallongserialVersionUID=1L;
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
this.doPost(request,response);
}
publicvoiddoPost(HttpServletRequestrequest,IOException{
Stringname=request.getParameter("name");
System.out.println("===="+name);
response.setContentType("text/html;charset=utf-8");
PrintWriterout=response.getWriter();
if("xiao".equals(name)){
out.print("用户已经存在");//输出文本
}else{
out.print("用户名可以使用");
}
out.flush();
out.close();
}
/**
*Initializationoftheservlet.<br>
*
*@throwsServletExceptionifanerroroccurs
*/
publicvoidinit()throwsServletException{
//Putyourcodehere
}
}
这样就完成了，发布到tomcat服务器上然后用火狐浏览器测试就可以了
ajax_用户唯一验证(struts2)
如图所示；
首先实现页面的代码：
Index.jsp文件代码：
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%@tagliburi="/struts-tags"prefix="s"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"
+request.getServerName()+":"+request.getServerPort()
+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>MyJSP'index.jsp'startingpage</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<!--
<linkrel="stylesheet"type="text/css"href="styles.css">
-->
<scripttype="text/javascript"
src="${pageContext.request.contextPath}/js/util.js"></script>
<scripttype="text/javascript"
src="${pageContext.request.contextPath}/js/user/reg.js"></script>
</head>
<body>
<divalign="center">
<h3>注册页面</h3>
</div>
<divalign="center">
<s:formaction="regUser"namespace="/csdn"theme="simple">
用户名：<s:textfieldname="usernaem"id="uname"/>
<spanid="cname"></span>
<br>
密码：<s:textfieldname="userpass"id="upass"/>
<br>
邮箱：<s:textfieldname="useremial"id="uemail"/>
<br>
<s:submitvalue="注册"/>
</s:form>
</div>
</body>
</html>
Sc.jsp文件代码：
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%@tagliburi="/struts-tags"prefix="s"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"
+request.getServerName()+":"+request.getServerPort()
+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>MyJSP'index.jsp'startingpage</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<!--
<linkrel="stylesheet"type="text/css"href="styles.css">
-->
<scripttype="text/javascript"
src="${pageContext.request.contextPath}/js/util.js"></script>
<scripttype="text/javascript"
src="${pageContext.request.contextPath}/js/user/reg.js"></script>
</head>
<body>
。。。。。。。。。
</body>
</html>
然后是js文件
Util.js文件代码：
//通过id获取dom对象
function$(id){
returndocument.getElementById(id);
}
//创建XMLHttpRequest对象
functioncreateXHR(){
//声明
varxhr;
//IE浏览器XMLHTTP组件的名称
varaVertion=["MSXML2.XMLHttp.5.0","Microsoft.XMLHttp"];
try{
//firefoxopera等浏览器
xhr=newXMLHttpRequest();
}catch(ex){
for(vari=0;i<aVertion.lengrh;i++){
try{
xmlHttpRequest=newActiveXObject(aVersion[i]);
returnxmlHttpRequest;
}catch(ex){
continue;
}
}
}
returnxhr;
}
Reg.js文件代码：
window.onload=function(){
//获取id="uname"节点对象
varunameDom=$("uname");
//为节点注册onblur事件
unameDom.onblur=function(){
//根据value属性获取穿的的值并且拼成传递的参数
varcontent="name="+unameDom.value;
//封装请求的url路径
varurl="./csdn/UserAction_checkName.action?time="+newDate().getTime();
//获取创建的xhr对象（XMLHTTPRequest对象）
varxhr=createXHR();
//事件处理函数触发器
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//状态码返回4处理完毕（这样才能使用xhr.responseText获取返回的结果）
if(xhr.status==200||xhr.status==304){//服务器返回的状态码200一切ok304服务器没有被修改
//ajax请求之后再这里做相应的处理
$("cname").innerHTML=xhr.responseText;
//如果接收的是XML文件就用responseXML;
}
}
};
//打开请求
xhr.open("POST",true);
//如果用POST请求向服务器发送数据，需要将“Content-type”的首部
//设置为“application/x-www-form-urlencoded”它会告知服务器正在发送数据，并且数据已经符合URL编码了
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
xhr.send(content);
};
};
Struts.xml文件代码：
<?xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPEstrutsPUBLIC
"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<includefile="www/csdn/project/resource/struts-constant.xml"/>
<packagename="test"namespace="/csdn"extends="struts-default">
<actionname="UserAction_*"class="www.csdn.project.action.UserAction"method="{1}">
<resultname="reg"type="plainText">
<paramname="location">/sc.jsp</param>
<paramname="charSet">UTF-8</param>
</result>
</action>
</package>
</struts>
最后UserAction.java文件代码：
packagewww.csdn.project.action;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.http.HttpServletResponse;
importorg.apache.struts2.ServletActionContext;
importcom.opensymphony.xwork2.ActionSupport;
publicclassUserActionextendsActionSupport{
/**
*
*/
privatestaticfinallongserialVersionUID=1L;
privateStringname;
publicStringgetName(){
returnname;
}
publicvoidsetName(Stringname){
this.name=name;
}
publicStringcheckName(){
HttpServletResponseresponse=ServletActionContext.getResponse();//获取response对象
response.setContentType("text/html;charset=utf-8");//设置相应文档类型
PrintWriterout=null;//声明输出的out对象
try{
out=response.getWriter();//根据response对象获取out对象
}catch(IOExceptione){
e.printStackTrace();
}
if("xiao".equals(name)){
out.print("用户已经存在");//输出文本
}else{
out.print("用户名可以使用");
}
out.flush();//立即写入
out.close();//关闭
return"reg";
}
}
ajax_返回xml数据的处理（包括分页）（数据库自己建立，在DAO层和service层实现用hibernate）
如图项目结构
连接数据库
数据库在相应层实现就行
首先实现页面的显示
Index.jsp文件代码：
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%@tagliburi="/struts-tags"prefix="s"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"
+request.getServerName()+":"+request.getServerPort()
+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>MyJSP'index.jsp'startingpage</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<!--
<linkrel="stylesheet"type="text/css"href="styles.css">
-->
</head>
<body>
<divalign="center">
<ahref="${pageContext.request.contextPath}/csdn/UserAction_login.action">进入后台</a>
</div>
</body>
</html>
Cindex.jsp文件代码：
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%@tagliburi="/struts-tags"prefix="s"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"
+request.getServerName()+":"+request.getServerPort()
+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>MyJSP'index.jsp'startingpage</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<!--
<linkrel="stylesheet"type="text/css"href="styles.css">
-->
<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/util.js"></script>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/user/user_checkName.js"></script>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/user/user_query.js"></script>
</head>
<body>
<divalign="center">
<divstyle="border:1px;width:600px;height:400px;">
<tablewidth="300px">
<tr>
<td>
用户名：
</td>
<td>
<s:textfieldid="uname"name="username"theme="simple"></s:textfield>
</td>
<tdstyle="color:red;font-size:10px;"id="cname">
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<s:passwordid="upass"name="userpass"theme="simple"></s:password>
</td>
<td>
</td>
</tr>
<tr>
<tdcolspan="3"style="text-align:center;">
<s:ahref="#"theme="simple">注册</s:a>
</td>
</tr>
</table>
</div>
<div>
<span>不使用它</span>
<s:urlid="user_query"namespace="/csdn"action="UserAction_query"></s:url>
<s:ahref="%{user_query}">查询所有用户</s:a>
</div>
<br/>
<div>
<inputtype="button"value="查询所有用户"id="queryBtn">
</div>
<div>
<h3>显示所有的用户信息</h3>
<tableborder="1px"cellpadding="0"cellspacing="0">
<thead>
<th><inputtype="checkbox"id="qx"/></th>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职位</th>
<th>操作</th>
</thead>
<tbodyid="showUsers"></tbody>
</table>
</div>
</div>
</body>
</html>
userpage_xml.js文件：（这里实现了分页）
window.onload=function(){
varuserBtnDom=$("userBtn");
userBtnDom.onclick=function(){
//封装请求的数据
varcontent="pagination.nowPage="+1;
//封装请求的路径
varurl="./csdn/UserAction_pagexml.action?time="
+newDate().getTime();
//调用封装的ajax的post请求
sendPost(content,disposeFail);
//成功处理函数
functiondisposeSuccess(xhr){
//接受相应的xml数据并且返回xmlDocument对象
varxmlDoc=xhr.responseXML;
//获取根对象
varroot=xmlDoc.documentElement;
//获取根节点中所有的Member节点对象
varusers=root.getElementsByTagName("user");
//显示数据
showUsers(users);
$("firstPage").onclick=function(){
content="pagination.nowPage="+1;
//发送请求的时候
sendPost(content,disposeFail);
};
$("backPage").onclick=function(){
content="pagination.nowPage="+eval(root.getAttribute("nowpage")+"-"+1);
//发送请求的时候
sendPost(content,disposeFail);
};
$("nextPage").onclick=function(){
content="pagination.nowPage="+eval(root.getAttribute("nowpage")+"+"+1);
//发送请求的时候
sendPost(content,disposeFail);
};
$("lastPage").onclick=function(){
content="pagination.nowPage="+root.getAttribute("countPage");
//发送请求的时候
sendPost(content,disposeFail);
};
}
//失败处理函数
functiondisposeFail(xhr){
alert("失败处理");
}
};
};
varupTr=null;
functionshowUsers(users){
//清空操作
if($("showUsers").hasChildNodes()){
for(varjj=0;jj<$("showUsers").childNodes.length;){
$("showUsers").removeChild($("showUsers").childNodes[jj]);
}
}
for(vari=0;i<users.length;i++){
varuser=users[i];
vartr=document.createElement("tr");
vartd1=document.createElement("td");
varinput=document.createElement("input");
input.setAttribute("type","checkbox");
input.setAttribute("value",user.getAttribute("id"));
td1.appendChild(input);
vartd2=document.createElement("td");
td2.appendChild(document.createTextNode(user.getAttribute("id")));
vartd3=document.createElement("td");
td3.appendChild(document.createTextNode(user
.getElementsByTagName("name")[0].firstChild.nodeValue));
vartd4=document.createElement("td");
td4.appendChild(document.createTextNode(user
.getElementsByTagName("sex")[0].firstChild.nodeValue));
vartd5=document.createElement("td");
td5.appendChild(document.createTextNode(user
.getElementsByTagName("role")[0].firstChild.nodeValue));
vartd6=document.createElement("td");
//创建修改按钮
varupdateBtn=document.createElement("button");
//为按钮添加文本节点
updateBtn.appendChild(document.createTextNode("编辑"));
updateBtn.onclick=function(){
upTr=this.parentNode.parentNode;
vartds=upTr.childNodes;
for(vari=0;i<tds.length;i++){
vartd=tds[i];
if(td.nodeType==1){
if(i==0){
domUserName.value=td.firstChild.nodeValue;
}elseif(i==1){
domUserSex.value=td.lastChild.nodeValue;
}elseif(i==2){
domUserRole.value=td.childNodes[0].nodeValue;
}
}
};
};
td6.appendChild(updateBtn);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(td6);
$("showUsers").appendChild(tr);
}
}
functionsendPost(content,fail){
//ajax处理操作
//创建xhr对象
varxhr=createXHR();
//触发器
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200||xhr.status==304){
success(xhr);
}else{
fail(xhr);
}
}
};
//打开请求
xhr.open("POST","application/x-www-form-urlencoded");
//发送请求
xhr.send(content);
}
Struts.xml文件代码：
<?xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPEstrutsPUBLIC
"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<includefile="www/csdn/project/resource/struts-constant.xml"/>
<packagename="test"namespace="/csdn"extends="struts-default">
<actionname="UserAction_*"class="www.csdn.project.action.UserAction"method="{1}">
<resultname="login">/WEB-INF/page/user/user_list.jsp</result>
<resultname="xml"type="plainText">
<paramname="location">./index.jsp</param>
<paramname="charSet">UTF-8</param>
</result>
</action>
</package>
</struts>
分页的实现是在util层中封装的实现分页的代码：
Pagination.java文件代码：
packagewww.csdn.project.util;
importjava.util.ArrayList;
importjava.util.List;
/**
*
*@authorkun
*
*
*@param<T>
*/
publicclassPagination<T>extendsBaseHibernateDAO{
//每页显示的记录数
privatestaticfinalIntegerPAGESIZE=5;
//总页数
privateIntegercountPage;
//当前页
privateIntegernowPage;
//总记录数
privateIntegercountRecond;
//当前页数据
privateList<T>entities;
/**
*默认构造器
*/
publicPagination(){
super();
}
/**
*带有参数的构造器
*
*@paramclassName
*@paramnowPage
*/
publicPagination(Class<T>className,intnowPage){
this.countRecond=getCountRecord(className);
this.countPage=this.countRecond%PAGESIZE==0?this.countRecond
/PAGESIZE:this.countRecond/PAGESIZE+1;
//关于当前的处理
if(nowPage<=1){
this.nowPage=1;
}else{
if(nowPage>=this.countPage){
this.nowPage=this.countPage;
}else{
this.nowPage=nowPage;
}
}
this.entities=getNowPageInfo(this.nowPage,className);
}
publicIntegergetCountPage(){
returncountPage;
}
publicvoidsetCountPage(IntegercountPage){
this.countPage=countPage;
}
publicIntegergetNowPage(){
returnnowPage;
}
publicvoidsetNowPage(IntegernowPage){
this.nowPage=nowPage;
}
publicIntegergetCountRecond(){
returncountRecond;
}
publicvoidsetCountRecond(IntegercountRecond){
this.countRecond=countRecond;
}
publicList<T>getEntities(){
returnentities;
}
publicvoidsetEntities(List<T>entities){
this.entities=entities;
}
/**
*等到总记录数
*
*@paramclassName
*@return
*/
publicIntegergetCountRecord(Class<T>className){
inti=0;
try{
i=Integer.parseInt(this.getSession().createQuery(
"selectcount(c)from"+className.getName()+"c")
.uniqueResult().toString());
}catch(Exceptione){
e.printStackTrace();
}finally{
HiberSessionFactory.closeSession();
}
returni;
}
/**
*获取当前页的信息
*
*@paramnowpage
*@paramclassName
*@return
*/
@SuppressWarnings("unchecked")
publicList<T>getNowPageInfo(Integernowpage,Class<T>className){
List<T>entities=newArrayList<T>();
try{
entities=this.getSession().createCriteria(className)
.setFirstResult((nowpage-1)*PAGESIZE).setMaxResults(
PAGESIZE).list();
}catch(Exceptione){
e.printStackTrace();
}finally{
HiberSessionFactory.closeSession();
}
returnentities;
}
}
最后在UserAction.java文件中实现XML数据处理：
UserAction.java文件代码：
packagewww.csdn.project.action;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.http.HttpServletResponse;
importorg.apache.struts2.ServletActionContext;
importwww.csdn.project.domain.User;
importwww.csdn.project.util.Pagination;
importcom.opensymphony.xwork2.ActionSupport;
publicclassUserActionextendsActionSupport{
/**
*
*/
privatestaticfinallongserialVersionUID=1L;
privatePagination<User>pagination;
publicvoidsetPagination(Pagination<User>pagination){
this.pagination=pagination;
}
publicStringpagexml(){
//当前页信息
pagination=newPagination<User>(User.class,pagination.getNowPage());
HttpServletResponseresponse=ServletActionContext.getResponse();
response.setContentType("text/xml;charset=utf-8");
PrintWriterout=null;
try{
out=response.getWriter();
out.println("<?xmlversion='1.0'encoding='UTF-8'?>");
out.print("<usersnowpage='"+pagination.getNowPage()+"'countPage='"+pagination.getCountPage()+"'countRecond='"+pagination.getCountRecond()+"'>");
for(Userentity:pagination.getEntities()){
out.print("<userid='"+entity.getId()+"'>");
out.print("<name>");
out.print(entity.getName());
out.print("</name>");
out.print("<sex>");
out.print(entity.getSex());
out.print("</sex>");
out.print("<role>");
out.print(entity.getRole());
out.print("</role>");
out.print("</user>");
}
out.print("</users>");
out.flush();
out.close();
}catch(IOExceptione){
e.printStackTrace();
}
return"xml";
}
publicStringlogin(){
return"login";
}
}