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>
XML&AJAX的更多相关文章
- XML+AJAX
- AJAX 处理xml 数据
//这个方式返回的得是 xml标准的对象,可以返回 xml字符串,前端js 使用转为xml function createXml(str){ if(document.all){//IE浏览器 va ...
- PHP 实例 - AJAX 与 XML-AJAX XML 实例
PHP 实例 - AJAX 与 XML AJAX 可用来与 XML 文件进行交互式通信. AJAX XML 实例 下面的实例将演示网页如何通过 AJAX 从 XML 文件读取信息: 实例 Sele ...
- 原生Ajax总结
HTTP协议 传统的请求和Ajax请求 Ajax定义 Asynchronous JavaScript and XML. Ajax异步的,JavaScript程序希望与服务器直接通信而不需要重新加载页面 ...
- Ajax基础
1 概要 异步JavaScript和XML(Asynchronous Javascript And XML,Ajax)就是使用js来收发来自web服务器的数据,且无需重载整个页面的技术. 注 :xml ...
- ajax的一些笔试面试题
1. 什么是ajax,为什么要使用Ajax(请谈一下你对Ajax的认识) 什么是ajax: AJAX是“Asynchronous JavaScript and XML”的缩写.他是指一种创建交互式网页 ...
- ajax教程
本文来自w3school 简介: AJAX = Asynchronous JavaScript and XML 异步的javascript和xml ajax不是新的编程语言,而是一种使用现有标准的新方 ...
- AJAX初探,XMLHttpRequest介绍
AJAX初探,XMLHttpRequest介绍 AJAX AJAX = Asynchronous JavaScript and XML. 异步的JavaScript和XML. AJ ...
- Ajax 应用六个需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用.现在把常见的问题列举如下.1.编码问题注意AJAX要取的文件是UTF-8编码的.GB2312编码传回BROWSE后中 ...
随机推荐
- C++对文件进行加密解密
1. 起因: 需要对游戏资源进行加密 2. 解决方案: 通过网络查询,xxtea是一款轻量级的加密工具,使用简单方便 3. 加密解密 xxtea只有两个函数,加密:xxtea_encrypt 解密:x ...
- iOS 判断奇偶数
if (_bigUrlArray.count%2==0) {//如果是偶数 a = i*(_bigUrlArray.count/count);//每个线程图片初始数 b = (i+1)*(_bigUr ...
- UIImageView 的contentMode属性应用
UIImageView 的contentMode这个属性是用来设置图片的显示方式,如居中.居右,是否缩放等,有以下几个常量可供设定:UIViewContentModeScaleToFillUIView ...
- Lucene 简单手记http://www.cnblogs.com/hoojo/archive/2012/09/05/2671678.html
什么是全文检索与全文检索系统? 全文检索是指计算机索引程序通过扫描文章中的每一个词,对每一个词建立一个索引,指明该词在文章中出现的次数和位置,当用户查询时,检索程序就根据事先建立的索引进行查找,并将查 ...
- hdu 4463 Outlets(最小生成树)
Outlets Time Limit : 2000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Submi ...
- Node.js学习 - File Operation
同步异步 文件系统(fs 模块)模块中的方法均有异步和同步版本,例如读取文件内容的函数有异步的 fs.readFile() 和同步的 fs.readFileSync(). 异步的方法函数最后一个参数为 ...
- Node.js学习 - Event Loop
Node.js本身是单线程,但通过事件和回调支持并发,所以性能非常高. Node.js的每一个API都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. 事件驱动程序 实例 var ev ...
- POJ - 3061 Subsequence（连续子序列和>=s的最短子序列长度）
Description A sequence of N positive integers (10 < N < 100 000), each of them less than or eq ...
- ubuntu 解压 windows 生成的 zip 文件乱码问题
在windows上压缩的文件,是以系统默认编码中文来压缩文件.由于zip文件中没有声明其编码,所以linux上的unzip一般以默认编码解压,中文文件名会出现乱码. 有两种方式解决问题:(建议采用方法 ...
- 使用Emmet加速Web前端开发
Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发.早在2009年,Sergey Chikuyonok写过一篇文章 ...