uchome2.0的ajax技术流程研究心得跟大家分享

本文详细解析了Uchome平台中利用AJAX实现的日志回复功能,包括其核心流程和技术要点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言:
基于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评论表单代码里的

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

复制代码

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

2、source/script_ajax.js的267行

  1. function ajaxpost(formid, func, timeout) {
  2. showloading();
  3. if(ajaxpostHandle != 0) {
  4. return false;
  5. }
  6. var ajaxframeid = ‘ajaxframe’;
  7. var ajaxframe = $(ajaxframeid);
  8. if(ajaxframe == null) {
  9. if (is_ie && !is_opera) {
  10. ajaxframe = document.createElement(”<iframe name=’” + ajaxframeid + “‘ id=’” + ajaxframeid + “‘></iframe>”);
  11. } else {
  12. ajaxframe = document.createElement(”iframe”);
  13. ajaxframe.name = ajaxframeid;
  14. ajaxframe.id = ajaxframeid;
  15. }
  16. ajaxframe.style.display = ‘none’;
  17. $(’append_parent’).appendChild(ajaxframe);
  18. }
  19. //产生异步的十字路口
  20. $(formid).target = ajaxframeid;
  21. $(formid).action = $(formid).action + ‘&inajax=1′;
  22. ajaxpostHandle = [formid, func, timeout];
  23. if(ajaxframe.attachEvent) {
  24. ajaxframe.detachEvent (’onload’, ajaxpost_load);
  25. ajaxframe.attachEvent(’onload’, ajaxpost_load);
  26. } else {
  27. document.removeEventListener(’load’, ajaxpost_load, true);
  28. ajaxframe.addEventListener(’load’, ajaxpost_load, false);
  29. }
  30. $(formid).submit();
  31. return false;
  32. }
    1. action=”cp.php?ac=comment”
    1. //对话框
    2. function showmessage($msgkey, $url_forward=”, $second=1, $values=array()) {
    3. global $_SGLOBAL, $_SC, $_SCONFIG, $_TPL, $space, $_SN;

    4. obclean();

    5. //去掉广告
    6. $_SGLOBAL['ad'] = array();

    7. //语言
    8. include_once(S_ROOT.’./language/lang_showmessage.php’);
    9. if(isset($_SGLOBAL['msglang'][$msgkey])) {
    10. $message = lang_replace($_SGLOBAL['msglang'][$msgkey], $values);
    11. } else {
    12. $message = $msgkey;
    13. }
    14. //手机
    15. if($_SGLOBAL['mobile']) {
    16. include template(’showmessage’);
    17. exit();
    18. }
    19. //显示
    20. if(empty($_SGLOBAL['inajax']) && $url_forward && empty($second)) {
    21. header(”HTTP/1.1 301 Moved Permanently”);
    22. header(”Location: $url_forward”);
    23. } else {
    24. if($_SGLOBAL['inajax']) {
    25. if($url_forward) {
    26. $message = “<a href=/”$url_forward/”>$message</a><ajaxok>”;
    27. }
    28. //$message = “<h1>”.$_SGLOBAL['msglang']['box_title'].”</h1><a href=/”java script:;/” onclick=/”hideMenu();/” class=/”float_del/”>X</a><div class=/”popupmenu_inner/”>$message</div>”;
    29. echo $message;
    30. ob_out(); //输入message内容以备获取
    31. } else {
    32. if($url_forward) {
    33. $message = “<a href=/”$url_forward/”>$message</a><script>setTimeout(/”window.location.href =’$url_forward’;/”, “.($second*1000).”);</script>”;
    34. }
    35. include template(’showmessage’);
    36. }
    37. }
    38. exit();
    39. }
    1. //调整输出
    2. function ob_out() {
    3. global $_SGLOBAL, $_SCONFIG, $_SC;
    4. [color=Blue]$content = ob_get_contents();[/color]
    5. $preg_searchs = $preg_replaces = $str_searchs = $str_replaces = array();
    6. if($_SCONFIG['allowrewrite']) {
    7. $preg_searchs[] = “//<a href/=/”space/.php/?(uid|do)+/=([a-z0-9/=/&]+?)/”/ie”;
    8. $preg_searchs[] = “//<a href/=/”space.php/”/i”;
    9. $preg_searchs[] = “//<a href/=/”network/.php/?ac/=([a-z0-9/=/&]+?)/”/ie”;
    10. $preg_searchs[] = “//<a href/=/”network.php/”/i”;
    11. $preg_replaces[] = ‘rewrite_url(/’space-/’,/’//2/’)’;
    12. $preg_replaces[] = ‘<a href=”space.html”‘;
    13. $preg_replaces[] = ‘rewrite_url(/’network-/’,/’//1/’)’;
    14. $preg_replaces[] = ‘<a href=”network.html”‘;
    15. }
    16. if($_SCONFIG['linkguide']) {
    17. $preg_searchs[] = “//<a href/=/”http/:////(.+?)/”/ie”;
    18. $preg_replaces[] = ‘iframe_url(/’//1/’)’;
    19. }
    20. if($_SGLOBAL['inajax']) {
    21. $preg_searchs[] = “/([/x01-/x09/x0b-/x0c/x0e-/x1f])+/”;
    22. $preg_replaces[] = ‘ ‘;
    23. $str_searchs[] = ‘]]>’;
    24. $str_replaces[] = ‘]]&gt;’;
    25. }
    26. if($preg_searchs) {
    27. $content = preg_replace($preg_searchs, $ob_out, $content);
    28. }
    29. if($str_searchs) {
    30. $content = trim(str_replace($str_searchs, $str_replaces, $content));
    31. }
    32. [color=Blue]obclean();[/color]        if($_SGLOBAL['inajax']) {
    33. [color=Blue]xml_out($content);[/color]        } else{
    34. if($_SCONFIG['headercharset']) {
    35. @header(’Content-Type: text/html; charset=’.$_SC['charset']);
    36. }
    37. echo $content;
    38. if(D_BUG) {
    39. @include_once(S_ROOT.’./source/inc_debug.php’);
    40. }
    41. }
    42. }
      1. function xml_out($content) {
      2. global $_SC;
      3. @header(”Expires: -1″);
      4. @header(”Cache-Control: no-store, private, post-check=0, pre-check=0, max-age=0″, FALSE);
      5. @header(”Pragma: no-cache”);
      6. @header(”Content-type: application/xml; charset=$_SC[charset]“);
      7. echo ‘<’.”?xml version=/”1.0/” encoding=/”$_SC[charset]/”?>/n”;
      8. echo “<root><![CDATA[".trim($content)."]]></root>”;
      9. exit();
      10. }
      1. <?xml version=”1.0″ encoding=”gbk” ?>
      2. - <root>
      3. - <![CDATA[ <a href="space.php?uid=1&do=blog&id=533">搞好了</a><ajaxok>
      4. ]]>
      5. </root>
      1. //添加评论
      2. function comment_add(id, result) {
      3. if(result) {
      4. var obj = $(’comment_ul’);
      5. var newli = document.createElement(”div”);
      6. var x = new Ajax();
      7. x.get(’do.php?ac=ajax&op=comment’, function(s){
      8. alert(”s–0:” + s);
      9. newli.innerHTML = s;
      10. });
      11. if($(’comment_prepend’)){
      12. obj = obj.firstChild;
      13. while (obj && obj.nodeType != 1){
      14. obj = obj.nextSibling;
      15. }
      16. obj.parentNode.insertBefore(newli, obj);
      17. } else {
      18. obj.appendChild(newli);
      19. }
      20. if($(’comment_message’)) {
      21. $(’comment_message’).value= ”;
      22. }
      23. if($(’comment_replynum’)) {
      24. var a = parseInt($(’comment_replynum’).innerHTML);
      25. var b = a + 1;
      26. $(’comment_replynum’).innerHTML = b + ”;
      27. }
      28. //提示获得积分
      29. showreward();
      30. }
      31. }
      1. <!–{if $op == ‘comment’}–>

      2. <!–{loop $list $value}–>
      3. <!–{template space_comment_li}–>
      4. <!–{/loop}–>
    43. 复制代码

      代码解读
      a、$content = ob_get_contents();从内存里读取到刚才echo的”<a href=/”$url_forward/”>$message</a><ajaxok>”;
      b、xml_out($content);具体代码如下:

      复制代码

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

      复制代码

      如下图:

      当看到上图的时候,我们发现隐藏的ajaxframe(为了调试,我让它显示出来了)里此时已经有内容了。那么这个内容是怎么放到 ajaxframe里边去的呢?是通过form的target属性。target者,目标也。action完了之后打印出来的东西,放到target里边 去了。于是,ajaxframe就有了如上的内容。也就是说,图一中的3的内容已经准备好了,至于什么时候显示出来,下面说到。
      表单的action处理完了,也就是说数据保存工作已经完成了。下面主要把数据调出来显示了。程序跑到了
      7、script_ajax.js的295行 :ajaxframe.attachEvent(’onload’, ajaxpost_load);这是一个监听。实际上当action结束后,这个监听就捕获到onload动作了,紧接着应该运行 ajaxpost_load函数,当然,此时同时把ajaxframe填充好了,填充内容和调用ajaxpost_load函数,哪个在先哪个在后呢?这 个问题留给高手回答吧。下面看看ajaxpost_load函数

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

      function ajaxpost_load() {
      //从刚才的ajaxpostHandle句柄里获取值,实际上获取到了’quickcommentform_{$id}’和’comment_add’两个值,timeout是没有值的
      var formid = ajaxpostHandle[0];
      var func = ajaxpostHandle[1];
      var timeout = ajaxpostHandle[2];
      //定义要显示“搞好了”的div之id,实际上在space_blog_view.htm里有这么一句:<div id=”__quickcommentform_{$id}”></div>
      //你一看便知怎么回事了
      var formstatus = ‘__’ + formid;
      //把页面右上解那个loading…隐藏起来
      showloading(’none’);
      if(is_ie) {
      //把ajaxframe的内容读出来赋值给s,以备后用。此时s的内容是:
      //<a href=”space.php?uid=1&do=blog&id=533″>搞好了</a><ajaxok>
      var s = $(’ajaxframe’).contentWindow.document.XMLDocument.text;
      } else {
      var s = $(’ajaxframe’).contentWindow.document.documentElement.firstChild.nodeValue;
      }
      //为了调试,我在这里alert一下
      alert(”s-1″ + s);
      evaled = false;
      if(s.indexOf(’ajaxerror’) != -1) {
      evalscript(s);
      evaled = true;
      }
      if(s.indexOf(’ajaxok’) != -1) {
      ajaxpostresult = 1;
      } else {
      ajaxpostresult = 0;
      }
      //function
      if(func) {
      //运行函数和comment_add,设置超时时间为10秒,这里边的formid应该没有什么用。
      //这个comment_add函数跳出这个代码段后详说
      setTimeout(func + ‘(/” + formid + ‘/’,’ + ajaxpostresult + ‘)’, 10); //formid好像没有什么用
      }
      if(!evaled && $(formstatus)) {
      $(formstatus).style.display = ”;
      //让<div id=”__quickcommentform_{$id}”></div>的内容填充上“搞好了”
      ajaxinnerhtml($(formstatus), s);
      evalscript(s);
      }

      //层消失
      if(timeout && ajaxpostresult) jsmenu['timer'][formid] = setTimeout(”hideMenu()”, timeout);

      formid.target = ‘ajaxframe’;
      ajaxpostHandle = 0;
      }

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

      复制代码

      代码解读:
      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. 我看查看页面源文件,很快能找到评论 (<span id=”comment_replynum”>0</span> 个评论)这样的一段,那么这里的var a = parseInt($(’comment_replynum’).innerHTML);便是为了把0赋值给a,经运算,b=1,再往下怎么回事,同学们 自己琢磨了。
      10、这里看看do.php?ac=ajax&op=comment是怎么把如下内
      容搞出来的:

      看完结果图,再看看代码吧,source/do_ajax.php里,先把数据里的数据select出来,然后最后引用模板文件include template(’do_ajax’);模板代码主要如下:

      复制代码

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

  33. 复制代码

    代码解读:
    在这里,此函数只接到两个参数表单名quickcommentform_{$id}和函数名comment_add
    a、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&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.ph
    p第221行

    复制代码

    这个函数比较重要,解读一下吧。
    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行

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值