前言：基于uchomer的插件如果没有使用ajax或flex，可以说无论如何也做不到完美的。而相比于flex，ajax使用的较多。好多插件开发者在研究 uchome的ajax的使用过程中花费了不少时间，此文意在减少插件开发者的研究时间。flex相关插件的说明，敬请关注！此文整理花了本同学4个小时以上的时间，如果版主觉得对大家有帮助，请加精！非常感谢：）

我们举日志回复为例：一、局部刷新的部分（先看看现象）图一：

注意，用innerHTML来展示的还有右上角的红色loading…，不过因为出现的时间太短，不方便截图，而且大家也很容易理解，在此不多解释。

二、好了，看完现象之后，我们要从代码来研究执行过程了1、模板文件template/default/space_blog_view.htm评论表单代码里的

<div class="cnblogs_code">

??? 点击“评论”的时候要调用的java script函数ajaxpost(),ajaxpost函数在哪里呢？在

2、source/script_ajax.js的267行

1. ?function?ajaxpost(formid,?func,?timeout)?{????4?0)?{??false;???=?‘ajaxframe’;??=?$(ajaxframeid);??null)?{??!is_opera)?{??<iframe>”);?12?else?{??=?document.createElement(”iframe”);??=?ajaxframeid;??=?ajaxframeid;???=?‘none’;????21?产生异步的十字路口?22?=?ajaxframeid;??1′;??25?=?[formid,?timeout];??27?if(ajaxframe.attachEvent)?{????else?{??true);??false);????false;??

2. 代码解读：在这里，此函数只接到两个参数表单名quickcommentform_{$id}和函数名comment_adda、showloading();显示上面说的“右上角的红色loading…”；b、ajaxframe.style.display = ‘none’;$(’append_parent’).appendChild(ajaxframe);创建一个名字ajaxframe的iframe标签之后让它隐藏起来以避免跟观众见面（一会我们会了解到，此iframe为默默无闻的幕后黑手），让ajaxframe作append_parent节点，有些同学可能一直纳闷为何header.htm总有一个

   空层，在这里我们终于知道它是为儿子ajaxframe而存在的。c、$(formid).target = ajaxframeid;$(formid).action = $(formid).action + ‘&inajax=1′;这个很关键哦。设置表单的target属性为隐藏的ajaxframe可以说是此流程的核心。它使表单提交之后，页面不动弹。接着是修改表单的action属性值，在后面加个参数inajax，让处理表单的action知道这个是使用ajax技术的，要特殊照顾。设置target和action为不同值，可以说是使用表单产生异步的关键点。d、ajaxpostHandle = [formid,func,timeout];设置句柄，为下面调用ajaxpost_load函数准备两个参数formid和func；e、ajaxframe.detachEvent (’onload’,ajaxpost_load);ajaxframe.attachEvent(’onload’,ajaxpost_load);为隐藏的ajaxframe设置监听，此两行是用于ie系统的浏览器，else下面的那两行是用于其他的浏览器。f、好了，以上工作都做好，然后怎么办？提交表单呗–$(formid).submit()。我们看看表单的action代码：3、模板文件template/default/space_blog_view.htm评论表单代码里的:

   <div class="cnblogs_code">

   实际上action的值已经被修改为cp.php?ac=comment&inajax=1了，重申，此表单的target的值已为ajaxframe，用于监听。4、action开始处理了，程序代码为cp_comment.php。下面拿几个重要的函数来说说。a.??????? //入库$cid = inserttable(’comment’,$setarr,1);第335行。顾名思义，把数据保存到数据库里啦；b、??????????????????????? //提示语//$msg = ‘do_success’;$msg = ‘搞好了’;第373行。还记得刚才的“搞好了”三个字从哪里来吗？就在这里定义的。c、每468行。showmessage($msg,$_POST['refer'],$magvalues);把结果“搞好了” echo出来。具体看看showmessage函数的代码：5、source/function_common.php第221行

   <div class="cnblogs_code" onclick="cnblogs_code_show('719f1c18-eb1f-4d4f-b174-f4750bdc5854')">
   <img class="code_img_closed" id="code_img_closed_719f1c18-eb1f-4d4f-b174-f4750bdc5854" style="display: none" src="https://www.52php.cn/res/2019/02-07/12/1c53668bcee393edac0d7b3b3daff1ae.gif" alt=""><img class="code_img_opened" id="code_img_opened_719f1c18-eb1f-4d4f-b174-f4750bdc5854" onclick="cnblogs_code_hide('719f1c18-eb1f-4d4f-b174-f4750bdc5854',event)" src="https://www.52php.cn/res/2019/02-07/12/405b18b4b6584ae338e0f6ecaf736533.gif"&gt;<span class="cnblogs_code_collapse">代码
   <div id="cnblogs_code_open_719f1c18-eb1f-4d4f-b174-f4750bdc5854">

   ?对话框?2??3?array())?{??5?$_SN;??7??8??9??11?12?13?去掉广告14?15?array();?17?18?19?语言20?21?.php’);?23?$msgkey]))?{?25?$values);?27?else?{?29?$msgkey;?31??33?手机34?35?'])?{?37?include?template(’showmessage’);?39?exit();?41??43?显示44?45?$second))?{?47?301?Moved?Permanently”);?49?$url_forward”);?51?else?{?53?'])?{?55?$url_forward)?{?57?<>”;?59??61?$message?=?“

   ”.$_SGLOBAL['msglang']['box_title'].”

   X$message
   ”;62?63?$message;?65?输入message内容以备获取66?67?else?{?69?$url_forward)?{?71?<>”;?73??75?include?template(’showmessage’);?77??79??81?exit();?83??

   这个函数比较重要，解读一下吧。a、obclean();把缓存里的echo出来的数据清空，具体原理百度一下吧。b、$message = “$message”;这一行定义好要echo的内容了c、echo $message;echo出来d、ob_out(); //输入message内容以备获取 紧接echo,捕获上面echo的内容，然后编辑之。具体看ob_out函数代码6、source/function_common.php第936行

   ?调整输出?2?function?ob_out()?{?$_SC;??5?/color]??7?array();??9?'])?{?/ie”;?/i”;?/ie”;?/i”;?15?2’)’;?.html”‘;?1’)’;?.html”‘;??'])?{?/ie”;?1’)’;??25?'])?{?+/”;?=?‘?‘;?29?>’;?&gt;’;??33?$preg_searchs)?{?$content);??$str_searchs)?{?$content));??40?'])?{?else{?'])?{?']);??$content;?if(D_BUG)?{?.php’);???

