- 浏览: 514869 次
- 性别:
- 来自: 惠州
文章分类
- 全部博客 (255)
- ant (1)
- springMVC (2)
- ajax (4)
- oracle (12)
- SSH (13)
- struts1 (2)
- Hibernate (14)
- spring (5)
- jstl (1)
- 连接池 (1)
- acegi (4)
- java (17)
- jquery (11)
- div+css (4)
- drupal (1)
- php (8)
- freemaker调模板生成静态页面 (1)
- xml (1)
- json (2)
- javascript (9)
- 正则表达式 (4)
- Ext (8)
- jdbc (1)
- sql server (2)
- perl (5)
- db4o (1)
- webservice (4)
- flex (13)
- it资讯 (1)
- joomla (0)
- 设计模式 (1)
- struts2 (4)
- s2sh (8)
- linux (3)
- ejb (2)
- android旅途 (24)
- android (36)
- C/C++ (16)
- mysql (1)
最新评论
-
fengyuxing168:
IBelyService bs = IBelyService. ...
为 Android 添加 Java 层服务也就是添加自定义的aidl服务到serviceManager 通过ServiceManager.getService取 -
dengzhangtao:
"由于ActivityManagerService是 ...
binder理解 -
yzyspy:
ActivityManagerService:startHom ...
Android的Launcher成为系统中第一个启动的,也是唯一的 -
Matchstick:
使用SELECT DISTINCT alias FROM Po ...
hibernate 一对多表查询时fetchMode.join 生成left outer join 出来数据重复问题 -
dlheart:
没看懂你什么意思啊,我遇到的问题是一对多,设了fetch = ...
hibernate 一对多表查询时fetchMode.join 生成left outer join 出来数据重复问题
案例4-2 解析XML文档
在Eclipse中新建一个项目,项目的名称为“P42_XMLDOM”。首先,新建一个HTML文档,页面名称为“readXML.jsp”。 该页面实现的效果如图4-4所示。用户单击“测试”按钮,页面中显示从对应XML文档中解析获得的数据信息。
图4-4 在JavaScirpt脚本中解析XML文档的效果
在该例中实现的是从XML文档中读取指定位置的数据信息,然后在HTML页面中进行显示,本例中所使用的XML文档的源代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<classmates>
<student >
<sid>1</sid>
<sname>张桂元</sname>
<gre>1700</gre>
<tse>120</tse>
</student>
<student >
<sid>1</sid>
<sname>贾燕枫</sname>
<gre>1800</gre>
<tse>120</tse>
</student>
<student >
<sid>1</sid>
<sname>张宇翔</sname>
<gre>1800</gre>
<tse>120</tse>
</student>
</classmates>
对该XML文档进行解析的HTML页面的源代码如下所示。在该页面中当用户单击“测试”按钮后,将调用“sendRequest()”函数。在该函数中将直接开始读取MyXml.xml文档中的信息。
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<LINK href="images/css.css" type=text/css rel=stylesheet>
</head>
<script language="javascript">
var XMLHttpReq;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
// 发送请求的函数
function sendRequest() {
var url = "MyXml.xml";
createXMLHttpRequest();
XMLHttpReq.onreadystatechange = processResponse;
XMLHttpReq.open("GET", url, true);
XMLHttpReq.send(null);
}
// 处理响应的函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
readXml();
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 读取XML文档中数据信息的函数,即解析函数
function readXml() {
var students = XMLHttpReq.responseXML.getElementsByTagName("student");
for(var i=0;i<students.length;i++) {
var stud = students[i];
var name = stud.getElementsByTagName("sname")[0].firstChild.data;
var gre = stud.getElementsByTagName("gre")[0].firstChild.data;
var tse = stud.getElementsByTagName("tse")[0].firstChild.data;
document.write(name + "<p>");
document.write(gre + "<p>");
document.write(tse);
document.write("");
}
}
</script>
<table>
<input type="button" value="测试" onclick="sendRequest();"/>
</table>
需要注意的是:在Ajax提交请求时,如果URL地址为文件名称,将开始直接操作对应的XML文档。在进行解析时,首先按照标记名称获取对应的结点数组,然后依据每一个数组元素继续获取子结点的相关信息,层层定位、层层解析。
案例4-3 Ajax的响应处理
在Eclipse中新建一个项目,项目的名称为“P43_Response”。首先,新建一个HTML文档,页面名称为“login.jsp”。 该页面实现的效果如图4-5所示。用户输入对应的登录信息,单击“登录”按钮,页面中将显示登录是否成功的提示信息。
图4-5 登录验证的效果
对应的Web页面的代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script language="javascript">
var XMLHttpReq = false;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
var res=XMLHttpReq.responseText;
window.alert(res);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 身份验证函数
function userCheck() {
var uname = document.myform.uname.value;
var psw = document.myform.psw.value;
if(uname=="") {
window.alert("用户名不能为空。");
document.myform.uname.focus();
return false;
}
else {
sendRequest('login?uname='+ uname + '&psw=' + psw);
}
}
</script>
<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名: <input size="15" name="uname"><p>
密 码: <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" onclick="userCheck()" >
</form>
在上面的页面中,当用户输入用户名及密码信息,单击“登录”按钮后,将调用“userCheck()”函数,在该函数中将首先获取用户填写的信息,进行最基本的数据有效性检查,如果检查通过,将借助Ajax发送请求,并等待服务器端的响应,一旦接收到服务器端的响应数据,则通过LHttpReq.responseText返回对应的数据信息,然后显示在提示窗口中。
该Web应用的配置文件web.xml对应的代码如下所示。从该配置文件中可以了解到,当浏览器端提交“login”请求,服务器端类名为“classmate.LoginAction”的Servlet程序进行处理。
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>ms1</servlet-name>
<servlet-class>classmate.LoginAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ms1</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<!-- The Welcome File List -->
<welcome-file-list>
<welcome-file>login.jsp</welcome-file>
</welcome-file-list>
</web-app>
下面关注一下服务器端Servlet程序LoginAction.java中对应的程序代码。当接收到浏览器端提交的请求后,Servlet程序将首先获取浏览器端提交的用户名及密码信息,然后进行身份验证,本例中为了关注Ajax,没有引入与数据库相关的操作。
package classmate;
import java.io.IOException;
……
public class LoginAction extends HttpServlet {
public void init(ServletConfig config) throws ServletException {
}
/*
* 处理<GET> 请求方法
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置接收信息的字符集
request.setCharacterEncoding("UTF-8");
//接收浏览器端提交的信息
String uname = request.getParameter("uname");
String psw = request.getParameter("psw");
//设置输出信息的格式及字符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
//创建输出流对象
PrintWriter out = response.getWriter();
//依据验证结果输出不同的数据信息
if(uname.equals("jenny") && psw.equals("hi")){
out.println("热烈的欢迎您!");
}else{
out.println("对不起,登录失败!");
}
out.close();
}
}
如果验证通过,将返回“热烈的欢迎您!”的提示,如果验证失败,将显示“对不起,登录失败!”的信息,信息是以responseText的格式返回客户端的。
案例4-4 Ajax的请求处理
在Eclipse中新建一个项目,项目的名称为“P44_Request”。首先,新建一个HTML文档,页面名称为“login.jsp”。 本例中实现的效果与案例4-3相同,这里不再赘述,下面看一下具体的实现页面。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script language="javascript">
var XMLHttpReq = false;
var uname;
var psw;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest() {
createXMLHttpRequest();
XMLHttpReq.open("POST", "login", true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLHttpReq.send("uname=" + uname + "&psw=" + psw); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].first Child.data;
window.alert(res);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 身份验证函数
function userCheck() {
uname = document.myform.uname.value;
psw = document.myform.psw.value;
if(uname=="") {
window.alert("用户名不能为空。");
document.myform.uname.focus();
return false;
}
else {
sendRequest();
}
}
</script>
<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名: <input size="15" name="uname"><p>
密 码: <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" onclick="userCheck()" >
</form>
可以看到,如果以POST方式提交请求,需要配合使用下面的代码完成正确的请求及参数的提交。
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLHttpReq.send("uname=" + uname + "&psw=" + psw);
其中第一条语句是为了确保服务器知道请求体中有请求参数,而最终是通过调用send()方法将串作为参数进行传递。服务器端的Servlet程序处理过程与前面的案例相同,不再赘述。
4.4.2 提交XML格式的请求参数
除了可以处理已经有的 XML文档之外,在Ajax技术中还可以在向服务器端提交请求时,将请求的参数作为XML的格式进行发送。即将XML文档作为请求体的一部分发送到服务器,在服务器端可以从请求体中读取XML,并加以处理。
下面我们继续对案例4-4中的login.jsp页面进行调整。调整后的页面代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script language="javascript">
var XMLHttpReq = false;
var uname;
var psw;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest() {
createXMLHttpRequest();
var xml = createXML();
window.alert(xml);
XMLHttpReq.open("POST", "login", true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form- urlencoded");
XMLHttpReq.send(xml); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
var res=XMLHttpReq.responseText;
window.alert(res);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 身份验证函数
function userCheck() {
uname = document.myform.uname.value;
psw = document.myform.psw.value;
if(uname=="") {
window.alert("用户名不能为空。");
document.myform.uname.focus();
return false;
}
else {
sendRequest();
}
}
//创建XML
function createXML() {
var xml = "<user>";
xml = xml + "<name>" +uname + "<\/name>";
xml = xml + "<psw>" + psw + "<\/psw>";
xml = xml + "<\/user>";
return xml;
}
</script>
<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名: <input size="15" name="uname"><p>
密 码: <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" onclick="userCheck()" >
</form>
在上面的页面中,一旦开始调用函数进行请求的发送处理时,将会首先借助“createXML()”函数将获取到的用户名及密码信息封装成XML文档的格式。然后在采用POST方式将其作为参数提交过去。
下面介绍一下XML格式的数据提交到服务器端之后,如何解析的?对应的服务器端Servlet程序代码如下:
package classmate;
import java.io.BufferedReader;
……
import org.w3c.dom.Document;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;
public class LoginXmlAction extends HttpServlet {
public void init(ServletConfig config) throws ServletException {
}
/*
* 处理<POST>请求方法
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置接收信息的字符集
request.setCharacterEncoding("UTF-8");
//
StringBuffer bxml = new StringBuffer();
String line = null;
try {
BufferedReader reader = request.getReader();
while((line = reader.readLine()) != null) {
bxml.append(line);
}
}
catch(Exception e) {
System.out.println(e.toString());
}
String xml =bxml.toString();
Document xmlDoc = null;
try {
xmlDoc =
DocumentBuilderFactory.newInstance().newDocumentBuilder()
.parse(new ByteArrayInputStream(xml.getBytes()));
}
catch(ParserConfigurationException e) {
System.out.println(e);
}
catch(SAXException e) {
System.out.println( e);
}
String uname = xmlDoc.getElementsByTagName("name").item(0).getFirstChild().getNodeValue();
String psw = xmlDoc.getElementsByTagName("psw").item(0).getFirstChild().getNodeValue();
String responseText;
//依据验证结果输出不同的数据信息
if(uname.equals("jenny") && psw.equals("hi")){
responseText = "热烈的欢迎您!" ;
}else{
responseText = "对不起,登录失败!";
}
//设置输出信息的格式及字符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().print(responseText);
}
}
注意在Java程序中,为了实现对XML格式数据的解析,需要首先导入与其相关的类所在的包。然后借助DocumentBuilderFactory提供的相关方法进行解析。
首先,我们需要建立一个解析器工厂,利用这个工厂来获得一个具体的解析器对象:
DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
当获得一个工厂对象后,使用它的静态方法newDocumentBuilder()方法可以获得一个DocumentBuilder对象,这个对象代表了具体的DOM解析器。
然后,我们就可以利用这个解析器来对XML文档进行解析了:
Document doc = db.parse("c:/xml/message.xml");
DocumentBuilder的parse()方法接受一个XML文档名作为输入参数,返回一个Document对象,这个Document对象就代表了一个XML文档的树模型。以后所有的对XML文档的操作,都与解析器无关,直接在这个Document对象上进行操作就可以了。而具体对Document操作的方法,就是由DOM所定义的。
从上面得到的Document对象开始,就可以开始按照DOM的方式进行解析。使用Document对象的getElementsByTagName()方法,可以得到一个NodeList对象,一个Node对象代表一个XML文档中一个标签元素,而NodeList对象,它所代表的是一个Node对象的列表。然后,可以使用NodeList对象的item()方法来得到列表中每一个Node对象。当一个Node对象被建立之后,保存在XML文档中的数据就被提取出来并封装在这个Node中。然后再使用getFirstChild()方法来获得对应标记下面的第一个子Node对象。依此类推就可以获取到对应的数据,开始使用了。
案例4-5 页面中拖拽效果的实现
可拖放DOM模式(Draggable DOM pattern)可以让用户在Web页面中对各个部分进行编辑,即只需要选中要移动的部分,将其拖拽到新的位置上,就可以重新安排整个页面的布局效果,下面介绍一下具体的实现方式。
在Eclipse中新建一个项目,项目的名称为“P45_DropDrag”。首先,新建一个HTML文档,页面名称为“main.html”。 该页面实现的效果如图4-6所示。当用户使用鼠标选中对应的方框时,就可以通过拖拽调整其在页面中的位置。
图4-6 拖拽效果
本例中所使用的HTML文档的源代码如下所示。注意在本页面中调用了一个开源框架中有关定位的JavaScript脚本文件,读者可以参考本书配套光盘中的源代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Main</title>
<script language="javascript" src="dom-drag.js"></script>
<link rel="stylesheet" href="style.css">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<div id="news_root" style="LEFT:20px; TOP:20px" class="root">
<div id="news_handle" class="handle">定制窗口<span style="TEXT-ALIGN: right"></span></div>
<div id="news" class="text">欢迎使用拖拽功能</div>
</div>
</form>
<script language="javascript">
// 初始化新闻面板的拖动效果
var news_handle = document.getElementById("news_handle");
var news_root = document.getElementById("news_root");
Drag.init(news_handle, news_root);
news.style.backgroundColor = "#ffff00";
news.style.cursor = "hand";
</script>
</body>
</HTML>
层叠样式表文件对应的代码如下:
.root
{
position:absolute;
height:150px; width:200px;
border:1px solid #333;
BACKGROUND-COLOR: #eee
}
.handle
{
margin:2px;
padding:2px;
width:194px;
color:white;
background-color:navy;
font-family:verdana, sans-serif;
font-size:12px;
}
.text
{
color:navy;
font-family:verdana, sans-serif;
font-size:12px;
}
在Eclipse中新建一个项目,项目的名称为“P42_XMLDOM”。首先,新建一个HTML文档,页面名称为“readXML.jsp”。 该页面实现的效果如图4-4所示。用户单击“测试”按钮,页面中显示从对应XML文档中解析获得的数据信息。
图4-4 在JavaScirpt脚本中解析XML文档的效果
在该例中实现的是从XML文档中读取指定位置的数据信息,然后在HTML页面中进行显示,本例中所使用的XML文档的源代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<classmates>
<student >
<sid>1</sid>
<sname>张桂元</sname>
<gre>1700</gre>
<tse>120</tse>
</student>
<student >
<sid>1</sid>
<sname>贾燕枫</sname>
<gre>1800</gre>
<tse>120</tse>
</student>
<student >
<sid>1</sid>
<sname>张宇翔</sname>
<gre>1800</gre>
<tse>120</tse>
</student>
</classmates>
对该XML文档进行解析的HTML页面的源代码如下所示。在该页面中当用户单击“测试”按钮后,将调用“sendRequest()”函数。在该函数中将直接开始读取MyXml.xml文档中的信息。
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<LINK href="images/css.css" type=text/css rel=stylesheet>
</head>
<script language="javascript">
var XMLHttpReq;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
// 发送请求的函数
function sendRequest() {
var url = "MyXml.xml";
createXMLHttpRequest();
XMLHttpReq.onreadystatechange = processResponse;
XMLHttpReq.open("GET", url, true);
XMLHttpReq.send(null);
}
// 处理响应的函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
readXml();
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 读取XML文档中数据信息的函数,即解析函数
function readXml() {
var students = XMLHttpReq.responseXML.getElementsByTagName("student");
for(var i=0;i<students.length;i++) {
var stud = students[i];
var name = stud.getElementsByTagName("sname")[0].firstChild.data;
var gre = stud.getElementsByTagName("gre")[0].firstChild.data;
var tse = stud.getElementsByTagName("tse")[0].firstChild.data;
document.write(name + "<p>");
document.write(gre + "<p>");
document.write(tse);
document.write("");
}
}
</script>
<table>
<input type="button" value="测试" onclick="sendRequest();"/>
</table>
需要注意的是:在Ajax提交请求时,如果URL地址为文件名称,将开始直接操作对应的XML文档。在进行解析时,首先按照标记名称获取对应的结点数组,然后依据每一个数组元素继续获取子结点的相关信息,层层定位、层层解析。
案例4-3 Ajax的响应处理
在Eclipse中新建一个项目,项目的名称为“P43_Response”。首先,新建一个HTML文档,页面名称为“login.jsp”。 该页面实现的效果如图4-5所示。用户输入对应的登录信息,单击“登录”按钮,页面中将显示登录是否成功的提示信息。
图4-5 登录验证的效果
对应的Web页面的代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script language="javascript">
var XMLHttpReq = false;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
var res=XMLHttpReq.responseText;
window.alert(res);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 身份验证函数
function userCheck() {
var uname = document.myform.uname.value;
var psw = document.myform.psw.value;
if(uname=="") {
window.alert("用户名不能为空。");
document.myform.uname.focus();
return false;
}
else {
sendRequest('login?uname='+ uname + '&psw=' + psw);
}
}
</script>
<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名: <input size="15" name="uname"><p>
密 码: <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" onclick="userCheck()" >
</form>
在上面的页面中,当用户输入用户名及密码信息,单击“登录”按钮后,将调用“userCheck()”函数,在该函数中将首先获取用户填写的信息,进行最基本的数据有效性检查,如果检查通过,将借助Ajax发送请求,并等待服务器端的响应,一旦接收到服务器端的响应数据,则通过LHttpReq.responseText返回对应的数据信息,然后显示在提示窗口中。
该Web应用的配置文件web.xml对应的代码如下所示。从该配置文件中可以了解到,当浏览器端提交“login”请求,服务器端类名为“classmate.LoginAction”的Servlet程序进行处理。
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>ms1</servlet-name>
<servlet-class>classmate.LoginAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ms1</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<!-- The Welcome File List -->
<welcome-file-list>
<welcome-file>login.jsp</welcome-file>
</welcome-file-list>
</web-app>
下面关注一下服务器端Servlet程序LoginAction.java中对应的程序代码。当接收到浏览器端提交的请求后,Servlet程序将首先获取浏览器端提交的用户名及密码信息,然后进行身份验证,本例中为了关注Ajax,没有引入与数据库相关的操作。
package classmate;
import java.io.IOException;
……
public class LoginAction extends HttpServlet {
public void init(ServletConfig config) throws ServletException {
}
/*
* 处理<GET> 请求方法
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置接收信息的字符集
request.setCharacterEncoding("UTF-8");
//接收浏览器端提交的信息
String uname = request.getParameter("uname");
String psw = request.getParameter("psw");
//设置输出信息的格式及字符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
//创建输出流对象
PrintWriter out = response.getWriter();
//依据验证结果输出不同的数据信息
if(uname.equals("jenny") && psw.equals("hi")){
out.println("热烈的欢迎您!");
}else{
out.println("对不起,登录失败!");
}
out.close();
}
}
如果验证通过,将返回“热烈的欢迎您!”的提示,如果验证失败,将显示“对不起,登录失败!”的信息,信息是以responseText的格式返回客户端的。
案例4-4 Ajax的请求处理
在Eclipse中新建一个项目,项目的名称为“P44_Request”。首先,新建一个HTML文档,页面名称为“login.jsp”。 本例中实现的效果与案例4-3相同,这里不再赘述,下面看一下具体的实现页面。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script language="javascript">
var XMLHttpReq = false;
var uname;
var psw;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest() {
createXMLHttpRequest();
XMLHttpReq.open("POST", "login", true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLHttpReq.send("uname=" + uname + "&psw=" + psw); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].first Child.data;
window.alert(res);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 身份验证函数
function userCheck() {
uname = document.myform.uname.value;
psw = document.myform.psw.value;
if(uname=="") {
window.alert("用户名不能为空。");
document.myform.uname.focus();
return false;
}
else {
sendRequest();
}
}
</script>
<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名: <input size="15" name="uname"><p>
密 码: <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" onclick="userCheck()" >
</form>
可以看到,如果以POST方式提交请求,需要配合使用下面的代码完成正确的请求及参数的提交。
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLHttpReq.send("uname=" + uname + "&psw=" + psw);
其中第一条语句是为了确保服务器知道请求体中有请求参数,而最终是通过调用send()方法将串作为参数进行传递。服务器端的Servlet程序处理过程与前面的案例相同,不再赘述。
4.4.2 提交XML格式的请求参数
除了可以处理已经有的 XML文档之外,在Ajax技术中还可以在向服务器端提交请求时,将请求的参数作为XML的格式进行发送。即将XML文档作为请求体的一部分发送到服务器,在服务器端可以从请求体中读取XML,并加以处理。
下面我们继续对案例4-4中的login.jsp页面进行调整。调整后的页面代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script language="javascript">
var XMLHttpReq = false;
var uname;
var psw;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest() {
createXMLHttpRequest();
var xml = createXML();
window.alert(xml);
XMLHttpReq.open("POST", "login", true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form- urlencoded");
XMLHttpReq.send(xml); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
var res=XMLHttpReq.responseText;
window.alert(res);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 身份验证函数
function userCheck() {
uname = document.myform.uname.value;
psw = document.myform.psw.value;
if(uname=="") {
window.alert("用户名不能为空。");
document.myform.uname.focus();
return false;
}
else {
sendRequest();
}
}
//创建XML
function createXML() {
var xml = "<user>";
xml = xml + "<name>" +uname + "<\/name>";
xml = xml + "<psw>" + psw + "<\/psw>";
xml = xml + "<\/user>";
return xml;
}
</script>
<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名: <input size="15" name="uname"><p>
密 码: <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" onclick="userCheck()" >
</form>
在上面的页面中,一旦开始调用函数进行请求的发送处理时,将会首先借助“createXML()”函数将获取到的用户名及密码信息封装成XML文档的格式。然后在采用POST方式将其作为参数提交过去。
下面介绍一下XML格式的数据提交到服务器端之后,如何解析的?对应的服务器端Servlet程序代码如下:
package classmate;
import java.io.BufferedReader;
……
import org.w3c.dom.Document;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;
public class LoginXmlAction extends HttpServlet {
public void init(ServletConfig config) throws ServletException {
}
/*
* 处理<POST>请求方法
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置接收信息的字符集
request.setCharacterEncoding("UTF-8");
//
StringBuffer bxml = new StringBuffer();
String line = null;
try {
BufferedReader reader = request.getReader();
while((line = reader.readLine()) != null) {
bxml.append(line);
}
}
catch(Exception e) {
System.out.println(e.toString());
}
String xml =bxml.toString();
Document xmlDoc = null;
try {
xmlDoc =
DocumentBuilderFactory.newInstance().newDocumentBuilder()
.parse(new ByteArrayInputStream(xml.getBytes()));
}
catch(ParserConfigurationException e) {
System.out.println(e);
}
catch(SAXException e) {
System.out.println( e);
}
String uname = xmlDoc.getElementsByTagName("name").item(0).getFirstChild().getNodeValue();
String psw = xmlDoc.getElementsByTagName("psw").item(0).getFirstChild().getNodeValue();
String responseText;
//依据验证结果输出不同的数据信息
if(uname.equals("jenny") && psw.equals("hi")){
responseText = "热烈的欢迎您!" ;
}else{
responseText = "对不起,登录失败!";
}
//设置输出信息的格式及字符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().print(responseText);
}
}
注意在Java程序中,为了实现对XML格式数据的解析,需要首先导入与其相关的类所在的包。然后借助DocumentBuilderFactory提供的相关方法进行解析。
首先,我们需要建立一个解析器工厂,利用这个工厂来获得一个具体的解析器对象:
DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
当获得一个工厂对象后,使用它的静态方法newDocumentBuilder()方法可以获得一个DocumentBuilder对象,这个对象代表了具体的DOM解析器。
然后,我们就可以利用这个解析器来对XML文档进行解析了:
Document doc = db.parse("c:/xml/message.xml");
DocumentBuilder的parse()方法接受一个XML文档名作为输入参数,返回一个Document对象,这个Document对象就代表了一个XML文档的树模型。以后所有的对XML文档的操作,都与解析器无关,直接在这个Document对象上进行操作就可以了。而具体对Document操作的方法,就是由DOM所定义的。
从上面得到的Document对象开始,就可以开始按照DOM的方式进行解析。使用Document对象的getElementsByTagName()方法,可以得到一个NodeList对象,一个Node对象代表一个XML文档中一个标签元素,而NodeList对象,它所代表的是一个Node对象的列表。然后,可以使用NodeList对象的item()方法来得到列表中每一个Node对象。当一个Node对象被建立之后,保存在XML文档中的数据就被提取出来并封装在这个Node中。然后再使用getFirstChild()方法来获得对应标记下面的第一个子Node对象。依此类推就可以获取到对应的数据,开始使用了。
案例4-5 页面中拖拽效果的实现
可拖放DOM模式(Draggable DOM pattern)可以让用户在Web页面中对各个部分进行编辑,即只需要选中要移动的部分,将其拖拽到新的位置上,就可以重新安排整个页面的布局效果,下面介绍一下具体的实现方式。
在Eclipse中新建一个项目,项目的名称为“P45_DropDrag”。首先,新建一个HTML文档,页面名称为“main.html”。 该页面实现的效果如图4-6所示。当用户使用鼠标选中对应的方框时,就可以通过拖拽调整其在页面中的位置。
图4-6 拖拽效果
本例中所使用的HTML文档的源代码如下所示。注意在本页面中调用了一个开源框架中有关定位的JavaScript脚本文件,读者可以参考本书配套光盘中的源代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Main</title>
<script language="javascript" src="dom-drag.js"></script>
<link rel="stylesheet" href="style.css">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<div id="news_root" style="LEFT:20px; TOP:20px" class="root">
<div id="news_handle" class="handle">定制窗口<span style="TEXT-ALIGN: right"></span></div>
<div id="news" class="text">欢迎使用拖拽功能</div>
</div>
</form>
<script language="javascript">
// 初始化新闻面板的拖动效果
var news_handle = document.getElementById("news_handle");
var news_root = document.getElementById("news_root");
Drag.init(news_handle, news_root);
news.style.backgroundColor = "#ffff00";
news.style.cursor = "hand";
</script>
</body>
</HTML>
层叠样式表文件对应的代码如下:
.root
{
position:absolute;
height:150px; width:200px;
border:1px solid #333;
BACKGROUND-COLOR: #eee
}
.handle
{
margin:2px;
padding:2px;
width:194px;
color:white;
background-color:navy;
font-family:verdana, sans-serif;
font-size:12px;
}
.text
{
color:navy;
font-family:verdana, sans-serif;
font-size:12px;
}
相关推荐
- **书名**:《专业Web 2.0编程》(Professional Web 2.0 Programming) - **作者**:Eric van der Vlist, Alessandro Vernet, Erik Bruchez, Joe Fawcett 和 Danny Ayers - **出版商**:Wiley Publishing, Inc. - *...
- **书名**:《Ajax——Web 2.0目标实现指南》 - **出版社**:电子工业出版社 - **简介**:本书侧重于如何使用Ajax技术实现Web 2.0的目标。 - **网址**:...
4. **JSON数据交换**:尽管书名提到XML,但现代Ajax更多使用JSON,因此会涉及到JSON的解析和序列化。 5. **Ajax设计模式**:探讨如何在实际项目中组织和结构化Ajax代码,以保持代码的可维护性和可扩展性。 6. **...
虽然书名中包含JavaScript和Ajax,但这些技术通常与XML配合使用,实现异步数据交互,提升网页性能。书中可能会介绍XMLHttpRequest对象的使用,以及如何利用jQuery或其他库简化Ajax操作。 PHP作为另一种流行的Web...
在IT行业中,jQuery(简称JQ...总之,jQuery的`ajax`函数结合适当的XML解析技巧,使得在Web应用中处理XML数据变得简单易行。无论是数据的获取还是后续的处理,都可以通过一行行简洁的代码完成,极大地提高了开发效率。
《Pro Ajax and Java》这本书深入探讨了Ajax与Java在现代Web开发中的应用,结合实际案例,为读者提供了全面而深入的指导。以下是根据书名、描述、标签以及部分目录内容提炼出的关键知识点: ### 关键知识点一:Ajax...
《图书管理系统:Java Web开发深度解析》 在IT领域,Java Web开发是不可或缺的一部分,尤其在企业级应用中,其重要性不言而喻。本项目以“图书管理系统”为载体,结合Java课程设计,旨在深入讲解Java Web开发的关键...
【JavaWeb图书馆管理系统项目源码解析】 在JavaWeb开发领域,图书馆管理系统是一个常见的学习和实践项目,它能够帮助开发者深入理解Web应用的基本架构、数据库交互以及用户界面设计。本项目以"Java web项目-图书馆...
XML的结构清晰,易于机器解析和生成,因此在Web开发、数据交换、配置文件等领域广泛应用。 1. **XML的基本结构** XML文档由元素构成,每个元素都包含开始标签和结束标签,如`<element>`和`</element>`。元素可以...
总的来说,这个“书籍查询-Ajax实例”涵盖了前端交互设计、后端处理、数据库操作、数据交换格式和用户体验等多个方面,是学习和实践Ajax技术的一个良好示例。通过这个实例,开发者可以深入了解如何利用Ajax实现动态...
《Ajax For Dummies》是一本面向初学者的入门书籍,旨在帮助读者快速掌握Ajax的基础知识和实践技巧。书中可能涵盖了以下几个关键主题: 1. **基础理论**:解释了Ajax的工作原理,包括JavaScript、DOM(文档对象模型...
2005年,在web 2.0热潮中,ajax横空出世,迅速成为最炙手可热的web开发技术。google、microsoft、amazon和yahoo都已经全面采用ajax,新一代的网站如雨后春笋,迅速兴起。.. 什么是ajax? ajax为什么会这么热,它...
【Java Web项目源码——图书馆管理系统项目】 Java Web是一种基于Java技术的服务器端开发平台,用于构建和部署可移植、安全、多用户交互的网络应用。这个“图书馆管理系统项目源码”提供了一个实际应用场景,帮助...
### Apress.Pro.JSF.and.Ajax - 关键知识点解析 #### 一、书籍基本信息 - **书名**:《Pro JSF and Ajax: Building Rich Internet Components》 - **作者**:Jonas Jacobi 和 John R. Fallows - **出版年份**:...
在Web开发中,XML常常与XSLT(Extensible Stylesheet Language Transformations)结合使用,XSLT是一种语言,用于转换XML文档的结构和内容。通过XSLT,开发者可以将XML数据转换成HTML,便于浏览器呈现,或者转化为...
【基于AJAX的图书销售系统】是一个利用AJAX(异步JavaScript和XML)技术构建的Web应用程序,旨在提供一种高效、交互性强的在线图书购买体验。在这个系统中,用户可以在不刷新整个页面的情况下进行图书浏览、搜索、...