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

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

　　使用框架和代碼生成器

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

　　在開發(fā)的過程中避免復(fù)制 & 粘貼

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

清單 1. Ajax 函數(shù)

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);
}
 

　　開發(fā)泛型函數(shù)

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

　　假設(shè)您決定使用的函數(shù)的名稱為 xhr()，它能接受 5 個參數(shù):返回信息的頁面的 URL、包含名稱和請求參數(shù)的值的兩個數(shù)組、HTTP 方法和用來處理 Ajax 響應(yīng)的一個回調(diào)函數(shù)。現(xiàn)在，您的應(yīng)用程序?qū)鼮楹唵蔚暮瘮?shù)，比如清單 2 中所示的 getInfo2()，而且代碼也更容易維護(hù)。如果想要更改發(fā)送 Ajax 請求的代碼，只能修改 xhr() 函數(shù)。

清單 2. 使用泛型函數(shù)

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 包含的泛型函數(shù)，名為 xhr()，特定于應(yīng)用程序的函數(shù)名為 getInfo2()。泛型代碼應(yīng)被移入單獨(dú)的 JavaScript 文件以便能將可重用函數(shù)導(dǎo)入需要它們的任何頁面。對于特定的代碼，比如 getInfo2() 函數(shù)，如果應(yīng)用程序需要基于相同模式的很多函數(shù)，就應(yīng)該考慮使用代碼生成器。

　　動態(tài)生成代碼

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

　　對比起來，使用 XML 標(biāo)記的一個明顯優(yōu)點(diǎn)就是它們能為屬性使用默認(rèn)值，然而編程語言只提供了有限的可能性來刪除方法參數(shù)。請考慮這些關(guān)于代碼生成器可擴(kuò)展性的諸多方面，因?yàn)樵诓淮騺y現(xiàn)有代碼的情況下向標(biāo)記增加新的屬性要比更改方法簽名簡單得多。使用 XML 和 JSP 的這些句法方面的優(yōu)點(diǎn)是很明顯的，尤其是當(dāng)代碼生成器需要大量屬性的時候。

　　JSP 是在服務(wù)器端生成 JavaScript 代碼的一種很好的選擇，因?yàn)椋?/p>

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

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

清單 3. 使用 JSP 標(biāo)記文件生成 Ajax 函數(shù)

<%@ 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 代碼可被放入調(diào)用清單 3 中所示的生成函數(shù)的 Web 頁面的 <script> 元素中。如果多個 Web 頁面需要同樣的 JavaScript 代碼，就像任何常規(guī)的 JavaScript 文件一樣， 動態(tài)生成此代碼的一個單獨(dú)的 JSP 文件將被導(dǎo)入到這個應(yīng)用程序的 Web 頁面，在 <script> 元素的 src 屬性中指定其 URI（參見清單 4）。

清單 4. 導(dǎo)入由 JSP 頁面生成的 JavaScript

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

　　緩存生成的代碼

　　雖然在開發(fā)階段為每個請求生成 JavaScript 代碼并不會產(chǎn)生問題，但您不得不考慮在生產(chǎn)環(huán)境中的性能損失。解決的方法就是緩存代碼，比如用 SJTL 將生成的代碼存儲到 JSP application 作用域，如清單 5 所示。然后，可以在 Web 頁面中用 EL 結(jié)構(gòu)（例如 ${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}
 

　　創(chuàng)建一個簡單的 Ajax 應(yīng)用程序

　　本節(jié)描述了示例應(yīng)用程序的 JSP 頁面。CityForm.jsp 頁面包括一個 Web 表單，其數(shù)據(jù)由 Ajax 發(fā)送到 Web 服務(wù)器。另一個名為 CityInfo.jsp 的頁面生成 Ajax 響應(yīng)。

　　構(gòu)建 Ajax 頁面

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

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

清單 6. CityForm.jsp 示例

<%@ taglib prefix="c" uri="//java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix=&quot;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 表單包含一個標(biāo)簽為 Get Info 的按鈕、一個國家列表和一個讓用戶輸入城市名稱的輸入字段。當(dāng)用戶單擊這個按鈕時，Web 瀏覽器將調(diào)用 getInfo2() 函數(shù)，它的調(diào)用是在 onclick 屬性內(nèi)編碼的。此函數(shù)包含 Web 表單中的 country 和 city 字段的值，并且會將這些值傳遞給 getInfo() 函數(shù)，該函數(shù)會將 Ajax 請求發(fā)送給服務(wù)器。Ajax 響應(yīng)將包含需要插入到置于 Web 表單下的 <div> 元素的信息。

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

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

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

　　所生成的代碼

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

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

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，那么所生成的代碼也會相應(yīng)地被修改，如清單 8 中所示。這里并沒有向 url 添加請求參數(shù)，相反，getInfo() 函數(shù)會將這些參數(shù)追加給一個名為 body 的變量，此變量之后會被傳遞給 ajax.js 文件的 sendRequest() 函數(shù)。

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

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 響應(yīng)

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

