很多 Web 開發人員都經常抱怨說 Java™ EE 太復雜、構建新的 Web 組件太難、定制現有的組件沒有預想的那樣簡單，并且即便是很小的更改都需要重新啟動應用程序。本系列給出了針對這些問題的解決方案，即采用代碼生成器、約定、腳本語言和先進的 JavaServer Pages ™ (JSP) 特性。在本文中，您將了解如何基于 JSP 標記文件構建可重用的 Ajax 和 Java 組件，而這些 JSP 標記文件很容易開發和部署。更改之后，JSP 標記文件會由 Java EE 服務器自動重編譯，而無須重啟應用程序。此外，您還能完全控制所生成的代碼，并能輕松地定制這些輕量級組件，因為它們使用的是 JSP 語法。

　　本系列含 4 部分，展示了一種基于 JSP 的技術，用以生成 JavaScript 代碼、顯著減少需要手動編寫的代碼量，本文是第 1 部分。本文的示例應用程序展示了如何生成 JavaScript 函數來發送 Ajax 請求和處理 Ajax 響應。如果想要輕松地更改 Ajax 代碼，可以將這里討論的簡單技巧應用到實際的應用程序中。本文更寬泛的目標是展示如何使用 JSP 標記文件針對具體需求生成 JavaScript 代碼，而非只是 Ajax 例程。

　　使用框架和代碼生成器

　　如果您很幸運地找到了一種能滿足您需要的組件或框架，那么就請使用它吧。如果沒有找到也沒關系，因為您總是可以開發自己的解決方案，也可以定制現有的一段代碼。不管是哪種情況，一種很好的做法是 “參數化” 代碼并將其放入一個可重用的庫，而非將參數硬編碼到您的代碼里。不過有時候，實現泛型并不實際，因為它會使開發變得復雜，而非簡化。在將泛型代碼放入可重用組件或框架時，可以考慮使用代碼生成器來更有效地生成特定的代碼。

　　在開發的過程中避免復制 & 粘貼

　　假設，您需要應用程序使用 Ajax 請求站點上的某些信息，最快的（當然不是最好的）方法是找到一些如清單 1 這樣的免費代碼、更改 URL 并將這些代碼粘貼到 Web 頁面。很多開發人員都會這么做，但這種做法會導致巨大的維護問題。如果應用程序具有數百個頁面，最后的結果將是出現大量像清單 1 中的 getInfo() 這樣的函數。不好的一面是每次需要進行添加或更改（比如實現 Ajax 請求的錯誤處理）時，您都必須要手動修改所有頁面并重新測試它們。好的一面是您可以通過使用庫、框架和代碼生成器，很容易地避免這個維護問題。

清單 1. Ajax 函數

function getInfo(country, city) {
var request = null;
if (window.ActiveXObject)
request = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
request = new XMLHttpRequest();
else
return;

    var url = "CityInfo.jsp?country=" + escape(country)
+ "&city=" + escape(city);
request.open("GET", url, true);

    function processResponse() {
if (request.readyState == 4) {
if (request.status == 200) {
// ...
}
}
}

    request.onreadystatechange = processResponse;
request.send(null);
}
 

　　開發泛型函數

　　一種好的開發實踐是將盡量多的代碼移入可重用的例程、函數、類或組件，而這些例程、函數、類或組件均能劃分到庫或框架中。在我們的示例中，您能找到一個泛型函數，此函數能創建 XMLHttpRequest 實例和調用實例的 open() 和 send() 方法。

　　假設您決定使用的函數的名稱為 xhr()，它能接受 5 個參數:返回信息的頁面的 URL、包含名稱和請求參數的值的兩個數組、HTTP 方法和用來處理 Ajax 響應的一個回調函數。現在，您的應用程序將會包含更為簡單的函數，比如清單 2 中所示的 getInfo2()，而且代碼也更容易維護。如果想要更改發送 Ajax 請求的代碼，只能修改 xhr() 函數。

清單 2. 使用泛型函數

function xhr(url, paramNames, paramValues, method, callback) {
// send Ajax request ...
}

