Ajax-based unlimited menu instance [1]

This tutorial is available everywhere. I will focus on a framework I have built myself.

Features:
Supports Form-based non-transient submission (the method is a bit stupid)
Supports the MVC framework.
Multi-thread concurrent requests (to support threads in languages)
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.The XMLHTTPRequest object is obtained everywhere on the Internet:

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.Make asynchronous request

 

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 the 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 is inIE, FireFoxUnder the test!

// 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 );
}