推薦：由淺入深完全掌握Ajax之Ajax 簡介
Ajax 由 HTML、javascript™ 技術(shù)、DHTML 和 DOM 組成，這一杰出的方法可以將笨拙的 Web 界面轉(zhuǎn)化成交互性的 Ajax 應(yīng)用程序。本文的作者是一位 Ajax 專家，他演示了這些技術(shù)如何協(xié)

　　一、開門見山

　　這些時(shí)間，瞎子也看得見，AJAX正大踏步的朝我們走來。不管我們是擁護(hù)也好，反對也罷，還是視而不見，AJAX像一陣潮流，席轉(zhuǎn)了我們所有的人。

　　關(guān)于AJAX的定義也好，大話也好，早有人在網(wǎng)上發(fā)表了汗牛充棟的文字，在這里我也不想照本宣科。

　　只想說說我感覺到的一些優(yōu)點(diǎn)，對于不對，大家也可以和我討論：

　　首先是異步交互，用戶感覺不到頁面的提交，當(dāng)然也不等待頁面返回。這是使用了AJAX技術(shù)的頁面給用戶的第一感覺。

　　其次是響應(yīng)速度快，這也是用戶強(qiáng)烈體驗(yàn)。

　　然后是與我們開發(fā)者相關(guān)的，復(fù)雜UI的成功處理，一直以來，我們對B/S模式的UI不如C/S模式UI豐富而苦惱�，F(xiàn)在由于AJAX大量使用JS，使得復(fù)雜的UI的設(shè)計(jì)變得更加成功。

　　最后，AJAX請求的返回對象為XML文件，這也是一個(gè)潮流，就是WEB SERVICE潮流一樣。易于和WEB SERVICE結(jié)合起來。

　　好了，閑話少說，讓我們轉(zhuǎn)入正題吧。

　　我們的第一個(gè)例子是基于Servlet為后臺的一個(gè)web應(yīng)用。

　　二、基于Servlet的AJAX

　　這是一個(gè)很常見的UI，當(dāng)用戶在第一個(gè)選擇框里選擇ZHEJIANG時(shí)，第二個(gè)選擇框要出現(xiàn)ZHEJIANG的城市；當(dāng)用戶在第一個(gè)選擇框里選擇JIANGSU時(shí)，第二個(gè)選擇框里要出現(xiàn)JIANGSU的城市。

　　首先，我們來看配置文件web.xml，在里面配置一個(gè)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文件：

　　第一眼看來，跟我們平常的JSP沒有兩樣。仔細(xì)一看，不同在JS里頭。

　　我們首先來看第一個(gè)方法：getResult(stateVal)，在這個(gè)方法里，首先是取得XmlHttpRequest；然后設(shè)置該請求的url：req.open("GET",url, true);接著設(shè)置請求返回值的接收方法：req.onreadystatechange = complete;該返回值的接收方法為——complete();最后是發(fā)送請求：req.send(null);

　　然后我們來看我們的返回值接收方法：complete()，這這個(gè)方法里，首先判斷是否正確返回，如果正確返回，用DOM對返回的XML文件進(jìn)行解析。關(guān)于DOM的使用，這里不再講述，請大家參閱相關(guān)文檔。得到city的值以后，再通過buildSelect(str,sel)方法賦值到相應(yīng)的選擇框里頭去。

　　最后我們來看看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();
　　}
}

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

　　到現(xiàn)在為止，第一個(gè)例子的代碼已經(jīng)全部結(jié)束。是不是比較簡單？我們進(jìn)入到第二個(gè)實(shí)例吧！這次是基于JSP的AJAX的一個(gè)應(yīng)用。

　　三、基于JSP的AJAX

這個(gè)例子是關(guān)于輸入校驗(yàn)的問題，我們知道，在申請用戶的時(shí)候，需要去數(shù)據(jù)庫對該用戶性進(jìn)行唯一性確認(rèn)，然后才能繼續(xù)往下申請。

　　這種校驗(yàn)需要訪問后臺數(shù)據(jù)庫，但又不希望用戶在這里提交后等待，當(dāng)然是AJAX技術(shù)大顯身手的時(shí)候了。

　　首先來看顯示UI的JSP:

　　所有的JS都跟上一個(gè)例子一樣，不同的只是對返回值的操作，這次是用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("用戶名已經(jīng)被注冊，請更換一個(gè)用戶名。");
else out.print("用戶名尚未被使用，您可以繼續(xù)。");
%>

　　非常簡單，先取得參數(shù)，然后作處理，最后將結(jié)果打印在out里。
　　我們的第三個(gè)例子仍然以這個(gè)唯一性校驗(yàn)為例子，這次結(jié)合Struts開發(fā)框架來完成AJAX的開發(fā)。

　　四、基于Struts的AJAX

　　首先，我們?nèi)匀皇菍�Struts應(yīng)用來做配置，仍然是在struts-config,xml文件里做配置，如下：

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

　　跟普通的Struts應(yīng)用的配置一樣，只是沒有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:

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

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

　　五、一個(gè)復(fù)雜的實(shí)例

　　這是一個(gè)比較復(fù)雜的級聯(lián)：一共八個(gè)列表框，三個(gè)下拉框。從第一個(gè)列表框里選擇到第二個(gè)列表框里后，第一個(gè)選擇框里的選項(xiàng)是第二個(gè)列表框的選擇；然后，在第一個(gè)選擇框里選擇以后，與選擇值關(guān)聯(lián)的一些選項(xiàng)出現(xiàn)在第三個(gè)列表框里。從第三個(gè)列表框里選擇選項(xiàng)到第四個(gè)列表框里，同樣，第二個(gè)選擇框的選項(xiàng)也是第四個(gè)列表框的選項(xiàng)；如果對第二個(gè)選擇框進(jìn)行選擇后，與選擇值關(guān)聯(lián)的一些選項(xiàng)出現(xiàn)在第六個(gè)列表框里，依次類推……

　　這個(gè)UI的邏輯就比較復(fù)雜，但使用了AJAX使得我們實(shí)現(xiàn)起來就簡單多了，這個(gè)例子我們除了使用Action類，還要用到POJO類和Business類，然后我們擴(kuò)展的話，可以通過Business類和數(shù)據(jù)庫連接起來。

　　我們還是先看配置文件：

　　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("");
　　sb.append("" type "");
　　
　　List list = new SelectBusiness().getData(id);
　　for(int i=0;i 　　{
　　SelectForm sel = (SelectForm)list.get(i);
　　sb.append("" sel.getText() "" sel.getValue() "");
　　}

　　sb.append("");
　　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)
{
}
}

分享：使用JavaScript和Ajax發(fā)出異步請求(1)
多數(shù) Web 應(yīng)用程序都使用請求/響應(yīng)模型從服務(wù)器上獲得完整的 HTML 頁面。常常是點(diǎn)擊一個(gè)按鈕，等待服務(wù)器響應(yīng)，再點(diǎn)擊另一個(gè)按鈕，然后再等待，這樣一個(gè)反復(fù)的過程。有了 Ajax 和 XMLHttpReq