So far, we have learned how to use JavaScript to call Ajax (listed above), Struts action, actionform, and JSP (basically no change, but adding tags ). To improve our understanding of the Struts-Ajax project, we need to understand three Javascript methods for updating pages based on the results returned by the server.
- • Processstatechange (): This method is set before Ajax call. It is called by the XMLHttpRequest/Microsoft. XMLHTTP object after the server response arrives.
- • Splittextintospan (): cyclically retrieves elements from the array and assembles them into newcontent based on the response.
- • Replaceexistingwithnewhtml (): cyclically searches for elements based on the span element array, and removes the elements in the array from the content in the same page as its 'somename. Note that we use the req. responsetext method to obtain the returned content (which allows us to operate on the response of any text ). This is relative to Req. responsexml (which has a greater role, but requires the server to return XHTML or XML ).
Function processstatechange (){ If (req. readystate = 4) {// complete
If (req. Status = 200) {// The response is normal. // Split the response text into a span element.
Spanelements =
Splittextintospan (req. responsetext ); // Use these span elements to update the page
Replaceexistingwithnewhtml (spanelements ); } Else {
Alert ("problem with server response:/N"
+ Req. statustext );
}
}
}
Replaceexistingwithnewhtml () is the "private" method used for processstatechange. Function replaceexistingwithnewhtml
(Newtextelements ){ // Loop newtextelements
For (VAR I = newtextelements. Length-1; I> = 0; -- I ){ // Determine whether to use if (newtextelements [I].
Indexof ("-1 ){ // Obtain the span name. The value is set between the first and second quotation marks.
// Confirm that the span element is in the following format
// Newcontent
Startnamepos = newtextelements [I].
Indexof ('"') + 1;
Endnamepos = newtextelements [I].
Indexof ('"', startnamepos );
Name = newtextelements [I].
Substring (startnamepos, endnamepos ); // Obtain the content-all the content marked after the first one>
Startcontentpos = newtextelements [I].
Indexof ('>') + 1;
Content = newtextelements [I].
Substring (startcontentpos ); // Update the elements in the existing document,
// Ensure that this element exists in the document
If (document. getelementbyid (name )){
Document. getelementbyid (name ).
Innerhtml = content;
}
}
}
Splittextintospan () is the "private" method used for processstatechange.
Function splittextintospan (texttosplit ){ // Split the document
Returnelements = texttosplit.
Split ("") // Process each element
For (VAR I = returnelements. Length-1; I> = 0; -- I ){ // Delete the element after the first Span
Spanpos = returnelements [I].
Indexof (" // If a match is found, obtain the content before the span.
If (spanpos> 0 ){
Substring = returnelements [I].
Substring (spanpos );
Returnelements [I] = substring;
}
}
Return returnelements;
}
|
New Control Flow
Add the following JavaScript code to our application. The following steps will be performed on the server and browser.
- 1. Load the page like a common struts application.
- 2. the user changes the value of the text box, triggers an onchange () event, and calls the retrieveurl () method.
- 3. This JavaScript method sends a struts action to the server by sending a form variable (background) request that struts understands.
- 4. the JavaScript method also sets the name of the second JavaScript method, which will be called after the server responds. In this example, it is set to processstatechange.
- 5. As we expected, the server response is complete and the processstatechange () method is called.
- 6. Javascript cyclically Retrieves all elements in the (new) server response. Replace the element that exists on the page with the same name as the obtained element.
Design Ajax in your application
The JavaScript method described above can be used in most applications, including more complex than our example. However, before using it, you need to pay attention to the following points:
• Avoid code duplication. It is best to use the same struts action and JSP in the initialization request (such as displaying the complete page) and Ajax (updating some pages) requests.
• In a public action (Controller), a region that determines the JSP page (all JSP pages or some of them) needs to be transferred to the browser. Set the tag in the session or actionform of the Web server to let the JSP page know which parts need to be submitted.
• In JSP, struts or jstl labels are used to determine the submitted HTML region.