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后中 ...
随机推荐
- UIViewContentMode 图文解说
在iOS应用开发中我们常常要对视图的contentMode属性进行设置,尤其在使用UIImageView视图时设置这个属性的概率很高.我们知道contentMode的类型是UIViewContentM ...
- cmd下载文件
进入cmd 输入ftp 192.168.1.200 然后按照提示输入用户名和密码 cd 进入要下载的目录 dir 看操作权限 lcd查看本地要装下载文件的目录 prompt关闭交互模式 mget da ...
- Listview和checkbox多选
在Android某些开发需求当中,有时候需要在listveiw中加入checkbox实现单选,多选操作.表面上看上去只是改变checkbox那么简单,然而实际开发中,实现起来并不是那么得心应手.尤其当 ...
- angular.js简介
angularJS是一个javaScript框架.可通过<script>标签添加到HTML页面 angular通过指令扩展了HTML,且通过表达式绑定数据到html 当网页加载完毕,Ang ...
- android 去掉listview之间的黑线
方法1:listView.setDividerHeight(0);方法2:this.getListView().setDivider(null);方法3:android:divider="@ ...
- 极光推送,极光IM使用指南（AndroidStudio）
到官网创建一个应用,然后下载上面的例子程序,对照集成文档,把libs里的jar和so文件放入到本项目的libs下面,记得把jar要as a library,然后配置清单文件,对照着Demo来,配置好之 ...
- android从asset文件夹读取文件
1)将一个txt文本(msg.txt)复制到开发目录的asset文件夹下. 2)用getAssets().open()可以得到一个输入流.注意getAssets方法必须用在Activity下边.如果不 ...
- label ichartjs
的 var labels = [""+(time(-59).getMonth()+1)+"/"+time(-59).getDate()+"" ...
- linux仅修改文件夹权限；linux 分别批量修改文件和文件夹权限
比如我想把/var/www/html下的文件全部改成664,文件夹改成775,怎么做呢 方法一: 先把所有文件及文件夹改成664,然后把所有文件夹改成775 root@iZ25bq9kj7yZ:/ c ...
- JavaScript：有符号整数与无符号整数相互转化
确实巧妙:原文http://blog.csdn.net/kandyer/article/details/8241937 <script language="JavaScript&quo ...