function getInfo2(country, city) {
function processResponse(request) {
// process Ajax response ...
}
xhr("CityInfo.jsp", ["country", "city"], [country, city],
"GET", processResponse);
}
 

　　清單 2 包含的泛型函數，名為 xhr()，特定于應用程序的函數名為 getInfo2()。泛型代碼應被移入單獨的 JavaScript 文件以便能將可重用函數導入需要它們的任何頁面。對于特定的代碼，比如 getInfo2() 函數，如果應用程序需要基于相同模式的很多函數，就應該考慮使用代碼生成器。

　　動態生成代碼

　　代碼生成器能顯著提高開發和維護 Web 應用程序的效率。比如，您可以使用 JSP、Java 代碼或任何其他語言來從模板生成 JavaScript 函數。得益于屬性名稱，用來指定生成器參數的基于 XML 的語法能讓代碼可讀性更好，也更容易理解。此外，標記屬性沒有像 JavaScript 函數或 Java 方法的參數那樣的固定順序。

　　對比起來，使用 XML 標記的一個明顯優點就是它們能為屬性使用默認值，然而編程語言只提供了有限的可能性來刪除方法參數。請考慮這些關于代碼生成器可擴展性的諸多方面，因為在不打亂現有代碼的情況下向標記增加新的屬性要比更改方法簽名簡單得多。使用 XML 和 JSP 的這些句法方面的優點是很明顯的，尤其是當代碼生成器需要大量屬性的時候。

　　JSP 是在服務器端生成 JavaScript 代碼的一種很好的選擇，因為：

1. 開發人員已經了解 JSP 語法。
2. JSTL 為條件及循環結構提供了標記。
3. JSP 頁面讓您可以很方便地生成任何形式的文本，包括 JavaScript 函數。
4. 此外，JSP 技術已經有了一種很強大的機制來將可執行代碼放在定制標記后面，所以，不必為基于 JSP 語法的模板實現解析器。最后，在每次您做更改時，也不需要外部工具來重新生成代碼。

　　清單 3 中包含取自于本文下一章節所要展示的應用程序的一個代碼片段。此處使用了一個名為 <da:xhr> 的定制的 JSP 標記來生成 getInfo3() 函數，當用戶單擊一個標簽為 Get Info 的按鈕時，該函數就會在 Web 瀏覽器中被調用。

清單 3. 使用 JSP 標記文件生成 Ajax 函數

<%@ taglib prefix="da" tagdir="/WEB-INF/tags/dynamic/ajax" %>
...
<script type="text/javascript">
<da:xhr function="getInfo3(country, city)" url="CityInfo.jsp" method="GET">
// process Ajax response ...
</da:xhr>
</script>
...
<button ... onclick="getInfo3(...)">Get Info</button>
 

　　所生成的 JavaScript 代碼可被放入調用清單 3 中所示的生成函數的 Web 頁面的 <script> 元素中。如果多個 Web 頁面需要同樣的 JavaScript 代碼，就像任何常規的 JavaScript 文件一樣， 動態生成此代碼的一個單獨的 JSP 文件將被導入到這個應用程序的 Web 頁面，在 <script> 元素的 src 屬性中指定其 URI（參見清單 4）。

清單 4. 導入由 JSP 頁面生成的 JavaScript

<script src="DynamicJavaScript.jsp" type="text/javascript">
</script>
 

　　緩存生成的代碼

　　雖然在開發階段為每個請求生成 JavaScript 代碼并不會產生問題，但您不得不考慮在生產環境中的性能損失。解決的方法就是緩存代碼，比如用 SJTL 將生成的代碼存儲到 JSP application 作用域，如清單 5 所示。然后，可以在 Web 頁面中用 EL 結構（例如 ${applicationScope.cachedCode}）插入所緩存的代碼。

清單 5. 緩存生成的代碼

 <%@ taglib prefix="c" uri="//java.sun.com/jsp/jstl/core" %>

<c:if test="${empty cachedCode}">
<c:set var="cachedCode" scope="application">
alert("Cached Code");
</c:set>
</c:if>

