uchome2.0的ajax技术流程研究心得

大佬教程收集整理的这篇文章主要介绍了uchome2.0的ajax技术流程研究心得，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

概述

前言：基于uchomer的插件如果没有使用ajax或flex，可以说无论如何也做不到完美的。而相比于flex，ajax使用的较多。好多插件开发者在研究 uchome的ajax的使用过程中花费了不少时间，此文意在减少插件开发者的研究时间。flex相关插件的说明，敬请关注！此文整理花了本同学4个小时以上的时间，如果版主觉得对大家有帮助，请加精！非常感谢：） 我们举日志回复为例：一、局部刷新的部分（先看看现象）图一： 1、评论条数由原来的a修改为a+1;2、评论内容。从数据库里读取显示于此；3、提示语，这里的“搞好了”，是我修改之后的，原来好像是“你执行的操作已成功”。当然里的内容也可能是“你发帖的时间太短了，请等等59秒后再发”之类的。注意，用innerHTML来展示的还有右上角的红色loading…，不过因为出现的时间太短，不方便截图，而且大家也很容易理解，在此不多解释。二、好了，看完现象之后，我们要从代码来研究执行过程了1、模板文件template/default/space_blog_view.htm评论表单代码里的 onclick=”ajaxpost(’quickcommentform_{$iD}’, ‘comment_add’)” />     点击“评论”的时候要调用的java script函数ajaxpost(),ajaxpost函数在哪里呢？在2、source/script_ajax.js的267行代码 1@R_458_3816@ ajaxpost(formid, func, timeout) {  2 showloading();  3  4 if(ajaxpostHandle != 0) {  5 return false;  6 }  7 var ajaxframEID = ‘ajaxframe’;  8 var ajaxframe = $(ajaxframEID);  9 if(ajaxframe == null) { 10 if (is_ie && !is_opera) { 11 ajaxframe = document.createElement(”<iframe NAME=’” + ajaxframEID + “‘ id=’” + ajaxframEID + “‘></iframe>”); 12 } else { 13 ajaxframe = document.createElement(”iframe”); 14 ajaxframe.name = ajaxframEID; 15 ajaxframe.id = ajaxframEID; 16 } 17 ajaxframe.style.display = ‘none’; 18 $(’append_parent’).appendChild(ajaxframE); 19 } 20 21 //产生异步的十字路口 22 $(formid).target = ajaxframEID; 23 $(formid).action = $(formid).action + ‘&inajax=1′; 24 25 ajaxpostHandle = [formid, func, timeout]; 26 27 if(ajaxframe.attachEvent) { 28 ajaxframe.detachEvent (’onload’, ajaxpost_load); 29 ajaxframe.attachEvent(’onload’, ajaxpost_load); 30 } else { 31 document.removeEventListener(’load’, ajaxpost_load, truE); 32 ajaxframe.addEventListener(’load’, ajaxpost_load, falsE); 33 } 34 $(formid).submit(); 35 return false; 36 }  代码解读：在这里，此函数只接到两个参数表单名quickcommentform_{$iD}和函数名comment_adda、showloading();显示上面说的“右上角的红色loading…”；b、ajaxframe.style.display = ‘none’;$(’append_parent’).appendChild(ajaxframE);创建一个名字ajaxframe的iframe标签之后让它隐藏起来以避免跟观众见面（一会我们会了解到，此iframe为默默无闻的幕后黑手），让ajaxframe作append_parent节点，有些同学可能一直纳闷为何header.htm总有一个<div id=”append_parent”></div>空层，在这里我们终于知道它是为儿子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评论表单代码里的: action=”cp.php?ac=comment”   实际上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'], 0, $magvalues);把结果“搞好了” echo出来。具体看看showmessage函数的代码：5、source/function_common.php第221行  代码 1 //对话框 2  3@R_458_3816@ showmessage($msgkey, $url_forWARD=”, $second=1, $values=array()) { 4  5 global $_SGLOBAL, $_SC, $_SCONFIG, $_TPL, $space, $_SN; 6  7  8  9 obclean();10 11 12 13 //去掉广告14 15 $_SGLOBAL['ad'] = array();16 17 18 19 //语言20 21 include_once(S_ROOT.’./language/lang_showmessage.php’);22 23 if(isset($_SGLOBAL['msglang'][$msgkey])) {24 25 $message = lang_replace($_SGLOBAL['msglang'][$msgkey], $values);26 27 } else {28 29 $message = $msgkey;30 31 }32 33 //手机34 35 if($_SGLOBAL['mobile']) {36 37 include template(’showmessage’);38 39 exit();40 41 }42 43 //显示44 45 if(empty($_SGLOBAL['inajax']) && $url_forWARD && empty($second)) {46 47 header(”http/1.1 301 Moved PeRMANently”);48 49 header(”LOCATIOn: $url_forWARD”);50 51 } else {52 53 if($_SGLOBAL['inajax']) {54 55 if($url_forWARD) {56 57 $message = “<a href=”$url_forWARD”>$message</a><ajaxok>”;58 59 }60 61 //$message = “<h1>”.$_SGLOBAL['msglang']['box_title'].”</h1><a href=”java script:;” onclick=”hideMenu();” class=”float_del”>X</a><div class=”popupmenu_inner”>$message</div>”;62 63 echo $message;64 65 ob_out(); //输入message内容以备获取66 67 } else {68 69 if($url_forWARD) {70 71 $message = “<a href=”$url_forWARD”>$message</a><script>setTimeout(”window.LOCATIOn.href =’$url_forWARD’;”, “.($second*1000).”);</script>”;72 73 }74 75 include template(’showmessage’);76 77 }78 79 }80 81 exit();82 83 } 84   这个函数比较重要，解读一下吧。a、obclean();把缓存里的echo出来的数据清空，具体原理百度一下吧。b、$message = “<a href=”$url_forWARD”>$message</a><ajaxok>”;这一行定义好要echo的内容了c、echo $message;echo出来d、ob_out(); //输入message内容以备获取 紧接echo,捕获上面echo的内容，然后编辑之。具体看ob_out函数代码6、source/function_common.php第936行代码 1 //调整输出 2@R_458_3816@ ob_out() { 3 global $_SGLOBAL, $_SCONFIG, $_Sc; 4  5 [color=Blue]$content = ob_get_contents();[/color] 6  7 $preg_searchs = $preg_replaces = $str_searchs = $str_re @H_197_6@