Implement an Ajax-based infinite-level menu

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 I use Bcandy as a method name 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 loading information prompt box, also can not!

document.getElementById ("Load"). style.visibility = "visible";

The JS file that loads the corresponding page

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 parameters

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 labels 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 what you said before, don't include tags!

MENU.JSP:

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

% @taglib uri= "Http://java.sun.com/jsp/jstl/core" prefix= "C"%>

Jsp:usebean id= "menu" scope= "page" class= "Ycoe.basic.MenuOpt"/>

Jsp:setproperty name= "Menu" property= "father" Value= "${param.father}"/>

Div>

C:foreach var= "M" Items= "${menu.vector}" Varstatus = "C" >

C:choose>

C:when test= "${m.sub eq ' Y '}" >

div >

IMG src= "http://www.webjx.com/htmldata/2006-04-06/pic/menu0.gif" id= "Img${m.mid}" alt= "style=" Cursor:hand; " >

A href= "#" class= "Text1" >${m.name}

/div>

Div style= "Display:none" id= "Tr${m.mid}" >

Div style= "padding-left:12pt" id= "${m.mid}" >

/div>

/c:when>

C:otherwise>

div >

IMG src= "http://www.webjx.com/htmldata/2006-04-06/pic/menu1.gif" id= "Img${m.mid}" alt= "" >

A href= "#" class= "Text1" >${m.name}

/div>

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 = "Http://www.webjx.com/htmldata/2006-04-06/pic/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 "%>

Meta Http-equiv=content-type content= "text/html; charset=gb2312 ">

Style>

. text1:hover {border:1px #999999 solid; Background-color: #CCCCCC; height:12px;}

. text1{border:1px #FFFFFF solid; height:12px;}

function ini () {

Bcandy ("0", "menu.jsp", "id=0&father=0", "menu.js");

}

Body >

div id= "Load" style= "Z-INDEX:1; Color: #FF0000; Visibility:hidden; Filter:alpha (opacity=85); Background-color: #FFFFFF; left:48%; top:48%; Border-right: #000000 1px solid; padding-right:12px; Border-top: #000000 1px solid; padding-left:12px; padding-bottom:12px; Border-left: #000000 1px solid; line-height:22px; padding-top:12px; Border-bottom: #000000 1px solid; Position:absolute; " >

IMG src= ' http://www.webjx.com/htmldata/2006-04-06/pic/loop.gif ' alt= ' ">

In data processing, please wait ...

Br>

Div id= "0" align= "center" >

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.

div id= "Tr${m.id}" >

Loop that will display the objects encapsulated into the vector

for{

If (if is the topmost menu sub=n) {

div id= "T${m.id}" >

Show Menu Contents

　

　

Div style= "Display:none" id= "Td${m.id ...}" >

}else{

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

Effect can be on http://www.start.com/look