飞鸟直播平台

書名：搞定J2EE核心技術與企業應用
作者名：常建功王向華編著
本章字數： 2279字
更新時間： 2018-12-29 13:50:13

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代碼參雜在一起。

官术网_书友最值得收藏!

搞定J2EE核心技術與企業應用

8.3 Ajax技術效果

8.3.1 傳統實現方式

8.3.2 Ajax實現方式

8.3.3 兩種實現方式對比分析