ajaxAnyWhere开发学习

Dependent List Example

Let us make a dependent list example with AjaxAnywhere.

We will take as a starting point a traditional JSP solution. Then we will integrate it with AjaxAnywhere. 

To feel and compare the page behavior with and wothout AjaxAnywhere, click on this Online Demo 

<%@ page pageEncoding="UTF-8" import="java.util.*"%>
<%  // some unimportant code here
String currentLanguage = request.getParameter("language");
if (currentLanguage==null)
currentLanguage="en";

Locale[] availableLocales = Locale.getAvailableLocales();
Map languagesDisplay = new TreeMap();
Map countries = new TreeMap();

for (int i = 0; i < availableLocales.length; i++) {
Locale loc= availableLocales[i];
languagesDisplay.put(loc.getLanguage(), loc.getDisplayLanguage(Locale.ENGLISH));
if (loc.getDisplayCountry(Locale.ENGLISH).length()>0
&& loc.getLanguage().equals(currentLanguage))
countries.put(loc.getCountry(), loc.getDisplayCountry(Locale.ENGLISH));
}
%>

Without AjaxAnywhere <br>
<%@ include file="/locales_counter.jsp"%>

<form method="POST" name=main>

<select size="10" name="language" onchange="this.form.submit()">
<%@ include file="/locales_options_lang.jsp"%>
</select>

<select size="10" name="country" >
<%@ include file="/locales_options_countries.jsp.jsp"%>
</select>
</form>

<%@ page pageEncoding="UTF-8" import="java.util.*"%>
<%@ page import="org.ajaxanywhere.AAUtils"%>
<%@ taglib uri="http://ajaxanywhere.sourceforge.net/" prefix="aa" %>

<%
String currentLanguage = request.getParameter("language");
if (currentLanguage==null)
currentLanguage="en";

Locale[] availableLocales = Locale.getAvailableLocales();
Map languagesDisplay = new TreeMap();
Map countries = new TreeMap();

for (int i = 0; i < availableLocales.length; i++) {
Locale loc= availableLocales[i];
languagesDisplay.put(loc.getLanguage(), loc.getDisplayLanguage(Locale.ENGLISH));
if (loc.getDisplayCountry(Locale.ENGLISH).length()>0
&& loc.getLanguage().equals(currentLanguage))
countries.put(loc.getCountry(), loc.getDisplayCountry(Locale.ENGLISH));
}

// this code does not have to be placed inside a JSP page. It can (should)
// be executed inside your Controller, if you use an MVC famework. For Struts, for example,
// this code goes to an Action class.

if (AAUtils.isAjaxRequest(request)){
AAUtils.addZones(request, "countriesList");
}

%>

<script src="aa/aa.js"></script><script>ajaxAnywhere.formName = "main";</script>

With AjaxAnywhere <br>
<%@ include file="/locales_counter.jsp"%>

<form method="POST" name=main>

<!-- Here the form does not have action attribute.
This means that the form is submitted to
the original URL, this JSP page in our case.

However, your application may submit to a different URL.

Also, you application may use GET, instead of POST, download AjaxAnywhere Demo Application for more examples.
-->

<select size="10" name="language" onchange="ajaxAnywhere.submitAJAX();">
<%@ include file="/locales_options_lang.jsp"%>
</select>

<aa:zone name="countriesList">

<select size="10" name="country" >
<%@ include file="/locales_options_countries.jsp.jsp"%>
</select>

</aa:zone>

</form>

<filter>
<filter-name>AjaxAnywhere</filter-name>
<filter-class>org.ajaxanywhere.AAFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>AjaxAnywhere</filter-name>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>

• First of all we use 

  aa:zone

   custom tag to mark a zone that needs to be refreshed.
• Then we include JavaScript file and assign the form name to a property of AjaxAnywhere default instance. We also modify onchange attribute of the first list.
• Finally, on the server side we use AAUtil class to indicate what zone is to be refreshed. As the zone name was already known before submitting the request, we could also have implemented this logic on the client-side instead:

  ajaxAnywhere.getZonesToReload = function() {
  return "countriesList";
  }

Class AjaxAnywhere

Object
|
+--AjaxAnywhere

class AjaxAnywhere

Defined in aa.js

 Object

delayBeforeContentUpdate

 Object

delayInMillis

 Object

formName

 Object

id

 Object

notSupported

 Object

req

 Object

substitutedSubmitButtons

 Object

substitutedSubmitButtonsInfo

<static>  Object

defaultInstanceName

AjaxAnywhere () 

 void

bindById() 

 void

callback() 

 void

dropPreviousRequest() 

 Object

findForm() 

 Object

getAJAX(url, zonesToRefresh) 

 Object

getDelayTime() 

 Object

getGlobalScriptsDeclarationsList(script) 

 Object

getZonesToReaload(url, submitButton) 

 Object

getZonesToReload(url, submitButton) 

 void

handleException(type, details) 

 void

handleHttpErrorCode(code) 

 void

handlePrevousRequestAborted() 

 void

hideLoadingMessage() 

 Object

isDelayBeforeLoad() 

 Object

isFormSubmitByAjax() 

 void

onAfterResponseProcessing() 

 void

onBeforeResponseProcessing() 

 Object

onGetAjaxNotSupported(url) 

 void

onRequestSent() 

 Object

onSubmitAjaxNotSupported(additionalPostData, submitButton) 

 Object

preparePostData(submitButton) 

 void

setDelayBeforeLoad(isDelay) 

 void

setDelayTime(delayMillis) 

 void

showLoadingMessage() 

 Object

submitAJAX(additionalPostData, submitButton) 

 void

substituteFormSubmitFunction() 

 void

substituteSubmitButtonsBehavior(keepExistingOnClickHandler, elements) 

