單純為炫技用 AJAX 得不償失。
流程:填寫表單 → 點擊提交 → 表單禁用、顯示「提交中」 → 服務端驗證 → 失敗顯示錯誤、表單啟用 → 成功提示並跳轉首頁。
SpringSide 內建,語法極簡:
var ajax = new Ajax.Request(url, {method: 'get', onComplete: onResponse});
AJAX 不自動序列化表單,需手動拼接 URL 參數:
function onSubmit() {
var url = 'RegUser.do?method=submit';
var inputs = userForm.all.tags('input');
for (var i=0; i<inputs.length; i++) {
url += '&' + inputs[i].name + '=' + inputs[i].value;
inputs[i].disabled = true;
}
showDoingMessage();
new Ajax.Request(url, {method: 'get', onComplete: onResponse});
}
編碼陷阱:`@`、`#` 等特殊字符破壞 URL。`escape()` 導致中文亂碼。只能客戶端過濾非法字符。
拒 XML(解析繁瑣),棄 JSON(當時較重),直接返回可執行 JavaScript 代碼:
function onResponse(request) { eval(request.responseText); }
服務端輸出如 name_err.innerHTML='用戶名不能為空'; failed(); 或 success();。
AJAX 用 URL 參數傳遞,非 `HibernateEntityDao 快速查重(用戶名、暱稱)。
AJAX 獨立線程,編碼由作業系統決定(GB2312)。雙向轉碼:
// 接收
String name = new String(request.getParameter('name').getBytes('ISO-8859-1'), 'GB2312');
// 發送
response.setCharacterEncoding('GB2312');
response.getOutputStream().println(result);
response.flushBuffer();
public ActionForward submit(...) {
boolean success = true; String result = '';
User user = new User();
// 驗證用戶名、暱稱、密碼、問題、Email、QQ、驗證碼...
// 示例:用戶名
String name = ...;
if (empty) { success=false; result+=\"name_err.innerHTML='用戶名不能為空';\"; }
else if (!name.matches('^[A-Za-z0-9_]*$')) { ... }
else if (name.length() > 20) { ... }
else if (userManager.isNotUnique(user, 'name')) { ... }
else { result+=\"name_err.innerHTML='';\"; }
// ... 其他字段類似
if (!success) { result += 'failed();'; writeResponse(result); }
else {
if (isTokenValid(request)) { userManager.save(user); resetToken(request); }
writeResponse('success();');
}
return null;
}
function failed() { hideDoing(); enableForm(); }
function success() { showDoing('用戶註冊成功,將跳轉到首頁!', 'blue'); setTimeout(\"location.href='welcome.do';\", 4000); }
<action path="/RegUser" scope="request" parameter="method">
<forward name="agree" path="/RegUser_Agree.jsp"/>
<forward name="apply" path="/RegUser_Apply.jsp"/>
</action>
<bean name="/RegUser" class="com.xkland.action.RegUserAction"/>
看似簡單的 AJAX 註冊,實則暗藏編碼、序列化、驗證框架失效、亂碼、瀏覽器兼容等重重陷阱,耗時兩天。AJAX 強大但請謹慎使用,做好防禦性編程。