uchome 二次开发 AJAX解析

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

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

 

    

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

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

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

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

2. Ajaxpost代码执行过程分析

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

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

<input type="button" id="commentsubmit_btn" name="commentsubmit_btn" class="submit" value="评论" onclick="ajaxpost('quickcommentform_{$id}', 'comment_status', 'comment_add')" /><span id="comment_status"></span>

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