Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to achieve unlimited menu in Ajax". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve unlimited menu in Ajax".

Support for Form flashless submission (the method is a bit stupid)

Support for MVC framework, that is, support for traditional web architecture

Multithreaded concurrent requests (language support threads)

Load files dynamically, only those that are useful! Deal with the problem of bloated JS files in Ajax framework.

Full div + css layout with no table

a. Access to XMLHTTPRequest objects 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

}

A general method to support multiple browsers is provided here.

b. Make an asynchronous request

/ / I use Bcandy as the method name here to thank someone who is very important to me who has been supporting me.

Function Bcandy (Tid,url,parm,js) {

If (url = "") {

Return

}

/ / this is a load information prompt box, or not!

Document.getElementById ("load") .style.visibility = "visible"

/ / load the JS file of 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 to the XMLHttpRequest instance

Return function () {

/ / if the status of the request is "complete"

If (req.readyState = = 4) {

/ / the server response was received successfully

If (req.status = = 200) {

/ / the following sentence is the key point, which shows the content of the returned information, which can also be modified. Carry out other processing

Document.getElementById (Tid) [xss_clean] = req.responseText

Document.getElementById (Tid) .style.visibility = "visible"

/ / this sentence is used to hide the load message prompt box, or not.

Document.getElementById ("load") .style.visibility = "hidden"

} else {

/ / there is a HTTP problem

Document.getElementById ("load") .style.visibility = "hidden"

Alert ("HTTP error:" + req.status)

}

}

}

}

/ / dynamically load JS file

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, and because request.responseText; is used, you can request a page jsp,servlet directly but with special handling when using the Struts framework, because Form does not support asynchronous requests. It is recommended that you do not add tags to these pages, just like the asxm files in. Net! And it's important to note that when using the Struts framework, the Mapping object can simply return null, because we'll talk about concurrent multithreading below. To deal with this problem.

On the whole, it's kind of like building blocks. This facilitates the modification and expansion of files without affecting each other, and the separation of code and tags is achieved. When you make a traditional page revision, you don't have to rewrite all the code. As long as you modify a small part of it, you can perfectly realize the flash-free new pleasure brought by Ajax.

At this point, I believe you have a deeper understanding of "how to achieve unlimited menu in Ajax". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.