${applicationScope.cachedCode}
 

　　創建一個簡單的 Ajax 應用程序

　　本節描述了示例應用程序的 JSP 頁面。CityForm.jsp 頁面包括一個 Web 表單，其數據由 Ajax 發送到 Web 服務器。另一個名為 CityInfo.jsp 的頁面生成 Ajax 響應。

　　構建 Ajax 頁面

　　此示例應用程序的 CityForm.jsp 頁面使用了兩個定制標記，名稱分別為 <da:xhr> 和 <da:innerHTML>，是作為 JSP 標記文件實現的。xhr.tag 文件生成能發送 Ajax 請求的一個 JavaScript 函數，而 innerHTML.tag 則生成單一一行代碼，它用 innerHTML 屬性在 HTML 元素內插入一些內容。兩個標記文件的 JSP 代碼將在本文的稍后部分給出。

　　JSP 頁面（見清單 6）聲明了所使用的標記庫，它們是 JSTL Core（前綴為 c）和標記文件庫（前綴為 da）。CityForm.jsp 還導入了兩個 JavaScript 文件，名字分別為 ajax.js 和 encode.js ，其函數從由 <da:xhr> 和 <da:innerHTML> 生成的代碼調用。這些定制標記用于在 <script> 元素內生成名為 getInfo() 的一個 JavaScript 函數的代碼。

清單 6. CityForm.jsp 示例

<%@ taglib prefix="c" uri="//java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="da" tagdir="/WEB-INF/tags/dynamic/ajax" %>

<html>
<head>
<title>Ajax Demo</title>
<script src="ajax.js" type="text/javascript">
</script>
<script src="encode.js" type="text/javascript">
</script>
<script type="text/javascript">
<da:xhr function="getInfo(country, city)" method="GET"
url="CityInfo.jsp" sync="false" json="true" cpr="true">
<da:innerHTML id="info" value="json.info" encode="true"/>
</da:xhr>

function getInfo2(form) {
var country = form.country.options[form.country.selectedIndex].text;
var city = form.city.value;
getInfo(country, city);
}
</script>
</head>
<body>
<form name="data">
Country:
<select name="country" size="1">
<option>Canada</option>
<option>UK</option>
<option selected>USA</option>
</select>
City: <input name="city" size="20">
<button type="button" onclick="getInfo2(this.form)">Get Info</button>
</form>
<div id="info"></div>
</body>
</html>
 

　　CityForm.jsp 頁面的 Web 表單包含一個標簽為 Get Info 的按鈕、一個國家列表和一個讓用戶輸入城市名稱的輸入字段。當用戶單擊這個按鈕時，Web 瀏覽器將調用 getInfo2() 函數，它的調用是在 onclick 屬性內編碼的。此函數包含 Web 表單中的 country 和 city 字段的值，并且會將這些值傳遞給 getInfo() 函數，該函數會將 Ajax 請求發送給服務器。Ajax 響應將包含需要插入到置于 Web 表單下的 <div> 元素的信息。

　　<da:xhr> 的屬性允許指定已生成的 JavaScript 函數的頭、用來發送 Ajax 請求的 HTTP 方法以及生成 Ajax 響應的那個頁面的 URL。名為 sync、json 和 cpr 的屬性則可以讓您指定已生成代碼的各種特性。

　　如果 sync 為 true，那么信息就會被同步請求，這意味著當從服務器檢索數據時，用戶界面將會被阻塞。 如果 sync 為 false，請求就是異步的，意味著在信息通過網絡傳遞和由服務器處理時，用戶可以進行操作。

　　如果 json 屬性為 true，那么這個代碼生成器將會用 添加一行 JavaScript 代碼來評估 Ajax 響應。最后，如果 <da:xhr> 標記的 cpr 屬性是 true，那么 xhr.tag 文件將產生一些 JavaScript 代碼片段，它將在發送一個新請求前關閉之前的請求。我在討論 ajax.js 和 xhr.tag 文件時，將會介紹更多關于此特性的內容。

　　所生成的代碼

