uchome 二次开发 AJAX解析

最新推荐文章于 2026-06-16 09:20:31 发布

转载最新推荐文章于 2026-06-16 09:20:31 发布 · 817 阅读

标签

#ajax #action #浏览器 #iframe #timer

PHP 专栏收录该内容

59 篇文章

订阅专栏

本文解析了 UCHome 中 AJAX 技术的应用，重点介绍了 ajaxpost() 和 ajaxmenu() 函数的工作原理及其实现过程。包括评论提交的局部刷新效果、AJAX 弹出层的参数设置等内容。

uchome 用的最多的两个函数 ajaxpost() 和 ajaxmenu() ;

1. uchome ajax（局部刷新）评论部分效果分析：

实现： 1> 评论条数由原来的 n 条变成了 n+1 条

2> 评论内容从数据库中调取数据显示出来

3> 评论提交成功提示语“进行的操作完成了”。也可能是“两次操作太快，请等‘设定时间’后再试”。

注：用innerHTML来展示的还有右上角的红色loading… 这个只是AJAX进行处理时会显示数据返回后就会隐藏~

2. Ajaxpost代码执行过程分析

首先，看一下提交数据触发点~

模板文件template/default/space_blog_view.htm评论表单代码里的

点击“评论”的时候调用 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)；