<static> Object

findInstance(id) 

delayBeforeContentUpdate

Object delayBeforeContentUpdate

delayInMillis

Object delayInMillis

formName

Object formName

id

Object id

notSupported

Object notSupported

req

Object req

substitutedSubmitButtons

Object substitutedSubmitButtons

• Stores substitutes SubmitButton names in to redo sustitution if a button was eventually inside a refresh zone.

substitutedSubmitButtonsInfo

Object substitutedSubmitButtonsInfo

defaultInstanceName

<static> Object defaultInstanceName

AjaxAnywhere

AjaxAnywhere()

bindById

void bindById()

• Binds this instance to window object using "AjaxAnywhere."+this.id as a key.

callback

void callback()

• A callback. internally used

dropPreviousRequest

void dropPreviousRequest()

• Used internally by AjaxAnywhere. Aborts previous request if not completed.

findForm

Object findForm()

• Returns a Form object that corresponds to formName property of this AjaxAnywhere class instance.

getAJAX

Object getAJAX(url, zonesToRefresh)

• sends a GET request to the server.

getDelayTime

Object getDelayTime()

• Returns the delay period in milliseconds.

getGlobalScriptsDeclarationsList

Object getGlobalScriptsDeclarationsList(script)

• If the HTML received in responce to AJAX request contains JavaScript that defines new functions/variables, they must be propagated to the proper context. Override this method to return the Array of function/variable names.

getZonesToReaload

Object getZonesToReaload(url, submitButton)

• depreceted : wrond spelling : Reaload will be removed in later versions

getZonesToReload

Object getZonesToReload(url, submitButton)

• This function should be overridden by AjaxAnywhere user to implement client-side determination of zones to reload. If the form is submited with <input type=submit|image>, submitButton is a reference to the DHTML object. Otherwise - undefined.

handleException

void handleException(type, details)

• If an exception is throws on the server-side during AJAX request, it will be processed by this function. The default implementation is alert(stackTrace); Override it if you need.

handleHttpErrorCode

void handleHttpErrorCode(code)

• If an HTTP Error code returned during AJAX request, it will be processed by this function. The default implementation is alert(code); Override it if you need.

handlePrevousRequestAborted

void handlePrevousRequestAborted()

• Override it if you need.

hideLoadingMessage

void hideLoadingMessage()

• Default sample loading message hide function. Overrride it if you like.

isDelayBeforeLoad

Object isDelayBeforeLoad()

• Returns the current delay behavior.

isFormSubmitByAjax

Object isFormSubmitByAjax()

• Override this function if you use AjaxAnywhere.substituteFormSubmitFunction() to dynamically inform AjaxAnywhere of the method you want to use for the form submission.

onAfterResponseProcessing

void onAfterResponseProcessing()

• Override this method to implement a custom action

onBeforeResponseProcessing

void onBeforeResponseProcessing()

• Override this method to implement a custom action

onGetAjaxNotSupported

Object onGetAjaxNotSupported(url)

• Provides a default implementation from graceful degradation for getAJAX() calls location.href=url if XMLHttpRequest is unavailable, reloading the entire page .

onRequestSent

void onRequestSent()

• Override this method to implement a custom action

onSubmitAjaxNotSupported

Object onSubmitAjaxNotSupported(additionalPostData, submitButton)

• Provides a default implementation from graceful degradation for submitAJAX() calls form.submit() if XMLHttpRequest is unavailable, reloading the entire page

preparePostData

Object preparePostData(submitButton)

• Internally used to prepare Post data. If the form is submited with <input type=submit|image>, submitButton is a reference to the DHTML object. Otherwise - undefined.

setDelayBeforeLoad

void setDelayBeforeLoad(isDelay)

• Some browsers (notably IE) do not load images from thier cache when content is updated using innerHTML. As a result, each image is re-requested from the server even though the image exists in the cache. To work around this issue, AjaxAnywhere preloads images present in the new content and intrduces a brief dely (default of 100 milleseconds) before calling innerHTML. See http://support.microsoft.com/default.aspx?scid=kb;en-us;319546 for further details. This function can be used to change this behaviour.

Parameters:

boolean

• [ul] - ) isDelay

setDelayTime

void setDelayTime(delayMillis)

• Sets the delay period in milliseconds. The default delay is 100 milliseconds.

Parameters:

int

• [ul] - ) delayMillis

showLoadingMessage

void showLoadingMessage()

• Default sample loading message show function. Overrride it if you like.

submitAJAX

Object submitAJAX(additionalPostData, submitButton)

• This function is used to submit all form fields by AJAX request to the server. If the form is submited with <input type=submit|image>, submitButton should be a reference to the DHTML object. Otherwise - undefined.

substituteFormSubmitFunction

void substituteFormSubmitFunction()

• This function is used to facilitatte AjaxAnywhere integration with existing projects/frameworks. It substitutes default Form.sumbit(). The new implementation calls AjaxAnywhere.isFormSubmitByAjax() function to find out if the form should be submitted in traditional way or by AjaxAnywhere.

substituteSubmitButtonsBehavior

void substituteSubmitButtonsBehavior(keepExistingOnClickHandler, elements)

• Substitutes the default behavior of <input type=submit|image> to submit the form via AjaxAnywhere.

Parameters:

indicates

• [ul] - if existing onClick handlers should be preserved. If keepExistingOnClickHandler==true, Existing handler will be called first if it returns false, or if event.returnValue==false, AjaxAnywhere will not continue form submission. If keepExistingOnClickHandler==false or undefines, existing onClick event handlers will be replaced.

list

• [ul] - of submitButtons and submitImages names. If the parameter is omitted or undefined, all elements will be processed

findInstance

<static> Object findInstance(id)

• Finds an instance by id.