　　清單 7 顯示了 CityForm.jsp 頁面已生成的 getInfo(country, city) 函數。所使用的 HTTP 方法是 GET，生成 Ajax 響應的頁面的 URL 是 CityInfo.jsp，sync 屬性是 false，json 與 cpr 屬性都是true。所生成的 JavaScript 代碼使用 ajax.js 文件的 openRequest()、sendRequest()、closeRequest() 和 httpError() 函數，以及 encode.js 的 appendParam() 與 htmlEncode() 函數。

清單 7. 為使用 GET 的 Ajax 請求所生成的函數

var getInfoRequest = null;

function getInfo(country, city) {
 if (getInfoRequest) closeRequest(getInfoRequest);

    var url = "CityInfo.jsp";
url += ?;
url = appendParam(url, "country", country);
url = appendParam(url, "city", city);

    var request = openRequest("GET", url, true);
getInfoRequest = request;
if (request == null) return null;

    function processResponse() {
if (request.readyState == 4) {
if (request.status == 200) {
;
document.getElementById("info").innerHTML
= htmlEncode(json.info);
} else {
httpError(request);
document.location = url;
}
}
}

    request.onreadystatechange = processResponse;
sendRequest(request, null);
return request;
}
 

　　如果將 HTTP 方法改為 POST，那么所生成的代碼也會相應地被修改，如清單 8 中所示。這里并沒有向 url 添加請求參數，相反，getInfo() 函數會將這些參數追加給一個名為 body 的變量，此變量之后會被傳遞給 ajax.js 文件的 sendRequest() 函數。

清單 8. 為使用 POST 的 Ajax 請求所生成的函數

function getInfo(country, city) {
...
var url = "CityInfo.jsp";

var body = "";
body = appendParam(body, "country", country);
 body = appendParam(body, "city", city);

    var request = openRequest("POST", url, true);
...
sendRequest(request, body);
return request;
}
 

　　生成 JSON 響應

　　CityInfo.jsp 頁面（見清單 9）使用 JavaScript Object Notation (JSON) 生成對 Ajax 請求的響應。為了保持頁面無腳本，Java 代碼將被移入名為 noCache.tag 和 jstring.tag 的兩個 JSP 標記文件，它們將由 <da:noCache> 和 <da:jstring> 從 JSP 頁面調用。將 Java 代碼放入 JSP 標記文件要比開發標記處理程序類容易得多，因為 JSP 容器會在不必重啟應用程序的情況下為您生成這些類并且會在代碼更改后自動重新編譯 Java 代碼。

清單 9. CityInfo.jsp 示例

 <%@ taglib prefix="da" tagdir="/WEB-INF/tags/dynamic/ajax" %>

<da:noCache/>

json = {
country: <da:jstring value="${param.country}"/>,
city: <da:jstring value="${param.city}"/>,
info: <da:jstring>Info on ${param.city}, ${param.country}</da:jstring>
}
 

　　清單 10 給出了 JSON 響應。

清單 10. 所生成的 JSON

json = {
country: "UK",
city: "London",
info: "Info on London, UK"
}
 

　　noCache.tag 文件（參見清單 11）包含單一一行 Java 代碼，可以設置 HTTP 響應的 Cache-Control 頭。

清單 11. noCache.tag 文件

<% response.setHeader("Cache-Control", "no-cache"); %>
 

　　jstring.tag 文件（如清單 12 所示）編碼一個 JavaScript 字符串，其值可以作為屬性，也可以作為內容主體傳遞給標記文件。如果 value 屬性不指定，<jsp:doBody> 動作就會執行包括在 <da:jstring> 和 </da:jstring> 之間的 JSP 代碼，設置 page 作用域的 value 變量。 在這兩種情況下，Java 代碼用 jspContext.getAttribute() 獲得字符串值并會逐個地輸出字符，轉義特殊和非 ASCII 字符。

清單 12. jstring.tag 文件

 <%@ attribute name="value" required="false" rtexprvalue="true" %>

<%@ taglib prefix="c" uri="//java.sun.com/jsp/jstl/core" %>

<c:if test="${empty value}">
<jsp:doBody var="value"/>
</c:if>

