当前位置: 首页 > 图文教程 > 网络编程 > PHP > 利用PHP＋JavaScript打造AJAX搜索窗(2)

PHP
php 清除网页病毒的方法
php 远程关机操作的代码
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
PHP 出现乱码和Sessions验证问题的解决方法！
php2html php生成静态页函数
中英文字符串翻转函数
php escape URL编码
PHP Google的translate API代码
php 文件状态缓存带来的问题
linux下 C语言对 php 扩展
php mssql 数据库分页SQL语句
php IP及IP段进行访问限制的代码
PHP 采集程序 常用函数
php 设计模式之 单例模式
php 设计模式之 工厂模式
php xml-rpc远程调用
php 获取完整url地址
PHP MSSQL 存储过程的方法
PDP Document 代码注释规范
PHP HTML代码串截取代码

No. « 117 118 119 120 »

技术文章搜索

关键字

利用PHP＋JavaScript打造AJAX搜索窗(2)

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-11-03   浏览: 150 ::
收藏到网摘: n/a

四、 绘制结果用户接口

　　生成这个HTML的代码相当长，因为其中的元素都是使用DOM方法生成的。drawResultBox()方法接受一个参数（一个事件对象）：

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

　　前面这些代码经由createElement()方法创建HTML元素。在创建这些元素后，你就能够开始赋予它们属性。上面完成终结（封尾）的两个元素分别是aCloseLink和divHeading：

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

　　前四行完成关闭结果框的链接。其中，方法close()成为链接的onclick事件的处理器。后面的几行代码负责使用文本和关闭链接填充头部的＜div/＞。

　　当这个结果框被绘制到页面上时，还没有接收到来自于一个服务器应用程序的响应。为了向用户展示已经发生了什么，可以向用户展示一个消息提示数据正在加载中（这种方式更友好些）(见图2)。为此，创建另一个元素并且把它添加到divResultsPane元素：

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

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

　　这个代码创建加载消息并且把它添加到divResultsPane，同时还把类名赋给divResultsPane。


图2.向用户提示数据正在加载中

　　完成这些元素之后，剩下的就是把它们添加到divSearchBox元素中：

divSearchBox.className = "ajaxWebSearchBox";
divSearchBox.appendChild(divHeading);
divSearchBox.appendChild(divResultsPane);
document.body.appendChild(divSearchBox);

　　这段代码负责把divHeading和divResultsPane元素添加到搜索窗，并且把搜索窗添加到页面。

　　在drawResultBox()中的最后一步是确定新绘制的小框的位置并且把divSearchBox返回到它的调用者：

msnWebSearch.drawResultBox = function (e) {
　var divSearchBox= document.createElement("div");
　var divHeading = document.createElement("div");
　var divResultsPane = document.createElement("div");
　var aCloseLink = document.createElement("a");
　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);
　var divLoading = document.createElement("div");
　divLoading.appendChild(document.createTextNode("Loading Search Feed"));
　divResultsPane.className = "ajaxWebSearchResults";
　divResultsPane.appendChild(divLoading);
　divSearchBox.className = "ajaxWebSearchBox";
　divSearchBox.appendChild(divHeading);
　divSearchBox.appendChild(divResultsPane);
　document.body.appendChild(divSearchBox);
　this.position(e， divSearchBox);
　return divSearchBox;
};

　　通过这