你现在的位置:首页 > PHP网站建设知识库 > UCenter Home > 正文

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);