1. 代码解读a、$content = ob_get_contents();从内存里读取到刚才echo的”$message”;b、xml_out($content);具体代码如下：

   <div class="cnblogs_code" onclick="cnblogs_code_show('510d5782-fab9-45a1-8ca8-1ad673e2b07a')">
   <img class="code_img_closed" id="code_img_closed_510d5782-fab9-45a1-8ca8-1ad673e2b07a" style="display: none" src="https://www.52php.cn/res/2019/02-07/12/1c53668bcee393edac0d7b3b3daff1ae.gif" alt=""><img class="code_img_opened" id="code_img_opened_510d5782-fab9-45a1-8ca8-1ad673e2b07a" onclick="cnblogs_code_hide('510d5782-fab9-45a1-8ca8-1ad673e2b07a',event)" src="https://www.52php.cn/res/2019/02-07/12/405b18b4b6584ae338e0f6ecaf736533.gif"&gt;<span class="cnblogs_code_collapse">代码
   <div id="cnblogs_code_open_510d5782-fab9-45a1-8ca8-1ad673e2b07a">

   ?$content)?{??$_SC;??1″);??FALSE);??-cache”);??$_SC[charset]“);???>n”;??>”;??exit();???

   代码很简单，就是最终编辑内容为标准的xml格式，然后echo出来。实际内容应该是这样的：

   <div class="cnblogs_code">

   ?>?-?>?-?]]>?

   如下图：

   

   7、script_ajax.js的295行：ajaxframe.attachEvent(’onload’,ajaxpost_load);这是一个监听。实际上当action结束后，这个监听就捕获到onload动作了，紧接着应该运行 ajaxpost_load函数，当然，此时同时把ajaxframe填充好了，填充内容和调用ajaxpost_load函数，哪个在先哪个在后呢？这个问题留给高手回答吧。下面看看ajaxpost_load函数

   8、script_ajax.js304行：为了直观，我直接在代码里做代码解读了–红色注释部分

   <div class="cnblogs_code" onclick="cnblogs_code_show('8689351b-5be3-46d5-bcbb-eb1264e39308')">
   <img class="code_img_closed" id="code_img_closed_8689351b-5be3-46d5-bcbb-eb1264e39308" style="display: none" src="https://www.52php.cn/res/2019/02-07/12/1c53668bcee393edac0d7b3b3daff1ae.gif" alt=""><img class="code_img_opened" id="code_img_opened_8689351b-5be3-46d5-bcbb-eb1264e39308" onclick="cnblogs_code_hide('8689351b-5be3-46d5-bcbb-eb1264e39308',event)" src="https://www.52php.cn/res/2019/02-07/12/405b18b4b6584ae338e0f6ecaf736533.gif"&gt;<span class="cnblogs_code_collapse">代码
   <div id="cnblogs_code_open_8689351b-5be3-46d5-bcbb-eb1264e39308">

   ?function?ajaxpost_load()?{?从刚才的ajaxpostHandle句柄里获取值，实际上获取到了’quickcommentform_{$id}’和’comment_add’两个值，timeout是没有值的?3?0];?1];?2];?定义要显示“搞好了”的div之id，实际上在space_blog_view.htm里有这么一句：
   ?7?你一看便知怎么回事了?8?+?formid;?把页面右上解那个loading…隐藏起来10?showloading(’none’);?if(is_ie)?{?把ajaxframe的内容读出来赋值给s，以备后用。此时s的内容是：13?搞好了14?=?$(’ajaxframe’).contentWindow.document.XMLDocument.text;?else?{?=?$(’ajaxframe’).contentWindow.document.documentElement.firstChild.nodeValue;??为了调试，我在这里alert一下19?+?s);?false;?1)?{??true;??1)?{?1;?else?{?0;??function31?if(func)?{?运行函数和comment_add，设置超时时间为10秒，这里边的formid应该没有什么用。33?这个comment_add函数跳出这个代码段后详说34?formid好像没有什么用35?}?&&?$(formstatus))?{?=?”;?让的内容填充上“搞好了”39?ajaxinnerhtml($(formstatus),?s);???43?层消失44?=?setTimeout(”hideMenu()”,?timeout);?46?=?‘ajaxframe’;?0;??50?

   9、好了，到此为止，“评论”按钮下面的“搞好了”已经显示出来了。下面要显示的是评论内容和评论条数了。程序运行到了source/script_manage.js的41行comment_add函数：

   <div class="cnblogs_code" onclick="cnblogs_code_show('cccefc5e-ed7b-4a2b-a241-1551c92f1fcd')">
   <img class="code_img_closed" id="code_img_closed_cccefc5e-ed7b-4a2b-a241-1551c92f1fcd" style="display: none" src="https://www.52php.cn/res/2019/02-07/12/1c53668bcee393edac0d7b3b3daff1ae.gif" alt=""><img class="code_img_opened" id="code_img_opened_cccefc5e-ed7b-4a2b-a241-1551c92f1fcd" onclick="cnblogs_code_hide('cccefc5e-ed7b-4a2b-a241-1551c92f1fcd',event)" src="https://www.52php.cn/res/2019/02-07/12/405b18b4b6584ae338e0f6ecaf736533.gif"&gt;<span class="cnblogs_code_collapse">代码
   <div id="cnblogs_code_open_cccefc5e-ed7b-4a2b-a241-1551c92f1fcd">

   ?添加评论??2?function?comment_add(id,?result)?{??if(result)?{??=?$(’comment_ul’);??=?document.createElement(”div”);??new?Ajax();??function(s){??+?s);??=?s;???if($(’comment_prepend’)){??=?obj.firstChild;??1){??=?obj.nextSibling;????else?{????if($(’comment_message’))?{??=?”;???if($(’comment_replynum’))?{??=?parseInt($(’comment_replynum’).innerHTML);??1;??+?”;???提示获得积分?29?showreward();????

   代码解读：a.x.get(’do.php?ac=ajax&op=comment’,function(s){alert(”s–0:” + s);newli.innerHTML = s;});ajax初级教程里就有这样的。这个也是ajax的核心理念：悄悄地从后台获取数据，让前台的newli显示出来。这里的数据是从do.php?ac=ajax&op=comment里获取到的。b. 我看查看页面源文件，很快能找到评论 (0 个评论)这样的一段，那么这里的var a = parseInt($(’comment_replynum’).innerHTML);便是为了把0赋值给a,经运算，b=1，再往下怎么回事，同学们自己琢磨了。10、这里看看do.php?ac=ajax&op=comment是怎么把如下内容搞出来的：

   

   <div class="cnblogs_code">

   >>>>?

   注意，这里又调用了一个模板函数template space_comment_li，这个我不深入讲解了。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!