基於java的ajax操作

一、開門見山

    這些時間，瞎子也看得見，AJAX正大踏步的朝我們走來。不管我們是擁護也好，反對也罷，還是視而不見，AJAX像一陣潮流，席轉了我們所有的人。
    關於AJAX的定義也好，大話也好，早有人在網上發表了汗牛充棟的文字，在這裏我也不想照本宣科。
    只想說說我感覺到的一些優點，對於不對，大家也可以和我討論：
    首先是異步交互，用戶感覺不到頁面的提交，當然也不等待頁面返回。這是使用了AJAX技術的頁面給用戶的第一感覺。
    其次是響應速度快，這也是用戶強烈體驗。
    然後是與我們開發者相關的，複雜UI的成功處理，一直以來，我們對B/S模式的UI不如C/S模式UI豐富而苦惱。現在由於AJAX大量使用JS，使得複雜的UI的設計變得更加成功。
    最後，AJAX請求的返回對象爲XML文件，這也是一個潮流，就是WEB SERVICE潮流一樣。易於和WEB SERVICE結合起來。
   好了，閒話少說，讓我們轉入正題吧。
    我們的第一個例子是基於Servlet爲後臺的一個web應用。

二、基於Servlet的AJAX

第一個例子是關於關聯選擇框的問題，如圖：

    這是一個很常見的UI，當用戶在第一個選擇框裏選擇ZHEJIANG時，第二個選擇框要出現ZHEJIANG的城市；當用戶在第一個選擇框裏選擇JIANGSU時，第二個選擇框裏要出現JIANGSU的城市。
    首先，我們來看配置文件web.xml，在裏面配置一個servlet，跟往常一樣：
<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>SelectCityServlet</servlet-name>
<servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>SelectCityServlet</servlet-name>
<url-pattern>/servlet/SelectCityServlet</url-pattern>
</servlet-mapping>

</web-app>

    然後，來看我們的JSP文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">



</head>
<script type="text/javascript">
function getResult(stateVal) {
         var url = "servlet/SelectCityServlet?state="+stateVal;
         if (window.XMLHttpRequest) {
                 req = new XMLHttpRequest();
         }else if (window.ActiveXObject) {
                 req = new ActiveXObject("Microsoft.XMLHTTP");
         }
         if(req){
                 req.open("GET",url, true);
                 req.onreadystatechange = complete;
                 req.send(null);
         }
}
function complete(){
         if (req.readyState == 4) {
                 if (req.status == 200) {
                         var city = req.responseXML.getElementsByTagName("city");
                         //alert(city.length);
                         var str=new Array();
                         for(var i=0;i<city.length;i++){
                                 str[i]=city[i].firstChild.data;
                         }
                         //alert(document.getElementById("city"));
                         buildSelect(str,document.getElementById("city"));
                 }
         }
}
function buildSelect(str,sel) {
         sel.options.length=0;
         for(var i=0;i<str.length;i++) {
                 sel.options[sel.options.length]=new Option(str[i],str[i])
         }
}
</script>
<body>
<select name="state" onChange="getResult(this.value)">
         <option value="">Select</option>>
         <option value="zj">ZEHJIANG</option>>
         <option value="zs">JIANGSU</option>>
</select>
<select id="city">
     <option value="">CITY</option>
</select>
</body>
</html>

    第一眼看來，跟我們平常的JSP沒有兩樣。仔細一看，不同在JS裏頭。
    我們首先來看第一個方法：getResult(stateVal)，在這個方法裏，首先是取得XmlHttpRequest；然後設置該請求的url：req.open("GET",url, true);接着設置請求返回值的接收方法：req.onreadystatechange = complete;該返回值的接收方法爲——complete();最後是發送請求：req.send(null);
    然後我們來看我們的返回值接收方法：complete()，這這個方法裏，首先判斷是否正確返回，如果正確返回，用DOM對返回的XML文件進行解析。關於DOM的使用，這裏不再講述，請大家參閱相關文檔。得到city的值以後，再通過buildSelect(str,sel)方法賦值到相應的選擇框裏頭去。

    最後我們來看看Servlet文件：
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;

