AJAX實例入門

2024-09-01 08:26:13

字體：大中小

來源：轉載

供稿：網友

　　一、開門見山

　　這些時間，瞎子也看得見，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，跟往常一樣：

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

SelectCityServlet
com.stephen.servlet.SelectCityServlet

SelectCityServlet
/servlet/SelectCityServlet

　　然后，來看我們的JSP文件：

MyHtml.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("");
　　if ("zj".equals(state)){
　　sb.append("hangzhouhuzhou");
　　} else if("zs".equals(state)){
　　sb.append("nanjingyangzhousuzhou");
　　}
　　sb.append("");
　　PrintWriter out=response.getWriter();
　　out.write(sb.toString());
　　out.close();
　　}
}

　　這個類也十分簡單，首先是從request里取得state參數，然后根據state參數生成相應的XML文件，最后將XML文件輸出到PrintWriter對象里。

　　到現在為止，第一個例子的代碼已經全部結束。是不是比較簡單？我們進入到第二個實例吧！這次是基于JSP的AJAX的一個應用。

　　三、基于JSP的AJAX

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

　　這種校驗需要訪問后臺數據庫，但又不希望用戶在這里提交后等待，當然是AJAX技術大顯身手的時候了。

　　首先來看顯示UI的JSP:

Check.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文件里做配置，如下：

　　scope="request" path="/ajax/check">
　　

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

Check.html

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

　　最后，我們來看一個基于Struts和AJAX的復雜一些的例子，如果不用AJAX技術，UI的代碼將十分復雜。

　　五、一個復雜的實例

　　這是一個比較復雜的級聯：一共八個列表框，三個下拉框。從第一個列表框里選擇到第二個列表框里后，第一個選擇框里的選項是第二個列表框的選擇；然后，在第一個選擇框里選擇以后，與選擇值關聯的一些選項出現在第三個列表框里。從第三個列表框里選擇選項到第四個列表框里，同樣，第二個選擇框的選項也是第四個列表框的選項；如果對第二個選擇框進行選擇后，與選擇值關聯的一些選項出現在第六個列表框里，依次類推……

　　這個UI的邏輯就比較復雜，但使用了AJAX使得我們實現起來就簡單多了，這個例子我們除了使用Action類，還要用到POJO類和Business類，然后我們擴展的話，可以通過Business類和數據庫連接起來。

　　我們還是先看配置文件：

　　scope="request" path="/ajax/select">
　　

然后看看Action類：

/*
/**
* Title : Base Dict Class
* Description : here Description is the function of class, here maybe multirows
* Copyright: Copyright (c) 2004
* @company Freeborders Co., Ltd.
* @Goal Feng 　　
* @Version 　　1.0
*/

package com.ajax;

import java.io.PrintWriter;
import java.util.List;

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;

/**
* @author Administrator
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
public class SelectAction extends Action
{
public final ActionForward execute(ActionMapping mapping, ActionForm form,
　　HttpServletRequest request,
　　HttpServletResponse response)
throws Exception
{
　　response.setContentType("text/xml");
　　response.setHeader("Cache-Control", "no-cache");
　　String type = request.getParameter("type");
　　String id = request.getParameter("id");
　　System.out.println(id);
　　StringBuffer sb=new StringBuffer("");
　　PrintWriter out=response.getWriter();
　　out.write(sb.toString());
　　out.close();
　　System.out.println(sb.toString());
　　return mapping.findForward("success");
}
public static void main(String[] args)
{
}
}

　　POJO類和Business類：
package com.ajax;
/**
* @author Administrator
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
public class SelectForm
{
private String text;
private String value;

/**
* @return Returns the text.
*/
public String getText()
{
return text;
}
/**
* @param text The text to set.
*/
public void setText(String text)
{
this.text = text;
}
/**
* @return Returns the value.
*/
public String getValue()
{
return value;
}
/**
* @param value The value to set.
*/
public void setValue(String value)
{
this.value = value;
}
public static void main(String[] args)
{
}
}

package com.ajax;

import java.util.ArrayList;
import java.util.List;

/**
* @author Administrator
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
public class SelectBusiness
{
public List getData(String id)
{
ArrayList list = new ArrayList();
for(int i=1;i<6;i )
{
　　SelectForm form = new SelectForm();
　　form.setText(id i);
　　form.setValue(id i);
　　list.add(form);
}
return list;
}

public static void main(String[] args)
{
}
}