AJAX執行個體入門

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一、開門見山

　　這些時間，瞎子也看得見，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>

</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>

</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.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檔案裡做配置，如下：

　　跟普通的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>

</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);
}
}

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More