AJAX實例入門_AJAX教程
推薦：由淺入深完全掌握Ajax之Ajax 簡介Ajax 由 HTML、javascript™ 技術、DHTML 和 DOM 組成，這一杰出的方法可以將笨拙的 Web 界面轉化成交互性的 Ajax 應用程序。本文的作者是一位 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，跟往常一樣：
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">
然后，來看我們的JSP文件：
第一眼看來，跟我們平常的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("
} else if("zs".equals(state)){
sb.append("
}
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:
所有的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:
我們可以看到，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)
{
}
}
分享：使用JavaScript和Ajax發出異步請求(1)多數 Web 應用程序都使用請求/響應模型從服務器上獲得完整的 HTML 頁面。常常是點擊一個按鈕，等待服務器響應，再點擊另一個按鈕，然后再等待，這樣一個反復的過程。有了 Ajax 和 XMLHttpReq
- 相關鏈接：
- 教程說明：
AJAX教程-AJAX實例入門
。