Implement Ajax-based unlimited menus (1)

Framework features:

The method for supporting Form-based non-transient submission is a bit stupid)

Supports the MVC framework.

Multi-thread concurrent requests require language support threads)

Dynamic file loading, only useful! Handles the problem of bloated JS files in the Ajax framework.

Use the full div + css layout of no table

A. Get the XMLHTTPRequest object, which can be found everywhere on the Internet, not to mention:

function newXMLHttpRequest() { var xmlreq = false; if (window.XMLHttpRequest) { xmlreq = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { xmlreq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { } } } return xmlreq; }

Here we provide a general method to support multiple browsers.

B. Submit an asynchronous request

// Here we use Bcandy as the method name to thank someone who is very important to me and she has been supporting me. Function Bcandy (Tid, url, parm, js ){ If (url = ""){ Return; } // This is a prompt box for loading information, or not! Document. getElementById ("load"). style. visibility = "visible "; // Load the JS file of the corresponding page If (js! = Null ){ // Load the JS File LoadJS (js ); } // Obtain an XMLHttpRequest instance Var req = newXMLHttpRequest (); // Set the handle function used to receive callback notifications from the request object Var handlerFunction = getReadyStateHandler (req, Tid ); Req. onreadystatechange = handlerFunction; // The third parameter indicates that the request is asynchronous. Req. open ("POST", url, true ); // Indicates that the request body contains form data Req. setRequestHeader ("Content-Type ", "Application/x-www-form-urlencoded "); // Sending Parameters Req. send (parm ); } Function getReadyStateHandler (req, Tid ){ // Returns an anonymous function that listens to the XMLHttpRequest instance. Return function (){ // If the request status is "complete" If (req. readyState = 4 ){ // The server response is successfully received. If (req. status = 200 ){ // The following sentence is important. The content of the returned information is displayed and can be modified. Other Processing Document. getElementById (Tid). innerHTML = req. responseText; Document. getElementById (Tid). style. visibility = "visible "; // This statement is used to hide or hide the loading prompt box. Document. getElementById ("load"). style. visibility = "hidden "; } Else { // An HTTP Error occurs. Document. getElementById ("load"). style. visibility = "hidden "; Alert ("HTTP error:" + req. status ); } } } } // Dynamically load JS files Function LoadJS (file ){ Var head = document. getElementsByTagName ('head'). item (0 ); Var script = document. createElement ('script '); Script. src = file; Script. type = "text/javascript "; Head. appendChild (script ); }

This is the basic framework, because the request is used. responseText; therefore, you can directly request a page jsp, servlet, but special processing is required for requests using the Struts framework, because Form does not support asynchronous requests. We recommend that you do not add tags on these pages, just like the asxm file in. net! When using the Struts framework, note that the Mapping object can return null directly, because we will talk about concurrent multithreading below. To solve this problem.

In general, it seems like building blocks. This facilitates File Modification and expansion without affecting each other, and achieves code and tag separation. During the traditional page revision, you do not need to rewrite all the code. You only need to modify a small part to perfectly implement the non-flash refreshing pleasure brought by Ajax.

The above code has been tested in IE and FireFox.