基于 Ajax 的无限级菜单
支持Form的无闪提交（方法有点笨）
支持ＭＶＣ框架，即支持传统网页架构
多线程并发请求（要语言支持线程）
动态加载文件，只加载有用的！处理了Ajax框架臃肿的JS文件问题。
采用no table的全div + css布局
a. 获得XMLHTTPRequest对象，网上到处都找得到了，不多说：
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;
}
这里提供一个通用的支持多浏览器的方法。
b.提出异步请求
//这里用Bcandy作为方法名是为了感谢一个对我来说很重要的人，她一直在支持我
function Bcandy(Tid,url,parm,js) {
if(url == ""){
return;
}
//这是一个加载信息提示框，也可以不要！
document.getElementById("load").style.visibility = "visible";
//加载相应页面的JS文件
if(js != null){
//加载ＪＳ文件
LoadJS(js);
}
// 获取一个XMLHttpRequest实例
var req = newXMLHttpRequest();
// 设置用来从请求对象接收回调通知的句柄函数
var handlerFunction = getReadyStateHandler(req,Tid);
req.onreadystatechange = handlerFunction;
// 第三个参数表示请求是异步的
req.open("POST", url, true);
// 指示请求体包含form数据
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 发送参数
req.send(parm);
}
function getReadyStateHandler(req,Tid) {
// 返回一个监听XMLHttpRequest实例的匿名函数
return function () {
// 如果请求的状态是“完成”
if (req.readyState == 4) {
// 成功接收了服务器响应
if (req.status == 200) {
//下面一句是重点，这里显示了返回信息的内容部分，也可以加以修改。进行其它处理
document.getElementById(Tid).innerHTML = req.responseText;
document.getElementById(Tid).style.visibility = "visible";
//这一句是实现加载信息提示框的隐藏，也可以不要。
document.getElementById("load").style.visibility = "hidden";
} else {
// 有HTTP问题发生
document.getElementById("load").style.visibility = "hidden";
alert("HTTP error: "+req.status);
}
}
}
}
//动态加载ＪＳ文件
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);
}
这就是基本的框架了，因为使用了request.responseText;所以，可以直接请求一个页面jsp,servlet但在使用Struts框架的请求时要进行特殊处理，因为Form不支持异步请求。建议在这些页面上不要加入<html><body>标签，就像.net里的asxm文件！而且在使用Struts框架时有点要注意的是，Mapping对象直接返回null就可以了，因为我们会在下面讲到并发多线程。来处理这个问题的。
总的来看，有点像是积木搭建起来的。这样方便文件的修改和扩展，互相之间并不影响，而且，实现了代码和标签分离。在进行传统页面改版时，也不用重新编写全部代码。只要修改一小部分就可以完美实现Ajax带来的无闪刷新快感。
以上代码均在ＩＥ，ＦｉｒｅＦｏｘ下测试过！
相关推荐
-
基于 Ajax 的无限级菜单
支持Form的无闪提交(方法有点笨)支持MVC框架,即支持传统网页架构多线程并发请求(要语言支持线程)动态加载文件,只加载有用的!处理了Ajax框架臃肿的JS文件问题.采用no table的全div + css布局 a. 获得XMLHTTPRequest对象,网上到处都找得到了,不多说: function newXMLHttpRequest() {var xmlreq = false;if (window.XMLHttpRequest) {xmlreq = new XMLHttpRequest(
-
thinkPHP基于ajax实现的菜单与分页示例
本文实例讲述了thinkPHP基于ajax实现菜单与分页的方法.分享给大家供大家参考,具体如下: 一个分类菜单,使用ajax实现: function getid(id){ $.ajax({ url: "{:U('/Index/example')}", type: "POST", data: {id:id} }).success(function(data) { $("#centent").html(data); }); } 并使用ajax分页,这
-
基于Ajax+div的“左边菜单、右边内容”页面效果实现
效果演示: ①默认页面(index.jsp): ②:点击左侧 用户管理 标签下的 用户列表 选项后,右边默认页面内容更新为用户列表页(userList.jsp)的内容 : ③:同理,点击 产品管理.订单管理 标签下的 产品列表.订单列表 时,右侧内容会相应的刷新为产品列表页(productList.jsp).订单列表页(recordList.jsp)的内容 这样就使用Ajax+div实现了左边菜单选择,右边内容显示的效果,下面就来看看具体的实现过程吧 一: 整个演示用的示例程序包含默认页面(in
-
基于jquery实现无限级树形菜单
本文实例为大家分享了基于jquery实现无限级树形菜单效果,具有一定的参考价值,具体内容如下 效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无限级树形菜单</title> </head> <script src="jque
-
一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载)
一个强健 实用的ajax二级联动菜单(有演示和附源程序打包下载) 前些天在搞后台的时候要用到二级联动的菜单,到网上去找了半天也没找到满意的,不是这错就是那错,在选择的时候有时候不能返回.真是郁闷. 后来就看到有人用ajax写了无限级分类(牛,呵呵,本人看不懂.).就想到我那个后台不也可以用ajax试试,虽然比用javascript的慢点,但我这个实用.强健..不会出错,也不会选择某个大类后再返回无选择状态小类为空的状态.呵呵.文件目录:如图 主要代码如下:index.asp 复制代码 代
-
tp5框架基于Ajax实现列表无刷新排序功能示例
本文实例讲述了tp5框架基于Ajax实现列表无刷新排序功能.分享给大家供大家参考,具体如下: 在后台管理的时候我们有时需要对数据进行排序,以控制数据在模板显示的顺序,排序的原理就是修改数据库,然后更新视图.我们可以单独写一个方法来实现排序的功能,成功后刷新页面,也可以利用Ajax技术,实现数据的局部请求,也就是无刷新排序的功能. 现在想要达到的效果是在排序的input框中输入数值,点击排序实现无刷新排序的功能. 首先是表格(cate.html)这一块我们要单独摘出来,放入到一个单独页面当中,方便
-
Vue3.0实现无限级菜单
业务需求 菜单项是业务系统的重要组成部分,一般业务系统都要支持显示多级业务菜单,但是根据每个业务人员的权责不同,看到的的菜单项也是不同的. 这就要求页面可以支持无限极菜单显示,根据每个用户的权限不同,后台服务返回对应的菜单项. 本文基于Vue 3.0实现了一个可配置的无限等级菜单,关键代码如下: 后端返回的菜单项数据结构 后端服务一般不会直接返回一个树型结构菜单集合给前端,这样做也不合理.前端应该根据自己的具体需求,构建自己的菜型单树.后端返回的数据结构一般包含以下一个字段: Id 菜单ID,
-
基于ajax实现无刷新分页的方法
本文实例讲述了基于ajax实现无刷新分页的方法.分享给大家供大家参考.具体如下: 在普通的分页中,一旦页码改变,则url改变,整个页面都会刷新,如果我们希望页码的改变不影响整个网页的变动,可以使用ajax技术. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 通过客户端html代码,用ajax把服务器中的数据通过get方式传递过来,显示在html中. <!doct
-
Javascript基于AJAX回调函数传递参数实例分析
本文实例讲述了Javascript基于AJAX回调函数传递参数的方法.分享给大家供大家参考,具体如下: 前面介绍了<javascript实现html页面之间参数传递的四种方法>,这里针对ajax参数传递做一分析. 在Javascript 中,特别是在AJAX中,回调函数常常是一个函数名,没有地方放入参数,如下面的AJAX代码,在成功后将调用回调函数callback,但callback是有参数的,如何把参数传进来呢? var callback = function(p1){ //do somet
-
jQuery基于$.ajax设置移动端click超时处理方法
本文实例讲述了jQuery基于$.ajax设置移动端click超时处理方法.分享给大家供大家参考,具体如下: 这里介绍jquery click事件如何在移动端自动转换成touchstart事件. 因为移动端click事件会比touchstart事件慢几拍 移动设备某个元素上事件执行顺序是: touchstart touchmove touchend click{mousedown->mousemove->mouseup} click事件在移动设备上虽然会识别但却是最后一个执行的,所以如果不把c