/**
* @author Administrator
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
public class SelectCityServlet extends HttpServlet {

     public SelectCityServlet() {
             super();
     }

     public void destroy() {
             super.destroy();
     }

     public void doGet(HttpServletRequest request, HttpServletResponse response)
                     throws ServletException, IOException {
             response.setContentType("text/xml");
             response.setHeader("Cache-Control", "no-cache");
             String state = request.getParameter("state");
             StringBuffer sb=new StringBuffer("<state>");
             if ("zj".equals(state)){
                     sb.append("<city>hangzhou</city><city>huzhou</city>");
             } else if("zs".equals(state)){
                     sb.append("<city>nanjing</city><city>yangzhou</city><city>suzhou</city>");
             }
             sb.append("</state>");
             PrintWriter out=response.getWriter();
             out.write(sb.toString());
             out.close();
     }
}
    這個類也十分簡單，首先是從request裏取得state參數，然後根據state參數生成相應的XML文件，最後將XML文件輸出到PrintWriter對象裏。
    到現在爲止，第一個例子的代碼已經全部結束。是不是比較簡單？我們進入到第二個實例吧！
    這次是基於JSP的AJAX的一個應用。

三、基於JSP的AJAX

這個例子是關於輸入校驗的問題，我們知道，在申請用戶的時候，需要去數據庫對該用戶性進行唯一性確認，然後才能繼續往下申請。如圖：

    這種校驗需要訪問後臺數據庫，但又不希望用戶在這裏提交後等待，當然是AJAX技術大顯身手的時候了。
    首先來看顯示UI的JSP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Check.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">



</head>
<script type="text/javascript">
  var http_request = false;
function send_request(url) {//初始化、指定處理函數、發送請求的函數
   http_request = false;
   //開始初始化XMLHttpRequest對象
   if(window.XMLHttpRequest) { //Mozilla 瀏覽器
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {//設置MiME類別
     http_request.overrideMimeType('text/xml');
    }
   }
   else if (window.ActiveXObject) { // IE瀏覽器
    try {
     http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
     try {
      http_request = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e) {}
    }
   }
   if (!http_request) { // 異常，創建對象實例失敗
    window.alert("不能創建XMLHttpRequest對象實例.");
    return false;
   }
   http_request.onreadystatechange = processRequest;
   // 確定發送請求的方式和URL以及是否同步執行下段代碼
   http_request.open("GET", url, true);
   http_request.send(null);
}
// 處理返回信息的函數
     function processRequest() {
         if (http_request.readyState == 4) { // 判斷對象狀態
             if (http_request.status == 200) { // 信息已經成功返回，開始處理信息
                 alert(http_request.responseText);
             } else { //頁面不正常
                 alert("您所請求的頁面有異常。");
             }
         }
     }
function userCheck() {
   var f = document.form1;
   var username = f.username.value;
   if(username=="") {
    window.alert("The user name can not be null!");
    f.username.focus();
    return false;
   }
   else {
    send_request('check1.jsp?username='+username);
   }
}

</script>
<body>
  <form name="form1" action="" method="post">
User Name:<input type="text" name="username" value=""> 
<input type="button" name="check" value="check" onClick="userCheck()">
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>

    所有的JS都跟上一個例子一樣，不同的只是對返回值的操作，這次是用alert來顯示：alert(http_request.responseText);
    我們來看處理邏輯JSP:
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<%
String username= request.getParameter("username");
if("educhina".equals(username)) out.print("用戶名已經被註冊，請更換一個用戶名。");
else out.print("用戶名尚未被使用，您可以繼續。");
%>

    非常簡單，先取得參數，然後作處理，最後將結果打印在out裏。
    我們的第三個例子仍然以這個唯一性校驗爲例子，這次結合Struts開發框架來完成AJAX的開發。

四、基於Struts的AJAX

首先，我們仍然是對Struts應用來做配置，仍然是在struts-config,xml文件裏做配置，如下：
<action type="com.ajax.CheckAction"
     scope="request" path="/ajax/check">
       <forward name="success" path="/check.jsp"/>
</action>

    跟普通的Struts應用的配置一樣，只是沒有ActionForm的配置。
    下面是Action類：
package com.ajax;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.action.DynaActionForm;

/**
* @author Administrator
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
public class CheckAction extends Action
{
  public final ActionForward execute(ActionMapping mapping, ActionForm form,
             HttpServletRequest request,
             HttpServletResponse response)
   throws Exception
   {
    System.out.println("haha...............................");
    String username= request.getParameter("username");
    System.out.println(username);
    String retn;
    if("educhina".equals(username)) retn = "Can't use the same name with the old use,pls select a difference...";
    else retn = "congraducation!you can use this name....";
    PrintWriter out=response.getWriter();
             out.write(retn);
             out.close();
    return mapping.findForward("success");
   }
  public static void main(String[] args)
  {
  }
}

    我們可以看到裏面的邏輯跟上例中Servlet裏的邏輯一樣。最後，我們來看看JSP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Check.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">



</head>
<script type="text/javascript">
  var http_request = false;
function send_request(url) {//初始化、指定處理函數、發送請求的函數
   http_request = false;
   //開始初始化XMLHttpRequest對象
   if(window.XMLHttpRequest) { //Mozilla 瀏覽器
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {//設置MiME類別
     http_request.overrideMimeType('text/xml');
    }
   }
   else if (window.ActiveXObject) { // IE瀏覽器
    try {
     http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
     try {
      http_request = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e) {}
    }
   }
   if (!http_request) { // 異常，創建對象實例失敗
    window.alert("不能創建XMLHttpRequest對象實例.");
    return false;
   }
   http_request.onreadystatechange = processRequest;
   // 確定發送請求的方式和URL以及是否同步執行下段代碼
   http_request.open("GET", url, true);
   http_request.send(null);
}
// 處理返回信息的函數
     function processRequest() {
         if (http_request.readyState == 4) { // 判斷對象狀態
             if (http_request.status == 200) { // 信息已經成功返回，開始處理信息
                 alert(http_request.responseText);
             } else { //頁面不正常
                 alert("您所請求的頁面有異常。");
             }
         }
     }
function userCheck() {
   var f = document.forms[0];
   var username = f.username.value;
   if(username=="") {
    window.alert("The user name can not be null!");
    f.username.focus();
    return false;
   }
   else {
    send_request('ajax/check.do?username='+username);
   }
}

</script>
<body>
  <form name="form1" action="" method="post">
User Name:<input type="text" name="username" value=""> 
<input type="button" name="check" value="check" onClick="userCheck()">
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>

    我們可以看到，JSP基本是一樣的，除了要發送的url：ajax/check.do?username='+username。

基於java的ajax操作

[轉帖]使用NMT和pmap解決JVM資源泄漏問題原創

Python實現大麥網搶票的四大關鍵技術點解析

Python 安裝庫指令大全

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

一款開源的.NET程序集反編譯、編輯和調試神器

關於接口協議，你必須要知道這些！

基於 Milvus + LlamaIndex 實現高級 RAG

【2024-05-21】以茶會友

c標準庫函數列表

CSharp學習筆記之一 C#中的類型

C語言基礎介紹

程序員必經之路

原始部落六進制

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結