清單 9. CityInfo.jsp 示例

&lt;%@ 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 響應(yīng)。

清單 10. 所生成的 JSON

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

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

清單 11. noCache.tag 文件

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

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

清單 12. jstring.tag 文件

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

<%@ taglib prefix="c&quot; 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(");
%>
 

　　開發(fā) JavaScript 函數(shù)

　　本節(jié)介紹 ajax.js 和 encode.js 文件，其函數(shù)均從由 xhr.tag 和 innerHTML.tag 文件生成的 JavaScript 代碼調(diào)用。

　　XMLHttpRequest 相關(guān)的函數(shù)

　　ajax.js 文件的 openRequest() 函數(shù)（參見清單 13）接受 3 個參數(shù)（method、url 和 async）并會創(chuàng)建一個 XMLHttpRequest 實(shí)例。然后，它會調(diào)用 open() 方法并返回初始化了的 request 對象。如果 body 參數(shù)不是 null，sendRequest() 函數(shù)就會設(shè)置 Content-Type 頭并調(diào)用 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 屬性設(shè)置為一個空函數(shù)，調(diào)用 abort() 方法并之后使用 JavaScript 的 delete 操作符釋放 request 對象的內(nèi)存。該函數(shù)應(yīng)該在處理完 Ajax 請求之后對每個 XMLHttpRequest 實(shí)例調(diào)用。否則，很可能導(dǎo)致 Web 瀏覽器內(nèi)的內(nèi)存泄露。ajax.js 的最后一個函數(shù)是 httpError()，它在警告窗口顯示請求的狀態(tài)。

　　HTML 和 URL 編碼函數(shù)

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

　　JavaScript 的 escape() 函數(shù)通常用來編碼 Ajax 請求的請求參數(shù)。應(yīng)該注意 escape() 沒有編碼 + 字符，這是個問題，因?yàn)樗械?+ 均會在服務(wù)器上被解碼為空格字符。

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

清單 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() 函數(shù)向給定 URL 添加名稱/值對。如果第三個參數(shù)是一個數(shù)組，JavaScript 代碼就會在其元素上迭代并會遞歸調(diào)用 appendParam()，以便針對數(shù)組中的每個元素將名稱/值對添加至 url。

　　使用 JSP 標(biāo)記文件生成 JavaScript 代碼

　　本節(jié)介紹的是 xhr.tag 和 innerHTML.tag 文件。前者生成能將 Ajax 請求發(fā)送給服務(wù)器的 JavaScript 函數(shù)，后者則生成能在 Web 瀏覽器內(nèi)處理 Ajax 請求的回調(diào)函數(shù)的代碼。

　　發(fā)送 Ajax 請求

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

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

　　<dau:appendParams> 標(biāo)記用于 xhr.tag 文件以便向 url 變量追加請求參數(shù)（如果 method 為 GET）或向 body 變量追加請求參數(shù)（如果 method 為 POST）。ajax.js 文件的 openRequest() 函數(shù)創(chuàng)建和初始化 XMLHttpRequest 實(shí)例。Ajax 請求通過 sendRequest() 函數(shù)發(fā)送給服務(wù)器，該函數(shù)的代碼可以在同一個 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=&quot;${cpr}">var ${reqVarName} = null;</c:if>

function ${function} {
<c:if test=";${cpr}">if (${reqVarName}) closeRequest(${reqVarName});&lt;/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;
}
 

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

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

　　清單 16 給出了此 appendParams.tag 文件，該文件在給定函數(shù)頭的參數(shù)上迭代并生成一個 JavaScript 代碼行，此代碼行調(diào)用 encode.js 文件的 appendParam() 函數(shù)。本文前面介紹的清單 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=&quot;${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 資源中心，這是有關(guān)開發(fā) Ajax 應(yīng)用程序所需的免費(fèi)工具、代碼和信息的一站式中心。由 Ajax 專家 Herrington 主持的 活躍 Ajax 社區(qū)論壇 也許可以幫助您解答疑問。 

處理 Ajax 請求

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

清單 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> 標(biāo)記可用在 <da:xhr> 之內(nèi)以處理 Ajax 響應(yīng)，如本文的示例應(yīng)用程序所示。您可以構(gòu)建類似的標(biāo)記文件以根據(jù)應(yīng)用程序的具體需要執(zhí)行不同的處理操作。

　　結(jié)束語

　　在本文，您接觸了如何利用 JSP 標(biāo)記文件生成 Ajax 例程。您可以使用相同的技術(shù)生成服務(wù)器端其他類型的 JavaScript 函數(shù)，這樣一來，您就能夠更容易地添加或更改特性，因?yàn)槊看涡薷牧顺洚?dāng)模板的標(biāo)記文件時，代碼都會自動重生成。