Ajax-based unlimited menu

Source: Internet
Author: User

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. 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

// bcandy is used as the method name here to thank a very important person for me. She has been supporting me.
function bcandy (TID, URL, parm, JS) {
If (url = "") {
return;
}< br> // 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 );
}< br> // get 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 parameter
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 the <HTML> <body> tag 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, and does not affect each other.CodeAnd label 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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.