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

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

我们举日志回复为例:一、局部刷新的部分(先看看现象)图一:

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

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

<div class="cnblogs_code">

onclick=”ajaxpost(’quickcommentform_{$id}’, ‘comment_add’)” />

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

2、source/script_ajax.js的267行

  • 代码解读:在这里,此函数只接到两个参数表单名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.jb51.cc/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.jb51.cc/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行

    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.jb51.cc/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.jb51.cc/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.jb51.cc/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.jb51.cc/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.jb51.cc/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.jb51.cc/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,这个我不深入讲解了。

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐


    **本资源可免费获取,请至尾部读阅!**Discuz素材资源交易论坛整站源码,带数据整站源码打包。包含了导航、企业官网、企业建站、企业SEO等静态页面。论坛采用Discuz3.4,包含PC、手机主题。带30多款插件。站长亲测可以使用,不过还是需要稍微调整一下的,部分链接还是原站的绝对地址,不过这
    分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!http://www.captainbed.netDiscuz!是腾讯(Tencent)旗下Comsenz公司推出的以社区为基础的专业建站平台,帮助网站实现一站式服务。让论坛(BBS)、个人空间(SNS)、门户(Portal)
    最近工作需要IIS,自己的电脑又是Windows7系统,找了下安装的方法,已经安装成功。一、首先是安装IIS。打开控制面板,找到“程序与功能”,点进去二、点击左侧“打开或关闭Windows功能”三、找到“Internet信息服务”,按照下图打勾即可等待安装完成四、安装完成后,再回到控制面板
    首先就是discuz,用起来真的是特别的好用,搭建的网站真的非常美观尤其是用起来之后,我发现功能真的是太强大了,不用到处编写代码,调试什么只需要把精力放在做产品上就可以了,我很好奇为什么会这么强大php的开源产品,比如wordpress也很强大,为什么discuz会如此的让我感到,是一种生态社区,而
    1.找到图片路径拼装文件首先打开根目录下的template目录找到首页文件打开后找到图片列表的拼装位置//链接示例:<!--{eval$imagelistkey=getforumimg($pic[aid],0,300,500);}--><imgsrc="$imagelistkey"alt="$thread[subject]"/>然后修改为(客户要求改成缩略图)/
    打开NavicatforMySQL找到数据表 pre_ucenter_members 把密码修改为123456789password:047099adb883dc19616dae0ef2adc5b6salt:311254改完就可以登录了:域名/admin.php记得上线后修改密码哦,嘿嘿嘿,鸡你太美!!!---------------------作者:Liu_Cabbage来源:CSDN原文:https://blog.
    Discuz论坛基础搭建 第一步:下载XAMPP(Apache+Mysql+PHP+RERL)         下载的xampp-linux-x64-5.5.30-7-installer.run         上传到/home目录下,然后在命令行输入./xampp-linux-x64-5.5.30-7-installer.run,如果报权限问题,      
    Discuz!是腾讯旗下Comsenz公司推出的以社区为基础的专业建站平台,帮助网站实现一站式服务。让论坛(BBS)、个人空间(SNS)、门户(Portal)、群组(Group)、应用开放平台(OpenPlatform)充分融合于一体,帮助网站实现一站式服务。Discuz!X3在继承和完善Discuz!X2.5的基础上,针对“系统架构”、
      Discuz迁移是一件较为麻烦的事情网上大多的迁移教程都是利用备份功能进行操作的,其实这种操作并不能保证迁移后完全正常工作本文将介绍直接转移数据库和文件的迁移方法 导出数据库迁移的首要部分就是导出数据库不论你是VPS、独立服务器还是虚拟主机一般都有phpmya
    Discuz!论坛目前最新版本为3.4版本,已经好久没有更新了,我们SINE安全在对其网站安全检测的同时发现一处漏洞,该漏洞可导致论坛的后台文件可以任意的删除,导致网站瘫痪,后台无法登陆。关于该网站漏洞的细节我们来详细的分析看一下:Discuz漏洞的检测与分析该漏洞发生的位置在于source目录
      Discuz!X3.4升级后,帖子内容使用Unicode编码会出现直接显示源码问题打开:source\function\function_core.php  $string=str_replace(array('&','"','<','>'),array('&','"','<',&
    安装discuz直接把安装包拷贝到根目录下然后在浏览器中输入http://localhost/myweb/install/index.php打开安装向导界面,需要修改一下myweb的权限安全属性uploading-image-555335.png把权限打开,然后一直下一步输入数据库的名称和密码adminroot******这步不成功可以看下
    原文链接:http://www.cnblogs.com/bwzhangtao/p/4233362.html1<?php2/**3*抽奖4*@paramint$total5*/6functiongetReward($total=1000)7{8$win1=floor((0.12*$total)/100);9$win2=floor((3*$total)/100)
    title:Linux搭建Discuz论坛WelcometoFofade'sBlog!这里是Linux搭建论坛的一些命令记录命令摘记:下载文件:Discuz安装环境:PHPApache2Mariadb(类MySQL)PHP-XML测试环境:浏览器查看tomcat页面是否正常,并简易编写一个PHP页面测试数据库操作:创建用户$createuser'name
    原文链接:http://www.cnblogs.com/showblog/p/3358038.html取论坛指定版块帖子或回复(first=1就是帖子的1楼,如果=0就是调用回复,fid=62是论坛版块号):SELECT*FROMdiscuzx.pre_forum_postwherefirst=1andfid=62orderbytiddesc 取
    LAMP平台概述目前最为成熟的一种企业网站应用模式,可提供动态Web站点应用及开发环境构成组件Linux、Apache、MySQL、PHP/Perl/PythonLAMP的优势成本低廉可定制、易于开发方便易用,安全和稳定一,在Windows上将LAMP所需压缩软件包共享出来(此处如有问题请看之前的博客相关文章)
    代码functionlang($file,$langvar=null,$vars=array(),$default=null){echo$file.':'; global$_G; $fileinput=$file; list($path,$file)=explode('/',$file); if(!$file){echo('1-'); $file=$path; $path=
    1、首先我们需要登录DZ论坛后台,在全局设置里边,关闭站点,防止网站出现新数据导致备份数据不完整。如图:2、找到站长板块,点击数据库,进行备份。3、按照提示,选择备份类型,点击提交开始进行备份。4、备份完成之后我们可以看到如下图。5、接下来我们需要把整个网站进行压缩打包。6、
    实验目录:一、LAMP架构概念二、LAMP结构的安装与配置2-1手工编译安装http服务2-2手工编译安装mysql数据库2-3手工编译安装PHP工具三、安装Discuz论坛(开源论坛)四、小福利一、LAMP架构概念LAMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写:
      pre_common_admincp_cmenu后台菜单收藏表字段名数据类型默认值允许非空自动递增备注idsmallint(6)unsigned  NO是 titlevarchar(255)  NO  菜单名称urlvarchar(255)  NO  菜单地址sorttinyint(1) 0 NO  菜单类型,备用