Ajax-based infinite-level menus

Ajax| Menu

There are tutorials all over the place now, and I'm going to focus on a framework that I've been doing myself.

Characteristics:
Non-flash commit for form (a bit stupid)
Supports the MVC framework, which supports traditional Web page architectures
Multithreading concurrent requests (for language support threads)
Dynamically loading files, loading only useful! Handled the AJAX framework bloated JS file problem.
Full div + CSS layout with no table

A. Access to XMLHttpRequest objects, found everywhere on the internet, not much said:

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

This provides a common way to support multiple browsers.

B. Making an asynchronous request

//here with Bcandy as the method name is to thank someone who is very important to me, she has been supporting me
function Bcandy (tid,url,parm,js) {
if (url = = "") {
return;
}
//This is a load information prompt box, or you can not!
document.getElementById ("Load"). style.visibility = "visible";
//loading the corresponding page of the JS file
if (JS!= null) {
//load JS file
Loadjs (JS);
}
//Get a XMLHttpRequest instance
var req = Newxmlhttprequest ();
Sets 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");
Send parameter
req.send (parm);
}

function Getreadystatehandler (Req,tid) {
Returns an anonymous function that listens for XMLHttpRequest instances
return function () {
If the status of the request is "done"
if (req.readystate = = 4) {
Successfully received the server response
if (Req.status = = 200) {
The following sentence is the focus, which shows the content part of the return information, or can be modified. Perform other processing
document.getElementById (Tid). InnerHTML = Req.responsetext;
document.getElementById (Tid). style.visibility = "visible";
This is the implementation of the load information balloon hidden, you can not.
document.getElementById ("Load"). Style.visibility = "hidden";
} else {
An HTTP problem has occurred
document.getElementById ("Load"). Style.visibility = "hidden";
Alert ("HTTP error:" +req.status);
}
}
}
}

Dynamically Loading 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 of the use of request.responsetext, so you can request a page directly jsp,servlet but when you use the Struts framework request for special processing, because the form does not support asynchronous requests. It is recommended that you do not add tags to these pages, like the ASXM files in. net! And when using the struts framework, it's a bit of a note that the mapping object simply returns NULL, because we'll talk about concurrent multithreading below. To deal with this problem.
Overall, it's kind of like building blocks. This facilitates the modification and extension of the file, and does not affect each other, and realizes code and label separation. When you make a traditional page revision, you don't have to rewrite all the code. Only a small number of changes can be a perfect AJAX to achieve the flash-free refreshing pleasure.

The above code has been tested under Ie,firefox!

First, create a datasheet menu

MId Menu Primary Key
Name Menu Names
URL Menu Links
Father low-level Menu ID
Sub is the bottommost menu (used to determine if it can continue to expand)
Target menu link destination (as display ID when opened in AJAX mode)
PA Menu parameters (This is an AJAX way to open the menu)

Make a Menu object class

Class menu{
private int mId;
private String name;
.//Other Members

Public Getmid () {
return mId;
}
Public setmid (int mId) {
This.mid = mId;
}
...//other member's Get set method,
}

The other is the Operation class

Class Menuopt () {
Public Vector getmenus (int father) {
Vector vector = new vector ();
This is all the menu that gets the parent menu ID father
and encapsulated into an object of the vector.
return vector;
}
}

The second is the general JSP file. But pay attention to the previous said, do not include tags!
MENU.JSP:

<% @page contenttype= "text/html; charset=gb2312 "%>
<% @taglib uri= "Http://java.sun.com/jsp/jstl/core"; Prefix= "C"%>

${m.name}

${m.name}

Menu.js:

Opermenu (open drop-down Menu ID, open Address, link open target, parameters).
This is the way to use the menu.jsp.
function ShowMenu (id,url,target,param) {
var trobj = document.getElementById ("tr" +id);
var tdobj = document.getElementById (ID);
try{
if (document.getElementById ("tr" +id). Style.display = = "None") {
Show Menu
if (tdobj.innerhtml = null | | tdobj.innerhtml = = "") {
Extract data
document.getElementById ("tr" +id). Style.display = "";
document.getElementById ("img" +id). src = "Pic/menu2.gif"
Bcandy (ID, "page/menu.jsp", Param, "");
Openmenu (Url,target,param);
}else{
If there is content in it, direct display
document.getElementById ("tr" +id). Style.display = "";
document.getElementById ("img" +id). src = "Pic/menu2.gif"
Openmenu (Url,target,param);
}
Bcandy (Target,url,param, "");//Open Menu link
}else{
Hide Menu
document.getElementById ("tr" +id). Style.display = "None";
document.getElementById ("img" +id). src = "Menu0.gif"
}
}catch (e) {}
}

Open Menu
function Openmenu (url,target,param) {
There's no need for me to write here. There are several ways to implement it, and we recommend using Ajax!
}

Finally, the Display page:

<%@ page contenttype= "text/html; charset=gb2312 "%>



function ini () {
Bcandy ("0", "menu.jsp", "id=0&father=0", "menu.js");
}

In data processing, please wait ...

Can see, no matter at which level, and the traditional nothing different, only the JSP part of the removal of the file header (in fact, not to remove also line, hehe), and, also can see, a page, has been divided into several parts. As I said before, the building blocks (this is a structure that the author put forward when I saw a structure of the. NET Framework on the Internet, it feels good, I apply it to JSP).

In some detail, I have made some reservations, please understand. But the general framework is through IE and Firefox testing. Some functional aspects of the expansion, think about it.

Principle: In fact, is the application of the page recursion! And the usual recursive method, but it's on the page.

Loop that will display the objects encapsulated into the vector
for{
If (if is the topmost menu sub=n) {

Show Menu Contents

}else{

Display Menu Contents

}
}

ShowMenu (Father,id ...) method, the page is called again after the data is obtained from the incoming father to the server. At this point, the content of the page is displayed in the new ID. In this way, it looks as if it has the same effect as the Tree menu in MSDN.

Advantages: Multi-level menu multiple access, speed up the reaction speed, at the same time the application of Ajax requests, people do not feel the flicker of the page, strong affinity. In addition, you can JS added code, so that users do not have to each click to get the server data, but first judged there is no content, no more to take ... At the same time, the implementation of the menu and page synchronization, in each open level menu, can be in the appropriate place to open the page. Similarly, this opermenu () can also be used in AJAX mode.