uchome 用的最多的两个函数 ajaxpost() 和 ajaxmenu() ;
1. uchome ajax(局部刷新)评论部分效果分析:
实现: 1> 评论条数 由原来的 n 条 变成了 n+1 条
2> 评论内容 从数据库中调取数据显示出来
3> 评论提交成功 提示语“进行的操作完成了”。也可能是“两次操作太快,请等‘设定时间’后再试”。
注:用innerHTML来展示的还有右上角的红色loading… 这个只是AJAX进行处理时会显示数据返回后就会隐藏~
2. Ajaxpost代码执行过程分析
首先,看一下提交数据 触发点~
模板文件template/default/space_blog_view.htm评论表单代码里的
<input type="button" id="commentsubmit_btn" name="commentsubmit_btn" class="submit" value="评论" οnclick="ajaxpost('quickcommentform_{$id}', 'comment_status', 'comment_add')" /><span id="comment_status"></span>
点击“评论”的时候调用 ajaxpost() 函数 此函数在:/source/script_ajax.js 文件中
函数内容如下:
Ajaxpost()解读:
在这里函数传了三个参数:表单ID “quickcommentform_{$id}” 、 提示语显示位置ID“comment_status” 这里指的是上面的“<span id="comment_status"></span>” 部分 、 函数名 comment_add
1)、showloading(); 显示上面说的“右上角的红色loading…”; 这个loading.... 显示的位置为什么在右上角呢?大家都知道 header.htm 文件中有两个空层,其中 </div><div id="ajaxwaitid"></div> 就是用来显示这个loading....的
2)、ajaxframe.style.display = ‘none’;
$(’append_parent’).appendChild(ajaxframe);创建一个名字为 ajaxframe的iframe标签之后让它隐藏起来以便于进行幕后操作,让ajaxframe作append_parent节点,上面说了header.htm中有两个空层,其中一个是为了显示loading...那么另一个(<div id="append_parent"></div>)它就是为子结点ajaxframe而存在的。
3)、$(formid).target = ajaxframeid;
$(formid).action = $(formid).action + '&inajax=1'; 这里是关键,为隐藏的ajaxframe 设置表单的 target 属性,是表单在提交之后,页面不发生变化。接着是修改表单的action属性值,在后面加个参数inajax,让处理表单的action知道这个是使用ajax技术的,要特殊处理。设置 target 和 action 为不同值,可以说此流程的核心。
4)、ajaxpostHandle = [showid, ajaxframeid, formid, $(formid).target, func];
设置句柄为下面的 回调函数 ajaxpost_load 提供参数(showid 显示位置,ajaxframeid结点ID, 表单ID , 表单target属性, 回调函数名)
5)、ajaxframe.detachEvent ('onload', ajaxpost_load);
ajaxframe.attachEvent('onload', ajaxpost_load); 为隐藏的ajaxframe设置监听,此两行是用于ie系统的浏览器,else下面的那两行是用于其他的浏览器。
6)、 准备工作完成,最后该提交表单了– $(formid).submit();
7)、现在看一下action 的值从原来的“cp.php?ac=comment”实际已经被修改为“cp.php?ac=comment&inajax=1”
8)、ok 提交 action开始到程序处理页面 cp_comment.php 下面是几个关机部分:
a、入库:$cid = inserttable(’comment’, $setarr, 1);
b、处理完成 提示语 //$msg = ‘do_success’; $msg = "进行的操作完成了";
showmessage($msg, $_POST['refer'], 0, $magvalues);
至此表单的action处理完了,也就是说数据保存工作已经完成了。下面主要把数据调出来显示了。程序跑到了
9)、 数据回调ajaxframe.attachEvent(’onload’, ajaxpost_load);这是一个监听。实际上当action结束后,这个监听就捕获到onload动作了,紧接着调用 ajaxpost_load函数
Ajaxpost_load() 解读:
1>. showloading('none'); 隐藏右上角 loading... 信息
2>.
把ajaxframe的内容读出来赋值给s,用于提示。此时s的内容是“进行的操作完成了”
if(is_ie) {
var s = $(ajaxpostHandle[1]).contentWindow.document.XMLDocument.text;
相当于
var s = $(ajaxframe).contentWindow.document.XMLDocument.text;
} else {
var s = $(ajaxpostHandle[1]).contentWindow.document.documentElement.firstChild.nodeValue;
相当于
var s = $(ajaxframe).contentWindow.document.documentElement.firstChild.nodeValue;
}
3> . 调用函数 comment_add
if(ajaxpostHandle[4]) {
setTimeout(ajaxpostHandle[4] + '(\'' + ajaxpostHandle[0] + '\',' + ajaxpostresult + ')', 10);
}
相当于
if(comment_add) {
setTimeout(comment_add + '(\'' + showid + '\',' + ajaxpostresult + ')', 10);
}
4> 输出提示语 并在一秒后自动关闭
if(!evaled && (typeof ajaxerror == 'undefined' || !ajaxerror)) {
ajaxinnerhtml($(ajaxpostHandle[0]), '<div class="popupmenu_inner">' + s + '</div>');
if(!evaled)evalscript(s);
setMenuPosition($(ajaxpostHandle[0]).ctrlid, 0);
jsmenu['timer'][$(ajaxpostHandle[0]).ctrlid] = setTimeout("hideMenu()", 1000);
}
5> 恢复初始化值
ajaxerror = null;
if($(ajaxpostHandle[2])) {
$(ajaxpostHandle[2]).target = ajaxpostHandle[3];
}
ajaxpostHandle = 0;
至此点击评论按钮,到提示语已经处理完成接下来是数据调取:
当action 程序处理完成后 ajax回调时调用 comment_add 函数 这个函数在 /source/script_manage.js 文件中 执行x.get 方法! 在此不做详细说明;
3. Ajajx弹出层 ajaxmen()参数解析:
ajaxmenu(e, ctrlid, timeout, func, offset)
e: 就写event就可以了,这个是event事件
ctrlid:就是点击那个要弹出ajaxmenu框的id,这个id一定要指定
func:应该是一个回调函数啦,偶还没有使用过。
timeout:多少毫秒后关闭,官方默认都写的99999
offset: 这个参数有四种情况,默认值为:0
offset= -1 :弹出框会出现在屏幕中央位置
offset=1 :弹出框的右上角在鼠标点击位置附近,但垂直位置始终保持在鼠标的下方
offset=2 :弹出框的右上角在鼠标点击位置附近,但垂直位置始终保持在鼠标的上方
offset=其它值:弹出框的右上角在鼠标点击位置附近,但垂直位置会根据滚动条位置判断,如果弹出框非常大,
有上面一半以上被隐藏的话会自动调整为offset=1的效果,有下面一半以上被隐藏的话会自动调整为offset=2的效果.
设置弹出框位置的函数就是:(source/script_menu.js)
function setMenuPosition(showid, offset);