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="評論" οnclick="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);