Ajax菜单外部载入演示例子
演示地址：http://www.papozhe.com/myfile/2007-11/ajaxmenu/ajaxmenu.htm
AjaxMenu.htm
以下为代码部分:
<HTML>
<HEAD>
<title>menu</title>
<script language="javascript">
var req = null;
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
var node;
function OnClickCate(What,CateID)
{
if(What == null) return
node = document.getElementById("RssCate" + CateID)
node = node.nextSibling
while(node && node.tagName && node.tagName != "DIV")
{
node = node.nextSibling
}
if(node == null) return
var initDisplay = node.style.display;
var RssDIV = document.getElementsByTagName("DIV");
if(RssDIV != null)
{
for(var i = 0;i<RssDIV.length;i++)
{
if(RssDIV[i].className == "RssDIV")
RssDIV[i].style.display = "none";
}
}
if(document.getElementById("RssCate" + CateID).getAttribute("status") != "ok")
{
if(req)
{
var str = null;
node.innerHTML = "正在装载数据……";
node.style.display="block";
surl ='menulist.asp?id='+CateID+'&cDate='+ new Date().getTime();
req.open('GET', surl, true);
req.onreadystatechange = alerttest;
req.send(null);
}
document.getElementById('RssCate'+CateID).setAttribute('status','ok');
}
else
{
node.style.display=(initDisplay == "block"?"none":"block");
}
//node = null;
}
function alerttest()
{
if (req.readyState == 4)
{
if (req.status == 200)
{
node.innerHTML = req.responseText;
}
}
}
</script>
<style type="text/css">
.CateDIV { background-color:#ddeeFF;height:22px;width:300px;font-size:9pt;color:#000000;padding:2px;text-align:left;cursor:pointer;padding-top:3px; border:1px #FFFFFF solid; border-right:1px #808080 solid; border-bottom:1px #808080 solid;}
.RssDIV {background-color:transparent;font-size:9pt;padding:2px;display:none}
A {font-size:9pt;text-decoration:none;color:#000099}
A:visited {color:red}
A:active{color:red}
A:hover {color:#0000FF}
</style>
</HEAD>
<body style="margin:0;padding:0;border:0;overflow:auto" bgcolor="#FFFFFF">
<div class='CateDIV' id='RssCate1' onclick='OnClickCate(this,1)'>Microsoft .NET 技术站点</div>
<div class='RssDIV'></div>
<div class='CateDIV' id='RssCate2' onclick='OnClickCate(this,2)'>ASP.NET 技术站点</div>
<div class='RssDIV'></div>
<div class='CateDIV' id='RssCate3' onclick='OnClickCate(this,3)'>Visual C# 技术站点</div>
<div class='RssDIV'></div>
<div class='CateDIV' id='RssCate4' onclick='OnClickCate(this,4)'>Visual Basic.NET 技术站点</div>
<div class='RssDIV'></div>
</body>
</HTML>
MenuList.asp
以下为代码部分:
<%
Dim i,id
id = left(Request.querystring("id"),5)
'这里Man为了效果更佳逼真点 来了个大循环
'菜单从数据库调用或者调用XML 同样道理可以出来
'到最后Response.Write出来就成
FOR i = 1 to 500000
IF i MOD 50000 = 0 Then
Response.Write "加载菜单" & i & Cint(id) & "<BR>"
End IF
Next
%>
注意：MenuList.asp必须保存为UTF8格式，否则如返回的数据中有中文，就有可能产生乱码
相关文章：
AJAX中文问题分为两大类：
1）发送路径中的参数有中文，在服务器段接收参数值是乱码
例如：
var url="a.jsp?name=小李"；
xmlHTTP.open ("post",url,true);
解决办法：
利用javascript的提供的escape()或encodeURI()方法
例如：
客户端：
var url="a.jsp?name=小李"；
url=encodeURI(url);
url=encodeURI(url); //两次，很关键[具体为什么，我也不清楚]
/**//********************************************/
也有人写成var url="a.jsp?name=escape("小李")"；
功能和encodeURI方法类似。
/**//********************************************/
xmlHTTP.setrequestheader("cache-control","no-cache");
xmlHTTP.setrequestheader("Content-Type","application/x-www-form-urlencoded");
xmlHTTP.setrequestheader("contentType","text/html;charset=uft-8")//指定发送数据的编码格式
xmlHTTP.open ("post",url,true);
服务器端：
String name = request.getParameter("name");
name = java.net.URLDecoder.decode("name", "UTF-8");
2）返回来的responseText或responseXML的值中含有中文是乱码
原因：AJAX在接收responseText或responseXML的值的时候是按照UTF-8的格式来解码的，如果服务器段发送的数据不是UTF-8的格式，那么接收responseText或responseXML的值有可能为乱码。
解决办法：在服务器指定发送数据的格式：
在jsp文件中：
response.setContentType("text/text;charset=UTF-8");//返回的是txt文本文件
或是
response.setContentType("text/xml;charset=UTF-8");//返回的xml文件
总结:
1)ajax提交数据的格式默认为utf-8,利用javascript的提供的escape()或encodeURI()方法.在服务器端接收的时候要使用java.net.URLDecoder.decode("","UTF-8")方法进行解码.
2)xtmlhttp 返回的数据默认的字符编码是utf-8,所以服务器要向客户端发送数据的时候,也要采用utf-8编码.如果上述方法仍然解决不了乱码问题,那你尝试一下把jsp,htm,java文件用UTF-8编码格式保存.
总之:前后台数据交互都采用utf-8编码就行了.
i0561搜索