Ajax 技術 學習步驟
1、 把 ajaxanywhere-1.2-RC2.jar 壓縮包復制到 \工程名\WebRoot\WEB-INF\lib 目錄下。
2、 把 ajaxanywhere.tld 文件復制到 \工程名\WebRoot\WEB-INF 目錄下。
3、 把 js 文件夾復制到 \工程名\WebRoot 目錄下。
4、把 log4j-1.2.11.jar 加到WebRoot\WEB-INF\lib 目錄下
5、在 web.xml 中添加 ajax 的配置
<!-- Ajax配置開始,帶編碼轉換(包括ajax提交的編碼) -->
<filter>
<filter-name>AjaxAnywhere</filter-name>
<filter-class>org.ajaxanywhere.AAFilter</filter-class>
<init-param>
<param-name>ShowInfo</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>encoding</param-name><!-- 普通提交方式編碼 -->
<param-value>GB2312</param-value>
</init-param>
<init-param>
<param-name>ajaxencoding</param-name><!-- AJAX提交方式編碼 -->
<param-value>GB2312</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>AjaxAnywhere</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- Ajax配置結束 -->
6、新建 login.jsp 文件,添加 ajax 標簽
<%@ page language="java" pageEncoding="gbk"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib uri="/WEB-INF/ajaxanywhere.tld" prefix="
7、導入 ajax 文件
<!-- select.js 主要有:onSelect() 與 onSelectAll()方法-->
<script src="js/select.js" type="text/javascript"></script>
<!-- Ajax JS 與ajvaAnywhere 組件包結合使用 必須-->
<script src="js/ajax.js" type="text/javascript"></script>
8、定義刷新熱區
<label><ajax:zone name="AdminZone"><font color="red">${requestScope.IsAdmin }</font></
9、定義觸發事件:<input name="aname" type="text" class="input_normal" id="aname" onblur="checkuser()">
可以是: 失去焦點、點擊、雙擊
10、編寫腳本方法:
<script type="text/javascript">
//ajax 判斷用戶是否存在
function checkuser(){
var username=document.loginForm.aname.value;
if(username!=""){ //ajaxAnywhere.getAJAX("adminAction.do?methods=isAdmin&aname="+username);
document.loginForm.action="login.do?methods=isAdmin";
ajaxAnywhere.formName="loginForm";
ajaxAnywhere.submitAJAX();
}
}
</script>
11、建立相應的 form 和 action
/**
* 可以用Ajax來判斷用戶名是否存在(登陸驗證)
* @param mapping
* @param form
* @param request
* @param response
* @return
*/
public ActionForward isAdmin(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response){
LoginForm loginForm = (LoginForm) form;
// 處理刷新區域
if (AAUtils.isAjaxRequest(request)) {
/**下面的AdminExistZone 為熱區的名字,即在jsp中<aa:zone name="AdminExistZone">...</aa:zone>中的name屬性的值*/
AAUtils.addZonesToRefresh(request, "AdminZone");
}
if(loginForm.getAname().equals("xx")){
request.setAttribute("IsAdmin", "用戶名存在!");
}else{
request.setAttribute("IsAdmin", "該用戶名不存在!");
}
return new ActionForward("/login.jsp");
}
12、修改 struts-config.xml 文件的配置