XML&AJAX
AJAX: Asynchronous Javascript and XML
1. 客户端触发异步操作
2. 创建新的XMLHttpRequest, 是重要的js对象,通过它提起对服务器端的请求
3. 与server进行连接
4. 服务器端进行了连接处理
5. 返回包含处理结果的XML文档
6. XMLHttpRequest对象接收处理结果并分析
7. 更新页面
index.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!doctype html> <html> <head> <title>www.mldnjava.cn,MLDN高端Java培训</title> <script language="javascript"> var xmlHttp ; var flag = false ; function createXMLHttp(){ if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest() ; } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ; } } function checkUserid(userid){ createXMLHttp() ; xmlHttp.open("POST","CheckServlet?userid="+userid) ; xmlHttp.onreadystatechange = checkUseridCallback ; xmlHttp.send(null) ; document.getElementById("msg").innerHTML = "正在验证..." ; } function checkUseridCallback(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ var text = xmlHttp.responseText ; if(text == "true"){ // 用户id已经存在了 document.getElementById("msg").innerHTML = "用户ID重复,无法使用!" ; flag = false ; } else { document.getElementById("msg").innerHTML = "此用户ID可以注册!" ; flag = true ; } } } } function checkForm(){ return flag ; } </script> </head> <body> <form action="regist.jsp" method="post" onsubmit="return checkForm()"> 用户ID:<input type="text" name="userid" onblur="checkUserid(this.value)"><span id="msg"></span><br> 姓 名:<input type="text" name="name"><br> 密 码:<input type="password" name="password"><br> <input type="submit" value="注册"> <input type="reset" value="重置"> </form> </body> </html>
web.xml:
<?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <display-name>Welcome to Tomcat</display-name> <description> Welcome to Tomcat </description> <servlet> <servlet-name>CheckServlet</servlet-name> <servlet-class>org.lxh.ajaxdemo.CheckServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>CheckServlet</servlet-name> <url-pattern>/CheckServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
CheckServlet.java:
package org.lxh.ajaxdemo ; import java.sql.* ; import java.io.* ; import javax.servlet.* ; import javax.servlet.http.* ; public class CheckServlet extends HttpServlet{ private static final long serialVersionUID = 1L; public static final String DBDRIVER = "org.gjt.mm.mysql.Driver" ; public static final String DBURL = "jdbc:mysql://localhost:3306/mldn" ; public static final String DBUSER = "root" ; public static final String DBPASS = "linda0213" ; public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{ this.doPost(request,response) ; } public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{ request.setCharacterEncoding("GBK") ; response.setContentType("text/html") ; Connection conn = null ; PreparedStatement pstmt = null ; ResultSet rs = null ; PrintWriter out = response.getWriter() ; String userid = request.getParameter("userid") ; try{ Class.forName(DBDRIVER) ; conn = DriverManager.getConnection(DBURL,DBUSER,DBPASS) ; String sql = "SELECT COUNT(userid) FROM user WHERE userid=?" ; System.out.println(sql); pstmt = conn.prepareStatement(sql) ; pstmt.setString(1,userid) ; rs = pstmt.executeQuery() ; if(rs.next()){ if(rs.getInt(1)>0){ // 用户ID已经存在了 out.print("true") ; } else { out.print("false") ; } } }catch(Exception e){ e.printStackTrace() ; }finally{ try{ conn.close() ; }catch(Exception e){} } } }
regist.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>Regist OK</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> OK! <br> </body> </html>
AJAX分页:
index.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> var js = { XMLHttp:null, //发送请求函数 sendRequest:function(url,responseFun,callback){ //创建XMLHTTPRequest对象 (function(){ //根据浏览器类型创建XMLHTTPRequest对象 if(window.XMLHttpRequest){ js.XMLHttp = new XMLHttpRequest(); } else{ try{ js.XMLHttp = new ActionXObject("Msxml2.XMLHTTP"); }catch (e){ try{ js.XMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e0){alert("Microsoft"+e0);} } } })(); //function end. js.XMLHttp.open("POST", url, true); js.XMLHttp.onreadystatechange = function(responseFunction){ if(js.XMLHttp.readyState == 4){ if(js.XMLHttp.status == 200){ responseFun(js.XMLHttp); }else{ document.getElementById("div").innerHTML = "<font color='red'>连接服务器异常...</font>" ; } } else{ //document.getElementById("div").innerHTML = "<font color='red'>数据加载中...</font>" ; } };//指定响应函数onreadystatechange js.XMLHttp.send(null); return js.XMLHttp; }//sendRequest:function }//js end //响应函数 function responseFunction(xmlhttp){ var xmlDOM = xmlhttp.responseXML; //接受服务器返回的xml文档 parse(xmlDOM);//解析XML文档 } //解析XML文档 function parse(xmlDOM){ var person = xmlDOM.getElementsByTagName("person"); var page = xmlDOM.getElementsByTagName("page")[0]; var currpage = page.getElementsByTagName("currpage")[0].firstChild.data; var pagecount = page.getElementsByTagName("pagecount")[0].firstChild.data; var prevpagehtml; var nextpagehtml; if((currpage-0)<=1){ prevpagehtml = "<a>上一页</a>"; }else{ prevpagehtml = "<a onclick='AjaxTest("+(currpage-1)+");' href='javascript:void(0);'>上一页</a>"; } if((currpage-0)<(pagecount-0)){ nextpagehtml = "<a onclick='AjaxTest("+(currpage-0+1)+");' href='javascript:void(0);'>下一页</a>"; }else{ nextpagehtml = "<a>下一页</a>"; } var html = "<table style='font-size: 12px; color: red'><tr><td width='80'>编号</td><td width='100'>姓名</td><td width='80'>年龄</td></tr>"; for(i=0;i<person.length;i++){ html = html+ "<tr><td>" +person[i].getElementsByTagName("pid")[0].firstChild.data+"</td><td>" +person[i].getElementsByTagName("pname")[0].firstChild.data+"</td><td>" +person[i].getElementsByTagName("age")[0].firstChild.data +"</td></tr>"; } html = html + "<tr ><td width='50'>"+prevpagehtml+"</td><td width='100'>共"+pagecount+"页 当前第"+currpage+"页</td><td width='80'>"+nextpagehtml+"</td></tr>"; html = html+"</table>"; document.getElementById("div").innerHTML=html; } //主调函数,以当前页作为参数 function AjaxTest(currpage) { js.sendRequest("AjaxServlet?currpage="+currpage,responseFunction,null); } </script> </head> <body onload="AjaxTest(1);"> <center> <div id="div"> </div> </center> </body> </html>
web.xml:
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <description> This is the description of my J2EE component </description> <display-name> This is the display name of my J2EE component </display-name> <servlet-name>AjaxServlet</servlet-name> <servlet-class>AjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxServlet</servlet-name> <url-pattern>/AjaxServlet</url-pattern> </servlet-mapping> <servlet> <servlet-name>CityServlet</servlet-name> <servlet-class>CityServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>CityServlet</servlet-name> <url-pattern>/CityServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
page.java:
/** * @author QQ:373672872 * 分页Entity */ public class Page { //总记录数 private int total; //当前页 private int currpage; //每页显示记录数量 private int pagesize; //总页数 private int pagecount; //每页数据的开始下标 private int start; public Page(int total, int currpage, int pagesize) { this.setTotal(total); this.setCurrpage(currpage); this.setPagesize(pagesize); } public int getTotal() { return total; } public void setTotal(int total) { this.total = total; } public int getCurrpage() { return currpage; } public void setCurrpage(int currpage) { this.currpage = currpage; } public int getPagesize() { return pagesize; } public void setPagesize(int pagesize) { this.pagesize = pagesize; } public int getPagecount() { //调用设置总页数方法 this.setPagecount(); return pagecount; } //设置总页数 public void setPagecount(){ this.pagecount = (total % pagesize == 0) ? total / pagesize : total / pagesize + 1; } public void setPagecount(int pagecount) { this.pagecount = pagecount; } public int getStart() { //调用设置行号方法 this.setStart(); return start; } //设置每页的起始行号 public void setStart(){ this.start = (this.getCurrpage()-1)*this.getPagesize(); } public void setStart(int start) { this.start = start; } }
AjaxServlet.java:
import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.sql.*; /** * @author QQ:373672872 * @category 处理JSP页面提交的的异步查询请求,并以XML文件格式返回结果集 */ public class AjaxServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //当前页 int currpage = Integer.parseInt(request.getParameter("currpage")==null?"1":request.getParameter("currpage")); //总的记录数 int total = this.getResultCount(); //分页单位 int pagesize = 5; //Page类对象 Page page = new Page(total,currpage,pagesize); //用于返回给前台页面的XML文档 StringBuffer xmlDOM = new StringBuffer(); //调用查询方法 ResultSet rs = this.getResultSet(page.getStart(),page.getPagesize()); //添加XML根节点 xmlDOM.append("<root>"); try { //添加数据库查询出来的数据 xmlDOM.append("<persons>"); while (rs.next()) { xmlDOM.append("<person>"); xmlDOM.append("<pid>" + rs.getString("pid") + "</pid>"); xmlDOM.append("<pname>" + rs.getString("pname") + "</pname>"); xmlDOM.append("<age>" + rs.getString("age") + "</age>"); xmlDOM.append("</person>"); } rs.close(); xmlDOM.append("</persons>"); } catch (SQLException e) { System.out.println(e.getMessage()); } //添加分页信息 xmlDOM.append("<page>"); xmlDOM.append("<currpage>"+page.getCurrpage()+"</currpage>"); xmlDOM.append("<pagecount>"+page.getPagecount()+"</pagecount>"); xmlDOM.append("</page>"); xmlDOM.append("</root>"); //调用打印方法 this.print(request, response, xmlDOM.toString()); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } /** * @category 打印出XMLDOM文档,用于前台页面的接收 * @author QQ:373672872 * @param request * @param response * @param xmlDOM * @throws IOException */ private void print(HttpServletRequest request, HttpServletResponse response,String xmlDOM) throws IOException{ response.setCharacterEncoding("utf-8"); response.setContentType("text/xml"); PrintWriter out = response.getWriter(); out.print(xmlDOM); out.close(); } /** * @author QQ:373672872 * @category 返回当前页的查询结果 * @param 行号 * @param 长度 * @return ResultSet */ private ResultSet getResultSet(int start,int len){ Connection conn = null; PreparedStatement pstmt = null; ResultSet rs = null; try { conn = getConn(); } catch (ClassNotFoundException e) { System.out.println(e.getMessage()); } catch (SQLException e) { System.out.println(e.getMessage()); } String sql = "select * from person order by pid limit ?,?"; //String sql = "select top "+len+" * from person where pid >= ? order by pid"; try { pstmt = conn.prepareStatement(sql); pstmt.setInt(1, start); pstmt.setInt(2, len); pstmt.setInt(1, start); rs = pstmt.executeQuery(); } catch (SQLException e) { System.out.println(e.getMessage()); } return rs; } /** * @author QQ:373672872 * @return 数据库中总的记录数 */ private int getResultCount(){ int count=0; Connection conn = null; Statement stmt = null; ResultSet rs = null; try { conn = getConn(); } catch (ClassNotFoundException e) { System.out.println(e.getMessage()); } catch (SQLException e) { System.out.println(e.getMessage()); } String sql = "select count(*) from person"; try { stmt = conn.createStatement(); rs = stmt.executeQuery(sql); } catch (SQLException e) { System.out.println(e.getMessage()); } try { while(rs.next()){ count = rs.getInt(1); } stmt.close(); rs.close(); conn.close(); } catch (SQLException e) { System.out.println(e.getMessage()); } return count; } /** * @author QQ:373672872 * @return 取得数据库连接驱动 * @throws ClassNotFoundException * @throws SQLException */ private Connection getConn() throws ClassNotFoundException, SQLException{ //String driver = "com.microsoft.sqlserver.jdbc.SQLServerDriver"; String driver = "com.mysql.jdbc.Driver"; //String url = "jdbc:sqlserver://127.0.0.1:1433;database=persondb"; String url = "jdbc:mysql://localhost:3306/persondb"; String user = "root"; String password = "linda0213"; Class.forName(driver); return DriverManager.getConnection(url,user,password); } }
xml文件:
<root> <persons> <person> <pid>1</pid> <pname>BennyTan</pname> <age>20</age> </person> <person> <pid>2</pid> <pname>JayChou</pname> <age>23</age> </person> <person> <pid>3</pid> <pname>JolinTisa</pname> <age>28</age> </person> <person> <pid>4</pid> <pname>Jack</pname> <age>18</age> </person> <person> <pid>5</pid> <pname>Jolit</pname> <age>35</age> </person> </persons> <page> <currpage>1</currpage> <pagecount>5</pagecount> </page> </root>