uchome 二次開發 AJAX解析

uchome 用的最多的兩個函數  ajaxpost()   和 ajaxmenu() ;

1.  uchome ajax(局部刷新)評論部分效果分析:

 

    

實現:  1>  評論條數 由原來的  條 變成了 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="評論" οnclick="ajaxpost('quickcommentform_{$id}', 'comment_status', 'comment_add')" /><span id="comment_status"></span>

點擊“評論”的時候調用 ajaxpost() 函數  此函數在:/source/script_ajax.js 文件中

函數內容如下:

 

Ajaxpost()解讀

   在這裏函數傳了三個參數:表單ID quickcommentform_{$id}” 、 提示語顯示位置IDcomment_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);創建一個名字 ajaxframeiframe標籤之後讓它隱藏起來以便於進行幕後操作,讓ajaxframeappend_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)


發佈了3 篇原創文章 · 獲贊 7 · 訪問量 13萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章