AJAX執行個體入門(JSP)

來源:互聯網
上載者:User
 

基於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>

轉自:伊圖教程網[www.etoow.com]
http://www.etoow.com/html/2007-05/1178781098.html
</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">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</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");
  file://alert(city.length);
  var str=new Array();
  for(var i=0;i<city.length;i++){  str[i]=city[i].firstChild.data;
  }
  file://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="/blog/">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">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>
<script type="text/javascript">
var http_request = false;
function send_request(url) {//初始化、指定處理函數、發送請求的函數
http_request = false;
file://開始初始化XMLHttpRequest對象
if(window.XMLHttpRequest) { file://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) {}

轉自:伊圖教程網[www.etoow.com]
http://www.etoow.com/html/2007-05/1178781098-2.html
  }
}
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 { file://頁面不正常
  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="">&nbsp;
<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">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>
<script type="text/javascript">
var http_request = false;
function send_request(url) {//初始化、指定處理函數、發送請求的函數
http_request = false;
file://開始初始化XMLHttpRequest對象
if(window.XMLHttpRequest) { file://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 { file://頁面不正常
  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="">&nbsp;
<input type="button" name="check" value="check" onClick="userCheck()">
<input type="submit" name="submit" value="/blog/submit">
</form>
</body>
</html>

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.