解讀利用PHP JavaScript打造AJAX搜索窗的方法(2)_PHP教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

推薦：解析PHP CSS實現(xiàn)打印簡單數(shù)據(jù)報表功能
PHP CSS實現(xiàn)打印簡單數(shù)據(jù)報表功能功能：實現(xiàn)打印日報表的功能，定義了專門的打印樣式，隱藏了不該打印的控件并實現(xiàn)了分頁打印功能，表名：rec 字段：rec_id,rec_po,rec_part,rec_plant

圖1.結(jié)果框分為兩部分：一個頭部和一個結(jié)果欄

四、繪制結(jié)果用戶接口

生成這個HTML的代碼相當長，因為其中的元素都是使用DOM方法生成的。drawResultBox()方法接受一個參數(shù)（一個事件對象）：

以下為引用的內(nèi)容：

msnWebSearch.drawResultBox = function (e) {
　var divSearchBox= document.createElement("div");
　var divHeading = document.createElement("div");
　var divResultsPane = document.createElement("div");
　var aCloseLink = document.createElement("a");

前面這些代碼經(jīng)由createElement()方法創(chuàng)建HTML元素。在創(chuàng)建這些元素后，你就能夠開始賦予它們屬性。上面完成終結(jié)（封尾）的兩個元素分別是aCloseLink和divHeading：

以下為引用的內(nèi)容：

aCloseLink.href = "#";
aCloseLink.className = "ajaxWebSearchCloseLink";
aCloseLink.onclick = this.close;
aCloseLink.appendChild(document.createTextNode("X"));
divHeading.className = "ajaxWebSearchHeading";
divHeading.appendChild(document.createTextNode("MSN Search Results"));
divHeading.appendChild(aCloseLink);

前四行完成關(guān)閉結(jié)果框的鏈接。其中，方法close()成為鏈接的onclick事件的處理器。后面的幾行代碼負責使用文本和關(guān)閉鏈接填充頭部的＜div/＞。

當這個結(jié)果框被繪制到頁面上時，還沒有接收到來自于一個服務(wù)器應用程序的響應。為了向用戶展示已經(jīng)發(fā)生了什么，可以向用戶展示一個消息提示數(shù)據(jù)正在加載中（這種方式更友好些）(見圖2)。為此，創(chuàng)建另一個元素并且把它添加到divResultsPane元素：

以下為引用的內(nèi)容：

var divLoading = document.createElement("div");
divLoading.appendChild(document.createTextNode("Loading Search Feed"));

divResultsPane.className = "ajaxWebSearchResults";
divResultsPane.appendChild(divLoading);

這個代碼創(chuàng)建加載消息并且把它添加到divResultsPane，同時還把類名賦給divResultsPane。