<%
String value = (String) jspContext.getAttribute("value");
out.write(");
int len = value.length();
for (int i = 0; i < len; i++) {
char ch = value.charAt(i);
switch (ch) {
case \\: out.write("\\\\"); break;
case \n: out.write("\\n"); break;
case \r: out.write("\\r"); break;
case \t: out.write("\\t"); break;
case ":  out.write("\\\""); break;
default: {
if ( <= ch && ch <= ~)
out.write(ch);
else {
out.write("\\u");
for (int j = 3; j >= 0; j--) {
int k = (((int) ch) >> (j << 2)) & 0x0f;
out.write((char) (k < 10 ? k + 48 : k + 55));
}
}
}
}
}
out.write(");
%>
 

　　開發 JavaScript 函數

　　本節介紹 ajax.js 和 encode.js 文件，其函數均從由 xhr.tag 和 innerHTML.tag 文件生成的 JavaScript 代碼調用。

　　XMLHttpRequest 相關的函數

　　ajax.js 文件的 openRequest() 函數（參見清單 13）接受 3 個參數（method、url 和 async）并會創建一個 XMLHttpRequest 實例。然后，它會調用 open() 方法并返回初始化了的 request 對象。如果 body 參數不是 null，sendRequest() 函數就會設置 Content-Type 頭并調用 request 對象的 send() 方法。

清單 13. ajax.js 文件

function openRequest(method, url, async) {
var request = null;
if (window.ActiveXObject)
request = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
request = new XMLHttpRequest();
if (request)
request.open(method, url, async);
return request;
}

function sendRequest(request, body) {
if (body)
request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
request.send(body);
}

function closeRequest(request) {
request.onreadystatechange = function() { };
request.abort();
delete request;
}

function httpError(request) {
alert("Http Error: " + request.status);
}
 

　　closeRequest() 方法將 onreadystatechange 屬性設置為一個空函數，調用 abort() 方法并之后使用 JavaScript 的 delete 操作符釋放 request 對象的內存。該函數應該在處理完 Ajax 請求之后對每個 XMLHttpRequest 實例調用。否則，很可能導致 Web 瀏覽器內的內存泄露。ajax.js 的最后一個函數是 httpError()，它在警告窗口顯示請求的狀態。

　　HTML 和 URL 編碼函數

　　encode.js 文件的 htmlEncode() 函數（參見清單 14）接受字符串參數并會用 &amp;、&lt; 和 &gt; 替換 &、< 和 > 字符。attrEncode() 函數執行的是同樣的操作，之后用 &quot; 替換 " 字符以便所編碼的字符串可用作屬性的值。

　　JavaScript 的 escape() 函數通常用來編碼 Ajax 請求的請求參數。應該注意 escape() 沒有編碼 + 字符，這是個問題，因為所有的 + 均會在服務器上被解碼為空格字符。

　　上面談及的問題可由 encode.js 文件的 urlEncode() 函數修復，此文件使用了 JavaScript 的 escape() 來執行 URL 編碼，并會在之后用 %2B 替換所有的 + 字符以便編碼后的字符串可以在服務器端正確解碼。

清單 14. encode.js 文件

function htmlEncode(value) {
return value ? value.replace(/&/g, "&amp;")
.replace(/</g, "&lt;").replace(/>/g, "&gt;") : "";
}

function attrEncode(value) {
return htmlEncode(value).replace(/"/g, "&quot;");
}

function urlEncode(str) {
return str ? escape(str).replace(/\+/g, "%2B") : "";
}

function isArray(a) {
return a.sort ? true : false;
}

function appendParam(url, name, value) {
if (isArray(value)) {
for (var i = 0; i < value.length; i++)
url = appendParam(url, name, value[i]);
} else {
if (url && url.length > 0) {
if (url.charAt(url.length-1) != ?)
url += "&";
} else
url = "";
url += urlEncode(name) + "=" + urlEncode(value);
}
return url;
}
 

　　appendParam() 函數向給定 URL 添加名稱/值對。如果第三個參數是一個數組，JavaScript 代碼就會在其元素上迭代并會遞歸調用 appendParam()，以便針對數組中的每個元素將名稱/值對添加至 url。

　　使用 JSP 標記文件生成 JavaScript 代碼

　　本節介紹的是 xhr.tag 和 innerHTML.tag 文件。前者生成能將 Ajax 請求發送給服務器的 JavaScript 函數，后者則生成能在 Web 瀏覽器內處理 Ajax 請求的回調函數的代碼。

　　發送 Ajax 請求

　　<da:xhr> 標記接受 6 個屬性：所生成的 JavaScript 函數的頭部、HTTP 方法、將響應返回給 Ajax 請求的頁面的 URL、指示請求應該同步還是異步發送的一個布爾屬性、指定請求是否使用 JSON 格式的另一個布爾屬性以及用來啟用本文稱為 “關閉之前請求” 特性的屬性（cpr）。所有這些屬性均通過 <%@attribute%> 指令在 xhr.tag 文件中聲明（參見清單 15）。

　　接下來，標記文件使用 <%@taglib%> 指令聲明所使用的標記庫，將 method 屬性的字符轉變成大寫，定義稱為 reqVarName 的 JSP 變量，該變量構建自所生成的 JavaScript 函數的名稱和 Request 字符串。這之后，xhr.tag 文件開始生成 JavaScript 代碼。如果 cpr 屬性為 true，就會聲明一個 JavaScript 變量并由 null 對該變量進行初始化。此變量用來保存之前的請求，而該請求必須在下次調用所生成的函數時被 “關閉”。本文前一章節已經介紹過 ajax.js 文件的 closeRequest() 函數。

　　<dau:appendParams> 標記用于 xhr.tag 文件以便向 url 變量追加請求參數（如果 method 為 GET）或向 body 變量追加請求參數（如果 method 為 POST）。ajax.js 文件的 openRequest() 函數創建和初始化 XMLHttpRequest 實例。Ajax 請求通過 sendRequest() 函數發送給服務器，該函數的代碼可以在同一個 ajax.js 文件找到。

清單 15. xhr.tag 文件

<%@ attribute name="function" required="true" rtexprvalue="true" %>
<%@ attribute name="method" required="false" rtexprvalue="true" %>
<%@ attribute name="url" required="true" rtexprvalue="true" %>
<%@ attribute name="sync" required="false" rtexprvalue="true"
type="java.lang.Boolean" %>
<%@ attribute name="json" required="false" rtexprvalue="true"
type="java.lang.Boolean" %>
<%@ attribute name="cpr" required="false" rtexprvalue="true"
type="java.lang.Boolean" %>

<%@ taglib prefix="c" uri="//java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="//java.sun.com/jsp/jstl/functions" %>
 <%@ taglib prefix="dau" tagdir="/WEB-INF/tags/dynamic/ajax/util" %>

<c:set var="method" value="${empty method ? GET : fn:toUpperCase(method)}"/>
<c:set var="reqVarName"
 value="${fn:trim(fn:substringBefore(function, ())}Request"/>

<c:if test="${cpr}">var ${reqVarName} = null;</c:if>

function ${function} {
 <c:if test="${cpr}">if (${reqVarName}) closeRequest(${reqVarName});</c:if>

    var url = "${url}";
<c:if test="${method == GET}">
url += ?;
<dau:appendParams jsVarName="url" function="${function}"/>
</c:if>
<c:if test="${method == POST}">
var body = "";
<dau:appendParams jsVarName="body" function="${function}"/>
</c:if>

    var request = openRequest("${method}", url, ${!sync});
<c:if test="${cpr}">${reqVarName} = request;</c:if>
if (request == null) return null;

    function processResponse() {
if (request.readyState == 4) {
if (request.status == 200) {
<c:if test="${json}">;</c:if>
<jsp:doBody/>
} else {
httpError(request);
<c:if test="${method == POST}">url += ? + body;</c:if>
document.location = url;
}
}
}

    request.onreadystatechange = processResponse;
<c:if test="${method == GET}">sendRequest(request, null);</c:if>
<c:if test="${method == POST}">sendRequest(request, body);</c:if>
return request;
}
 

　　內部函數名為 processResponse()，是通過 onreadystatechange 屬性傳遞給 request 對象的一個回調函數。此回調函數在 Ajax 請求的整個生命周期進行了多次調用，而請求的當前狀態可從 readyState 屬性獲得。當 readyState 為 4 時，請求完成。

　　如果 HTTP 狀態碼為 200，表示沒有發生錯誤，并且 Ajax 請求也可以由 <da:xhr> 和 </da:xhr> 之間的 JSP 代碼處理。此代碼由 <jsp:doBody/> 自 xhr.tag 文件調用。如果出現 HTTP 錯誤，所生成的代碼會調用 ajax.js 文件的 httpError() 函數，并且瀏覽器也會被重定向到生成 Ajax 響應的 URL，因此開發人員就能夠看到導致 HTTP 錯誤的服務器端錯誤。例如，如果 HTTP 錯誤碼為 500（內部錯誤），應該可以看到一個 Java 堆棧跟蹤。

　　清單 16 給出了此 appendParams.tag 文件，該文件在給定函數頭的參數上迭代并生成一個 JavaScript 代碼行，此代碼行調用 encode.js 文件的 appendParam() 函數。本文前面介紹的清單 7 和 8 中給出了所生成的代碼。

清單 16. appendParams.tag 文件

<%@ attribute name="jsVarName" required="true" rtexprvalue="true" %>
 <%@ attribute name="function" required="true" rtexprvalue="true" %>

<%@ taglib prefix="c" uri="//java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="fn" uri="//java.sun.com/jsp/jstl/functions" %>

<c:set var="paramList"
 value="${fn:substringBefore(fn:substringAfter(function, (), ))}"/>

<c:forEach var="paramName" items="${paramList}">
<c:set var="paramName" value="${fn:trim(paramName)}"/>
${jsVarName} = appendParam(${jsVarName}, "${paramName}", ${paramName});
</c:forEach>
 

　　 developerWorks Ajax 資源中心

　　請訪問 Ajax 資源中心，這是有關開發 Ajax 應用程序所需的免費工具、代碼和信息的一站式中心。由 Ajax 專家 Herrington 主持的 活躍 Ajax 社區論壇 也許可以幫助您解答疑問。 

處理 Ajax 請求

　　innerHTML.tag 文件（如清單 17 所示）中有一行 JavaScript 代碼，包含 DOM 對象，用來代表具有給定 id 的 HTML 元素，所使用的是 document.getElementById()。隨后，該元素的內容會被更改，方式是設置 innerHTML 屬性，其新值可以通過 <da:innerHTML> 標記的 value 屬性傳遞，也可以在標記體內傳遞。如果 encode 屬性為 true，所生成的代碼就會調用 encode.js 文件的 htmlEncode() 函數。

清單 17. innerHTML.tag 文件

<%@ attribute name="id" required="true" rtexprvalue="true" %>
<%@ attribute name="value" required="false" rtexprvalue="true" %>
<%@ attribute name="encode" required="false" rtexprvalue="true"
type="java.lang.Boolean" %>

<%@ taglib prefix="c" uri="//java.sun.com/jsp/jstl/core" %>

<c:if test="${empty value}">
<jsp:doBody var="value"/>
</c:if>
<c:if test="${encode}">
document.getElementById("${id}").innerHTML = htmlEncode(${value});
</c:if>
<c:if test="${!encode}">
document.getElementById("${id}").innerHTML = ${value};
</c:if>
 

　　<da:innerHTML> 標記可用在 <da:xhr> 之內以處理 Ajax 響應，如本文的示例應用程序所示。您可以構建類似的標記文件以根據應用程序的具體需要執行不同的處理操作。

　　結束語

　　在本文，您接觸了如何利用 JSP 標記文件生成 Ajax 例程。您可以使用相同的技術生成服務器端其他類型的 JavaScript 函數，這樣一來，您就能夠更容易地添加或更改特性，因為每次修改了充當模板的標記文件時，代碼都會自動重生成。