本程序對ajax的一些基礎調用進行了封裝,使用者只要實現具體的事件驅動程序就可以
了,如本例子的doTest.js, 然后把該文件引進相對應的jsp文件里面,如test.jsp
test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<script src="ajaxjs/ajaxInit.js" type="text/javascript"></script>
<script src="ajaxjs/doTest.js" type="text/javascript"></script>
<html>
? <body>
? <input name="testText" type="text" value="">
? <input type="button" value="test" onclick="doTestRequest(document.getElementById('testText').value,'jgaopass','doTestAfterRequest','responseText');">
? </body>
</html>
doTest.js
//測試函數
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/**
* 請求
* doAfterRequestMethodName 請求成功后的要執行的函數名稱
* responseTypeName ajax異步調用后返回的內容的類型,可以使responseText或者responseXml
*/
function doTestRequest(userName, userPwd, doAfterRequestMethodName, responseTypeName){?
?var param = setQueryString('userName',userName,'userPwd',userPwd);
?sendRequest('toStrutsAjaxTest.do',param,doAfterRequestMethodName,responseTypeName);
}
//請求成功后的執行內容
function doTestAfterRequest(responseString){
?var teststring = document.getElementById("testText");
?teststring.value = responseString;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ajaxInit.js
//全局變量
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var xmlHttp = false;
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////??
//公共函數
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//創建XMLHttpRequest對象
function createXMLHttpRequest() {???
?if (window.XMLHttpRequest) {//Mozilla 等瀏覽器??? ?
??xmlHttp = new XMLHttpRequest();
??? ?} else {?? ??
??? ??if (window.ActiveXObject) {// IE瀏覽器
??? ???try {
??? ????xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
??? ???}
??? ???catch (e) {
??? ????try {
??? ???? ?xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
??? ????}
??????????????? ??catch (e) {
??????????????? ??}
????????? ??}
????? ??}
?}
? ?if (xmlHttp.overrideMimeType) {//修改MiME類型
? ??xmlHttp.overrideMimeType("text/xml");
? ?}??
? ?if (!xmlHttp) {//創建XMLHttpRequest失敗
? ??window.alert("創建XMLHttpRequest失敗");
?? ??return false;
? ?}
}
//向后臺發送請求的參數設置
function setQueryString(){
?var param="";
??for(var i=0;i<arguments.length;i++){
??param+=arguments[i]+'='+encodeURI(arguments[i+1]);
??if(i!=arguments.length-2){
???param+="&";
???i++;
??}else{
???break;
??}?
?}
?return param;
}
/**
* 發送請求
* doAfterRequestMethodName 請求成功后的要執行的函數名稱
* responseTypeName ajax異步調用后返回的內容的類型,可以使responseText或者responseXml
*/
function sendRequest(requestUrl,param,doAfterRequestMethodName,responseTypeName){
?createXMLHttpRequest();?
?xmlHttp.open('POST',requestUrl,true);
?xmlHttp.setrequestheader("content-type","application/x-www-form-urlencoded");
?xmlHttp.onreadystatechange= function(){regCallBack(doAfterRequestMethodName,responseTypeName);};
?xmlHttp.send(param);
}
//回調函數
function regCallBack(doAfterRequestMethodName,responseTypeName){?
?if(xmlHttp.readyState == 4){
??if(xmlHttp.status == 200){
????? ???doAfterRequest(doAfterRequestMethodName,responseTypeName);
??}
?}
}
//請求成功后的執行函數
function doAfterRequest(doAfterRequestMethodName,responseTypeName){
?var responseString = "";
?if (responseTypeName!=null){
??if (responseTypeName == "responseText"){
???responseString = xmlHttp.responseText;
??}
??if (responseTypeName == "responseXml"){
???responseString = xmlHttp.responseXml;
??}
?}?
?if(doAfterRequestMethodName!=null){
??eval(doAfterRequestMethodName+"('"+responseString+"')");
?}
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
struts-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.1//EN" "
http://jakarta.apache.org/struts/dtds/struts-config_1_1.dtd
">
<struts-config>
? <data-sources />
? <form-beans />
? <global-exceptions />
? <global-forwards />
? <action-mappings >
??? <action path="/toStrutsAjaxTest" type="com.jgao.ajax.test.struts.action.ToStrutsAjaxTestAction">
?</action>
? </action-mappings>
? <message-resources parameter="com.yourcompany.struts.ApplicationResources" />
</struts-config>
ToStrutsAjaxTestAction.java
//Created by MyEclipse Struts
// XSL source (default): platform:/plugin/com.genuitec.eclipse.cross.easystruts.eclipse_4.1.0/xslt/JavaClass.xsl
package com.jgao.ajax.test.struts.action;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
/**
?* MyEclipse Struts
?* Creation date: 09-18-2006
?*
?* XDoclet definition:
?* @struts.action validate="true"
?*/
public class ToStrutsAjaxTestAction extends Action {
?// --------------------------------------------------------- Instance Variables
?// --------------------------------------------------------- Methods
?/**
? * Method execute
? * @param mapping
? * @param form
? * @param request
? * @param response
? * @return ActionForward
? * @throws IOException
? */
?public ActionForward execute(
??ActionMapping mapping,
??ActionForm form,
??HttpServletRequest request,
??HttpServletResponse response) throws IOException {
??String teststring = request.getParameter("userName");
??teststring = teststring + "ok";
?? response.getWriter().write(teststring);
??return null;
?}
}