AJAX是個老話題了，傳統的web應用允許用戶填寫表單(form)，當提交表單時就向web服務器發送一個請求。服務器接收並處理傳來的表單，然後返回一個新的網頁。這個做法浪費了許多帶寬，因爲在前後兩個頁面中的大部分HTML代碼往往是相同的。由於每次應用的交互都需要向服務器發送請求，應用的響應時間就依賴於服務器的響應時間。這導致了用戶界面的響應比本地應用慢得多。
與此不同，AJAX應用可以僅向服務器發送並取回必需的數據，它使用SOAP或其它一些基於XML的web service接口，並在客戶端採用JavaScript處理來自服務器的響應。因爲在服務器和瀏覽器之間交換的數據大量減少，結果我們就能看到響應更快的應用。同時很多的處理工作可以在發出請求的客戶端機器上完成，所以Web服務器的處理時間也減少了。
不說那麼多廢話了，直接入題：
首先，寫jsp頁面：
與此不同，AJAX應用可以僅向服務器發送並取回必需的數據，它使用SOAP或其它一些基於XML的web service接口，並在客戶端採用JavaScript處理來自服務器的響應。因爲在服務器和瀏覽器之間交換的數據大量減少，結果我們就能看到響應更快的應用。同時很多的處理工作可以在發出請求的客戶端機器上完成，所以Web服務器的處理時間也減少了。
不說那麼多廢話了，直接入題：
首先，寫jsp頁面：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="ww" uri="/webwork" %>
<%
String path=request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TimeCard Manager Platform</title>
<script src="<%=path%>/js/prototype.js"></script>
<script>
function getXML(){
//局部請求地址
var url="searchAction.action";
//獲取用戶當前輸入的內容
var inputvalue=document.getElementById("itext").value;
//使用prototype函數構造xmlhttprequest對象
var myAjax = new Ajax.Request(
url,
{
//請求方法爲post
method:'post',
//設置參數爲 inputtext=inputtext
parameters:"inputtext="+inputvalue,
//設置回調函數
onComplete:showResponse,
//是否異步
asynchronous:true
}
);
}
function showResponse(xmlrequest){
//回調函數
var text = xmlrequest.responseText;
//將匹配的內容輸出到 span 層
document.getElementById("projectspan").innerHTML=text;
// $("projectspan").innerHTML=xmlrequest.responseText;
}
</head>
<body>
Project manager:
<span id="projectspan" class="font_bluet"> <select
name="project.resource_id" id="prijectmanager">
<option value="-1"> Choose</option>
<option value="0" >aaaa</option>
<option value="1" >bbbb</option>
<option value="2" >cccc</option>
<option value="3" >dddd</option>
</select> </span>
<input name="text" type="text" id="itext" onKeyUp="getXML()" />
</body>
</html>
<%@ taglib prefix="ww" uri="/webwork" %>
<%
String path=request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TimeCard Manager Platform</title>
<script src="<%=path%>/js/prototype.js"></script>
<script>
function getXML(){
//局部請求地址
var url="searchAction.action";
//獲取用戶當前輸入的內容
var inputvalue=document.getElementById("itext").value;
//使用prototype函數構造xmlhttprequest對象
var myAjax = new Ajax.Request(
url,
{
//請求方法爲post
method:'post',
//設置參數爲 inputtext=inputtext
parameters:"inputtext="+inputvalue,
//設置回調函數
onComplete:showResponse,
//是否異步
asynchronous:true
}
);
}
function showResponse(xmlrequest){
//回調函數
var text = xmlrequest.responseText;
//將匹配的內容輸出到 span 層
document.getElementById("projectspan").innerHTML=text;
// $("projectspan").innerHTML=xmlrequest.responseText;
}
</head>
<body>
Project manager:
<span id="projectspan" class="font_bluet"> <select
name="project.resource_id" id="prijectmanager">
<option value="-1"> Choose</option>
<option value="0" >aaaa</option>
<option value="1" >bbbb</option>
<option value="2" >cccc</option>
<option value="3" >dddd</option>
</select> </span>
<input name="text" type="text" id="itext" onKeyUp="getXML()" />
</body>
</html>
在XWORK.XML中加入下面的代碼：
<action name="searchAction" method="searchAction" class="com.mdcl.timecard.action.ProjectAction" >
</action>
</action>
在action中：
public void searchAction() {
HttpServletResponse response=ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
PrintWriter out;
String inputtext = ServletActionContext.getRequest().getParameter("inputtext");
//根據輸入框的內容到數據庫查詢符合條件項，返回
// List （resourcelist1）
//如果沒有符合條件項，則查詢所有列表，返回 List （resourcelist）
if(!resourcelist1.isEmpty() || resourcelist1.size()>0){
try {
out = ServletActionContext.getResponse().getWriter();
out.println("<select name='project.resource_id' id='prijectmanager' class='fram'>");
for(int i=0;i<resourcelist1.size();i++){
out.println("<option value=" + resourcelist1.get(i).getResourceId() + ">"
+ resourcelist1.get(i).getName() + "</option>");
}
out.println("</select>");
//輸出緩存字符串
out.flush();
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}else{
try {
out = ServletActionContext.getResponse().getWriter();
out.println("<select name='project.resource_id' id='prijectmanager' class='fram'>");
for(int i=0;i<resourcelist.size();i++){
out.println("<option value=" + resourcelist.get(i).getResourceId() + ">"
+ resourcelist.get(i).getName() + "</option>");
}
out.println("</select>No Information!");
//輸出緩存字符串
out.flush();
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
HttpServletResponse response=ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
PrintWriter out;
String inputtext = ServletActionContext.getRequest().getParameter("inputtext");
//根據輸入框的內容到數據庫查詢符合條件項，返回
// List （resourcelist1）
//如果沒有符合條件項，則查詢所有列表，返回 List （resourcelist）
if(!resourcelist1.isEmpty() || resourcelist1.size()>0){
try {
out = ServletActionContext.getResponse().getWriter();
out.println("<select name='project.resource_id' id='prijectmanager' class='fram'>");
for(int i=0;i<resourcelist1.size();i++){
out.println("<option value=" + resourcelist1.get(i).getResourceId() + ">"
+ resourcelist1.get(i).getName() + "</option>");
}
out.println("</select>");
//輸出緩存字符串
out.flush();
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}else{
try {
out = ServletActionContext.getResponse().getWriter();
out.println("<select name='project.resource_id' id='prijectmanager' class='fram'>");
for(int i=0;i<resourcelist.size();i++){
out.println("<option value=" + resourcelist.get(i).getResourceId() + ">"
+ resourcelist.get(i).getName() + "</option>");
}
out.println("</select>No Information!");
//輸出緩存字符串
out.flush();
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}