Ajax Development Examples

Source: Internet
Author: User
Description: Initial Page
Image:
Description: First Level menu
Image:
Description: Level Two menu
Image:

Implement dynamic menus using AJAX. The menu contents are read from the database. The related tables are defined as follows:
CREATE TABLE [dbo]. [Tsys_menu] (
[MN_ID] [varchar] () COLLATE chinese_prc_ci_as not NULL,
[PARENT_MN_ID] [varchar] () COLLATE chinese_prc_ci_as not NULL,
[Mn_name] [varchar] (m) COLLATE chinese_prc_ci_as not NULL,
[Mn_order] [INT] Not NULL,
[Mn_type] [Char] (1) COLLATE chinese_prc_ci_as not NULL,
[Target_url] [varchar] (m) COLLATE chinese_prc_ci_as not NULL,
[Exp_url] [varchar] (m) COLLATE chinese_prc_ci_as NULL,
[Help_url] [varchar] (m) COLLATE chinese_prc_ci_as NULL,
[Memo] [varchar] (m) COLLATE chinese_prc_ci_as NULL,
[Context_type] [Char] (1) COLLATE chinese_prc_ci_as NULL,
[Manual_type] [Char] (1) COLLATE chinese_prc_ci_as NULL,
[Expert_type] [Char] (1) COLLATE chinese_prc_ci_as NULL,
[Case_type] [Char] (1) COLLATE chinese_prc_ci_as NULL
) on [PRIMARY]
Go

This example uses the Ajax templates in dev2dev.bea.com.cn. The original address is as follows:
Http://dev2dev.bea.com.cn/bbsdoc/20051114125.html
Author: Kozhong
I suggest that everyone take a serious look at the article, it is really good writing.
The following is the page content ybg-menu.htm
<title>menu</title>
<script language= "JavaScript" >
var http_request = false;
var currentpos = false;
function send_request (URL) {//initialization, specifying handler functions, sending requests
Http_request = false;
Start initializing the XMLHttpRequest object
if (window. XMLHttpRequest) {//mozilla browser
Http_request = new XMLHttpRequest ();
if (http_request.overridemimetype) {//Set MIME category
Http_request.overridemimetype ("Text/xml");
}
}
else if (window. ActiveXObject) {//IE browser
try {
Http_request = new ActiveXObject ("Msxml2.xmlhttp");
catch (e) {
try {
Http_request = new ActiveXObject ("Microsoft.XMLHTTP");
catch (e) {}
}
}
if (!http_request) {//exception, failed to create object instance
Window.alert ("Cannot create XMLHttpRequest object instance.");
return false;
}
Http_request.onreadystatechange = ProcessRequest;
Determine how and when the request is sent and whether the next code is executed synchronously
Http_request.open ("Get", url, True);
Http_request.send (NULL);
}
Functions that process return information
function ProcessRequest () {
if (http_request.readystate = = 4) {//Judge object state
if (Http_request.status = = 200) {//information has been successfully returned to start processing information
document.getElementById (currentpos). InnerHTML = Http_request.responsetext;
} else {//page is not normal
Alert ("The page you are requesting has an exception.) ");
}
}
}

function ShowMenu (obj) {
document.getElementById (obj). ParentNode.style.display = "";
document.getElementById (obj). InnerHTML = "reading data ..."
Currentpos = obj;
Send_request ("playmenu.jsp?parent_id=" +obj);
}

</script>
<body>
<table>
<tr>
<td>
<a href= "Javascript:showmenu (' ROOT ')" >ROOT</a>
<td>
</tr>
<tr>
&LT;TD id= ' ROOT ' ></td>
</tr>
</table>
</body>


The following is the JSP content playmenu.jsp

<%@ page contenttype= "TEXT/HTML;CHARSET=GBK"%>
<% @page import= "Com.jfcgf.frame.util.DbUtil"%>
<%@ page import= "java.sql.*"%>

<%
Dbutil db = new Dbutil ();
String parent_id = Request.getparameter ("parent_id");
String sql = "Select Mn_id,mn_name from tsys_menu where parent_mn_id = '" +parent_id+ "";
Execute the above SQL
try{
ResultSet rs = db.executequery (SQL);
while (Rs.next ()) {
String item = "<table><tr valign=/" top/"><td>----></td><td><a href=/" javascript : ShowMenu (/' "+rs.getstring (" mn_id ") +" ')/">" +
Rs.getstring ("mn_name") + "</a></td><td id= '" +rs.getstring ("mn_id") + "' ></td></tr> <br/></table> ";
OUT.PRINTLN (item);
}
}catch (Exception e) {
Out.println (E.tostring ());
}finally{
if (db!= null) {
Db.closeconnection (); db = null;
}
}

%>
Note: The Dbutil class is a javabean that connects to the database, and if you want to try the above code, you need to change it to your own class.
The attachment is a screenshot of the implementation run.
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.