- 搞定J2EE核心技术与企业应用
- 常建功 王向华编著
- 2279字
- 2025-02-21 16:19:10
8.3 Ajax技术效果
本节将采用传统的Web方式来实现HelloWorld，然后采用Ajax方式来实现HelloWorld，目的是使读者能对比并体会这两种实现方式的特点和区别。
本示例的大体思路是：首先编写JSP页面myHelloWorldOld.jsp，页面上有一个提交按钮，用来获取服务器端返回的信息，然后配置web.xml，再编写服务器端代码即Servlet程序，最后对程序进行测试。
8.3.1 传统实现方式
编写JSP页面myHelloWorldOld.jsp，页面上有一个提交按钮，用来获取服务器端返回的信息，主要包括问候语和服务器当时时间，在按钮的上方有一个显示服务器端信息的地方，具体步骤如下：
01 用鼠标右键单击jsp文件夹，在弹出的快捷菜单中选择“New＞JSP”命令，弹出“Create a new JSP page”对话框，输入文件名为“myHelloWorldOld.jsp”，具体配置如图8.6所示，最后单击“Finish”按钮，即可新建JSP文件myHelloWorldOld.jsp。
图8.6 “Create a new JSP page”对话框
02 关于myHelloWorldOld.jsp文件的代码如下所示：
＜%@ page contentType="text/html; charset=UTF-8" language="java" import="java.sql.＊" errorPage="" %＞
＜%@ page import="java.sql.＊,java.util.＊,javax.servlet.＊,
javax.servlet.http.＊,java.text.＊,java.math.＊"
%＞
＜%
//获取服务器传来的数据
String msg = (String)((request.getAttribute("msg") == null) ? "" : (String)request.getAttribute ("msg"));
%＞
＜html＞
＜head＞
＜title＞传统的Web开发方式＜/title＞
＜/head＞
＜body＞
＜form action="/myHelloWorld/myHelloWorld.do" method="get"＞
＜span id='msg'＞＜%=msg%＞＜/span＞＜br＞
＜input type="submit" value="单击此按钮"/＞
＜/form＞
＜/body＞
＜/html＞
代码说明：
在上述代码中，创建了一个使用get方式的form表单，该表单提交时会发出myHelloWorld.do请求。
03 编写Servlet程序HelloWorldIframe.java，主要用来获取服务器端的时间并组成问候语。用鼠标右键单击包com.myHelloWorld.web，在弹出的快捷菜单中选择“New＞Servlet”命令，弹出“Create a new Servlet”对话框，如图8.7所示。在该对话框中输入相应内容，然后单击“Next”按钮，进入关于Servlet程序配置的对话框，具体配置如图8.8所示。最后单击“Finish”按钮，即可新建类HelloWorldIframe.java和配置文件web.xml。
图8.7 “Create a new Servlet”对话框
图8.8 关于Servlet配置
04 关于HelloWorldIframe.java的代码如下所示：
//＊＊＊＊＊＊＊ HelloWorldOld.java＊＊＊＊＊＊＊＊＊＊＊＊＊＊
package com.myHelloWorld.web;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
//引入Servlet
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//该类继承Servlet类
public class HelloWorldOld extends HttpServlet {
public void doGet(HttpServletRequest request,HttpServletResponse response)throws
IOException,ServletException {
response.setContentType("text/plain;charset=UTF-8");
request.setAttribute("msg","现在时间是："+getCurrentDateAndTime()+" 欢迎您(Hello-World)");
RequestDispatcher rd = request.getRequestDispatcher("/jsp/myHelloWorldOld.jsp");
rd.forward(request, response);
}
/＊＊
＊ 得到当前系统日期,格式：yyyy-MM-dd HH:mm:ss
＊ @return String
＊/
public String getCurrentDateAndTime() {
String currentDate = "";
//设定日期格式
SimpleDateFormat format1 = new SimpleDateFormat("yyyy'-'MM'-'dd HH:mm:ss");
format1.setLenient(false);
currentDate = format1.format(new Date());
//返回当前日期
return currentDate;
}
}
代码说明：
在上述代码中，创建了处理get请求的doGet()方法。在该方法中首先设置了返回页面的编码格式和返回字符串msg的值，然后实现页面的跳转。
05 查看web.xml文件，这是Web程序开发所必需的，web.xml文件的示例代码如下：
＜?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＞
＜servlet-name＞Servlet＜/servlet-name＞
＜servlet-class＞com.myHelloWorld.web.HelloWorldOld＜/servlet-class＞
＜/servlet＞
＜!--设定Servlet的对应关系--＞
＜servlet-mapping＞
＜servlet-name＞Servlet＜/servlet-name＞
＜url-pattern＞＊.do＜/url-pattern＞
＜/servlet-mapping＞
＜/web-app＞
上述代码完成后，在MyEclipse上启动Tomcat，然后在浏览器的地址栏中输入http://localhost:8080/myHelloWorld/jsp/myHelloWorldOld.jsp，即可看到有“单击此按钮”提示的画面，如图8.9所示。单击“单击此按钮”按钮，页面刷新后即可显示出服务器端的时间和欢迎语，如图8.10所示。
图8.9 有“单击此按钮”提示的画面
图8.10 显示出服务器端的时间和欢迎语
8.3.2 Ajax实现方式
本节将采用Ajax方式来实现HelloWorld，本示例的大体思路是：首先编写JSP页面myHelloWorld.jsp，页面上有一个提交按钮，用来获取服务器端返回的信息，然后配置web.xml，再编写服务器端代码即Servlet程序，最后对程序进行测试。具体步骤如下：
01 用鼠标右键单击jsp文件夹，在弹出的快捷菜单中选择“New＞JSP”命令，弹出“Create a new JSP page”对话框，输入文件名为“myHelloWorld.jsp”，具体配置如图8.11所示，最后单击“Finish”按钮，即可新建JSP文件myHelloWorld.jsp。
图8.11 “Create a new JSP page”对话框
02 关于myHelloWorld.jsp文件的代码如下所示：
＜%@ page contentType="text/html; charset=UTF-8" language="java" import="java.sql.＊" errorPage="" %＞
＜html＞
＜head＞
＜title＞Ajax＜/title＞
＜script type="text/javascript"＞
function ok() {
var xmlhttp;
if (window.XMLHttpRequest) {
//非IE浏览器
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
//IE浏览器
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
}
}
//设定回调函数
xmlhttp.onreadystatechange=function(){
if (4 == xmlhttp.readystate) {
if (200 == xmlhttp.status) {
//获取返回值
var msgWeclome = xmlhttp.responseText;
var msg = document.getElementById("msg");
msg.innerHTML = msgWeclome;
}
}
}
//设定请求
xmlhttp.open("get", "http://localhost:8080/myHelloWorld/myHelloWorld.do", true);
//设定http头
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//发送请求
xmlhttp.send(null);
}
＜/script＞
＜/head＞
＜body＞
＜span id='msg'＞＜/span＞＜br＞
＜input type="button" onclick="ok()" value="单击此按钮"/＞
＜/body＞
＜/html＞
代码说明：
在上述代码中，单击按钮就会调用ok方法。为了使用Ajax技术，专门创建了获取XMLHttpRequest对象的方法ok，然后创建了回调方法，最后设定Ajax技术请求、设置HTTP请求头和实现请求的发送。
03 用鼠标右键单击包com.myHelloWorld.web，在弹出的快捷菜单中选择“New＞Servlet”命令，弹出“Create a new Servlet”对话框，如图8.12所示。在该对话框中输入相应内容，然后单击“Next”按钮，进入关于Servlet程序配置的对话框，具体配置如图8.13所示。最后单击“Finish”按钮，即可新建类HelloWorld.java和配置文件web.xml。
图8.12 “Create a new Servlet”对话框
图8.13 关于Servlet配置
04 关于HelloWorld.java文件的代码如下所示：
//＊＊＊＊＊＊＊ HelloWorld.java＊＊＊＊＊＊＊＊＊＊＊＊＊＊
package com.myHelloWorld.web;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
//引入Servlet
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//该类继承Servlet类
public class HelloWorld extends HttpServlet {
public void doGet(HttpServletRequest request,HttpServletResponse response)throws
IOException,ServletException {
response.setContentType("text/plain;charset=UTF-8");
PrintWriter out = response.getWriter();
out.write("现在时间是："+getCurrentDateAndTime()+" 欢迎您(HelloWorld)");
}
/＊＊
＊ 得到当前系统日期,格式：yyyy-MM-dd HH:mm:ss
＊ @return String
＊/
public String getCurrentDateAndTime() {
String currentDate = "";
//设定日期格式
SimpleDateFormat format1 = new SimpleDateFormat("yyyy'-'MM'-'dd HH:mm:ss");
format1.setLenient(false);
currentDate = format1.format(new Date());
//返回当前日期
return currentDate;
}
}
代码说明：
在上述代码中，主要创建了处理Ajax请求的方法doGet()方法，在该方法中为了便于操作，专门创建了实现日期格式化方法getCurrentDateAndTime()。
查看web.xml文件，这是Web程序开发所必需的，web.xml的示例代码如下：
＜?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＞
＜servlet-name＞Servlet＜/servlet-name＞
＜servlet-class＞com.myHelloWorld.web.HelloWorld＜/servlet-class＞
＜/servlet＞
＜!--设定Servlet的对应关系--＞
＜servlet-mapping＞
＜servlet-name＞Servlet＜/servlet-name＞
＜url-pattern＞＊.do＜/url-pattern＞
＜/servlet-mapping＞
＜/web-app＞
上述代码完成后，在MyEclipse上启动Tomcat，然后在浏览器的地址栏中输入http://localhost:8080/myHelloWorld/jsp/myHelloWorld.jsp，即可看到有“单击此按钮”提示的画面，如图8.14所示。
图8.14 有“单击此按钮”提示的画面
单击“单击此按钮”按钮，页面没有刷新，但也可显示出服务器端的时间和欢迎语，如图8.15所示。
图8.15 显示出服务器端的时间和欢迎语
8.3.3 两种实现方式对比分析
通过上面的两种实现方式可以看出，传统的Web实现方式和Ajax实现方式有如下区别：
● Ajax实现方式不用刷新页面，即可获取服务器端的信息；而传统的Web实现方式要刷新页面。
● Ajax实现方式的JSP页面中只有HTML和JavaScript代码，没有和Java代码参杂在一起；而传统的Web实现方式和Java代码参杂在一起。