仓酷云

标题: PHP编程:使用PHP+JavaScript打造AJAX搜刮窗 [打印本页]

作者: 灵魂腐蚀    时间: 2015-2-3 23:58
标题: PHP编程:使用PHP+JavaScript打造AJAX搜刮窗
掌握静态网页的制作技术是学习开发网站的先决条件,这一点就讲到这里,因为这篇文章不是教程文章,也就不对技术进行深入的刨析了。   <P>  1、 引言

  Web世界中一项广为利用的功效就是搜刮。跟着Web手艺的日趋开展,为了更好地知足客户的需求,惯例搜刮引擎入手下手对更多的十分规体例"关闭了大门"。在这方面,Yahoo!率先供应出其Y!Q办事。这个新的办事可以使你搜刮任何web页面,条件是该页面的作者必需包含在他们的web页面中。是办事手艺完成了把相干的搜刮了局出现到读者面前,从而向读者展现更多的信息而不用分开他们确当前页面。

  Yahoo!的Y!Q办事切实其实是一个巨大的设法,然而它的呈现也遭到了一些品评。缘由安在?起首,它请求客户端必需利用Yahoo!的JavaScript而且你必需添加一个<form/>元素,以便知足Yahoo!的搜刮请求。关于很多网站作者来讲,供应该办事请求支付太多的勉力。而且,在一切这些前提知足以后,搜刮了局将以Yahoo!作风展示,从而损坏了用户网站的外不雅感到。

  侥幸的是,Yahoo!并不是独一的供应"从你的网站供应搜刮了局"办事的搜刮引擎。MSN Search也供应一品种似办事,除它可以使web开辟者掌握外不雅感到之外。这类才能来自于MSN Search供应它的搜刮了局的RSS版本,从而使得定阅一个特定的搜刮或利用Ajax办法把该了局添加到你的页面成为能够。

  虽然Google已率先完成了这类新的"从你的站点停止搜刮"手艺;然而,在本文成文之时,与Google相干的Google BlogSearch Beta也已可以以RSS或Atom格局供应前往的了局。

  2、 办事器端组件

  利用MSN Search履行搜刮时,你会看到一个桔黄色的XML图象呈现在了局页面的底部。点击这个图象将会把你带到一个新的页面,并供应给你定阅该搜刮的URL。

  如许以来,你就能够编写办事器端代码以检索近程馈送。关于本文中的搜刮窗,你将利用PHP检索搜刮馈送。来自于办事器使用法式恳求信息的URL看起来以下所示:

websearch.php?search=[SEARCHTERM]
  查询字符串只要一个变量:"search";因而,使用法式应当查找此查询项。在办事器端,你需求创立一个页面来"拉动"这个数据:

<?php
header("Content-Type: text/xml");
header("Cache-Control: no-cache");if ( isset($_GET["search"]) )
{
 $searchTerm = urlencode( stripslashes($_GET["search"]) );
 $url = "http://search.msn.com/results.aspx?q=$searchTerm&format=rss";
 $xml = file_get_contents($url);
 echo $xml;
}
?>
  前两行设置请求的头部以便阅读器可以准确处置数据(XML模式,而且没有对了局予以缓冲)。下一行代码利用isset()函数来决意是不是搜刮键存在于查询字符串中。

  为了把一个适合的恳求发送到近程主机,搜刮术语应当经由过程很多函数的"过滤"。起首,它被传递给stripslashes()函数。假如在PHP设置装备摆设中启动了"magic quotes"(缺省情形下是撑持的),那末,抵达PHP引擎的任何引号城市被利用一个斜杠(如,\"search query\")主动地脱失落。该stripslashes()函数担任删除这些符号,仅留下"search query"。在删除斜杠后,转到urlencode()函数,由这个函数担任编码字符以用于查询字符串。空格、引号、"&"等符号都被编码。

  注重 假如搜刮术语不克不及经由过程这些函数的"过滤",那末,MSN办事器将前往一个代码400-"Bad Request"。

  当为转换搜刮术语筹办好后,它被包含到URL中并存储于$url变量中。最初,file_get_contents()函数担任翻开近程文件,读取其内容并以一个字符串模式把它前往到$xml变量中,然后利用echo号令把它打印到页面中。

  3、 客户端组件

  本文中的搜刮窗口(Widget)的客户端代码基于一个静态对象msnWebSearch创立-它被界说为一个没有任何属性(如今)的对象:

var msnWebSearch ={};
  这个对象用于一个HTMLElement的onclick事务中履行搜刮:

<a href="#"

Professional Ajax
</a>
  这个msnWebSearch对象供应若干获得搜刮了局的办法,并担任绘制和放置包括这些数据的HTML。第一个办法是drawResultBox(),它担任绘制HTML。这个办法构成的HTML以下所示:

<divclass="ajaxWebSearchBox">
 <div class="ajaxWebSearchHeading">MSN Search Results
 <a class="ajaxWebSearchCloseLink" href="#">X</a>
</div>
<div class="ajaxWebSearchResults">
 <a class="ajaxWebSearchLink" target="_new" />
 <a class="ajaxWebSearchLink" target="_new" />
</div>
</div>
  该了局框分为两局部:一个头部和一个了局栏(见图1)。头部告知用户这个新的搜刮窗包括来自一个MSN搜刮的了局。它还包括一个"X"用于封闭该小窗口。其了局栏包括块作风的链接,当点击这些链接时将打一个新的窗口。



图1.了局框分为两局部:一个头部和一个了局栏

<P>  4、 绘制了局用户接口

  生成这个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;
};
  经由过程这类体例创立msnWebSearch对象后,必需把divSearchBox前往到它的挪用者以便停止其它操作。你可以已猜出,position()办法担任放置该搜刮框。它承受两个参数:传递到drawResultBox()的事务对象和divSearchBox元素:

msnWebSearch.position = function (e, divSearchBox) {
 var x = e.clientX + document.documentElement.scrollLeft;
 var y = e.clientY + document.documentElement.scrollTop;
 divSearchBox.style.left = x + "px";
 divSearchBox.style.top = y + "px";
};
  前两行代码失掉右边和顶部地位,用于放置搜刮了局框。履行这个操作请求利用两种信息。起首是鼠标的x和y坐标(这些信息被存储在clientX和clientY属性)。

  但是,这些坐标还缺乏以准确定位了局框,由于clientX和clientY属性前往相对阅读器窗口客户区的鼠标地位,而不是页面中的实践坐标。思索到这一点,咱们可使用文档元素的scrollLeft和scrollTop属性。盘算出最初的坐标后,你可以最初肯定用户点击鼠标的框中的地位。
<P>  5、 显示了局

  populateResults()办法担任利用搜刮了局填充了局栏。它承受两个参数:包括该了局的元素和一个XParser对象(XParser是一个基于JavaScript的RSS读取器,可从www.wdonline.com/javascript/xparser/自在下载):

msnWebSearch.populateResults = function(divResultsPane,oParser){
 var oFragment = document.createDocumentFragment();

 divResultsPane.removeChild(divResultsPane.firstChild);
  这个办法以编程体例并经由过程DOM办法生成<a/>元素;如许以来,这些元素将被添加到一个在第一行创立的文档片段中。下一行删除添加在drawResultBox()中的正加载的<div/>元素。

  下一步是创立这个链接:

for (var i = 0; i < oParser.items.length; i++) {
 var oItem = oParser.items;

 var aResultLink = document.createElement("a");
 aResultLink.href = oItem.link.value;
 aResultLink.className = "ajaxWebSearchLink";
 aResultLink.target = "_new";
 aResultLink.appendChild(document.createTextNode(oItem.title.value));

 oFragment.appendChild(aResultLink);
}
  这段代码遍历回馈的各个项,而且由该数据生成链接并把<a/>元素添加到文档片段最初。

  当加入轮回时,该文档片段被添加到divResultsPane以显示搜刮了局:

divResultsPane.appendChild(oFragment);
  6、 封闭了局框

  为了封闭搜刮了局框,msnWebSearch对象供应了close()办法。close()办法担任处置该链接的onclick事务(封闭该小框):

msnWebSearch.close = function () {
 var divSearchBox = this.parentNode.parentNode;
 document.body.removeChild(divSearchBox);

 return false;
};
  该搜刮框其实并没有封闭;现实上,它被从该文档中删除。为此,需求检索divSearchBox元素。第一行代码完成这一义务-经由过程检索这个元素的父结点的父结点完成。由于close()担任处置onclick事务,所以this援用这一链接。下一行从文档中删除divSearchBox元素。最初一行,前往false,从而强制阅读器不要沿用一个链接的缺省行动(转到在href属性中标注的地位)。

  7、 构建搜刮接口

  msnWebSearch对象的最初一个办法是search(),它供应履行一个搜刮的接口。你可使用一个元素的onclick事务来挪用search()。它承受两个办法:一个事务对象和搜刮术语:

msnWebSearch.search = function (e,sSearchTerm) {
 var divSearchBox = this.drawResultBox(e);
 var url = encodeURI("websearch.php?search=" + sSearchTerm);
 var oParser = new XParser(url);
 oParser.onload = function () {
  msnWebSearch.populateResults(divSearchBox.childNodes[1],oParser);
 };
};
  第一行挪用drawResultBox()办法而且把事务e传递给它。下一行编码该URL以完成适合的转换。这个URL被传递给XParser机关器以创立一个新的剖析器。当搜刮回馈完成加载并利用了局填充搜刮框时,该剖析器的onload事务处置器挪用populateResult()办法。
固然,构建这个搜刮框的一个来由是,使其更合适于你本人的站点的外不雅。
<P>  8、 定制Web搜刮框

  借助于CSS,你可以轻易地为你的现有站点定制搜刮框,而且使你今后的任何从头设计都变得十分轻易。

  起首要会商的CSS类是ajaxWebSearchBox(该类完成搜刮框)。由于搜刮框要肯定地位,所以它必需要有一个相对地位:

.ajaxWebSearchBox
{
 position: absolute;
 background-color: #0d1e4a;
 width: 500px;
 padding: 1px;
}
  在此,相对地位是独一的请求。一切的其它属性都是依据你的口胃可选的。在这个示例中,该框有一个微蓝色的后台,一个500像素的宽度,和在四边上各有1个像素的填充。这个填充招致环绕该框的内容的是1个像素宽的界限。

  下一个类是ajaxWebSearchHeading,它包括该框的头部文本和封闭链接。为了把封闭链接放在右上角,它利用相对地位。由于这个缘由,它请求ajaxWebSearchHeading利用一个绝对地位:

.ajaxWebSearchHeading
{
 position: relative;
 background-color: #1162cc;
 font: bold 14px tahoma;
 height: 21px;
 color: white;
 padding: 3px 0px 0px 2px;
}
  在此,独一请求的属性也是position属性。其它的属性有助于给出该元素一个悦目的外不雅。其后台色彩是浅蓝色,而文本局部是白色,14像素高且是Tahoma字体。该元素的高度是21个像素而且在顶部和右边都填充以界限。

  如后面所述,该封闭链接的地位是相对的:

a.ajaxWebSearchCloseLink
{
 position: absolute;
 right: 5px;
 top: 3px;
 text-decoration: none;
 color: white;
}
a:hover.ajaxWebSearchCloseLink
{
 color: red;
}
  该元素被放置在距右侧5个像素,距顶部3个像素的地位(该元素被放在右上角)。这个链接没有任何文本润色而且色彩呈白色。当用户的鼠标停在该链接上时,文本色彩变红。

  注重,这里没有利用会见过的或举动的"假"类。这是由于该窗口老是疏忽这个链接的href属性(它已在它的事务处置器中前往了false)。因而,该链接历来不会真正处于举动或被会见形态。

  然后,ajaxWebSearchResults类使了局栏的作风以下:

.ajaxWebSearchResults
{
 background-color: #d3e5fa;
 padding: 5px;
}
  这个元素不请求利用CSS属性。现有属性仅用于界说了局栏而且使它对照轻易读取。后台色彩是一个浅蓝色而且环绕边沿有5个像素的填充。固然,你可以定制加载动静的作风:

.ajaxWebSearchResults div
{
 text-align: center;
 font: bold 14px tahoma;
 color:#0a246a;
}
  这个元素没有一个类名,然而你依然可以经由过程利用后面的示例中展现的parent child标记掌握它的作风。这个示例把文本放置在<div/>元素的中心,而且给它一个加粗蓝色的字体,且有14个像素高。

  最初一个你需求作风化的元素是了局链接。这些链接有一个类名叫ajaxWebSearchLink:

a.ajaxWebSearchLink
{
 font: 12px tahoma;
 padding: 2px;
 display: block;
 color: #0a246a;
}
a:hover.ajaxWebSearchLink
{
 color: white;
 background-color: #316ac5;
}
a:visited.ajaxWebSearchLink
{
 color: purple;
}
  独一请求的属性是display属性(被设置为block)。这使每个链接都可以在它本人的行上显示。填充空白局部大约有两个像素宽,使各个链接之间分隔一些,从而使它们更容易于读取。字体名为Tahoma而且有12像素高。它们的色彩是暗蓝色,与ajaxWebSearchResults的浅蓝色后台构成对比。

  当用户在这些链接上挪动鼠标时,后台色彩被设置为蓝色,而文本色彩改动为白色。

  在后面的代码的最初一条划定规矩中会见过的"假"类被设置。这是为了给用户供应用户接口暗示-它们已被利用过。经由过程把会见过的"假"类设置为显示一种紫色,用户就能够晓得它们已会见过谁人链接,从而节俭他们的工夫-不用再会见一个他们能够不想看的页面。

  如今,让咱们来看一下若何完成搜刮框。

  9、 完成Web搜刮搜刮框

  完成这个搜刮框是很复杂的。起首,你必需把websearch.php文件上传到你的web办事器(固然,必需装置PHP)。然后,你需求一个HTML文档来援用一切的组件。msnWebSearch对象依附于XParser类,这个类又依附于zXml库(可从www.nczonline.net/downloads/下载)。你必需援用上面这些文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax WebSearch</title>
<link rel="stylesheet" type="text/css" href="css/websearch.css" />
<script type="text/javascript" src="js/zxml.js"></script>
<script type="text/javascript" src="js/xparser.js"></script>
<script type="text/javascript" src="js/websearch.js"></script>
</head><body>
</body>
</html>
  为了履行搜刮,应当把msnWebSearch.search()办法设置为该元素的onclick处置器:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax WebSearch</title>
<link rel="stylesheet" type="text/css" href="css/websearch.css" />
<script type="text/javascript" src="js/zxml.js"></script>
<script type="text/javascript" src="js/xparser.js"></script>
<script type="text/javascript" src="js/websearch.js"></script>
</head><body>
<a href="#" >Search for "Professional Ajax"</a>
<br /><br /><br /><br />
<a href="#" >Search for Professional Ajax</a>
</body>
</html>
  第一个新的链接履行一个针瞄准确词组"Professional Ajax"的搜刮,而第二个链接将搜刮这个中的各个单词。还要注重,在onclick事务中前往的是false-这强制阅读器疏忽失落href属性。点击这些链接将在光标地位绘制搜刮框,而且就在此处显示你的搜刮了局。你的确对PHP有兴趣,那么选择教材也是很重要的。
作者: 柔情似水    时间: 2015-2-4 07:53
有位前辈曾经跟我说过,phper 至少要掌握200个函数 编起程序来才能顺畅点,那些不熟悉的函数记不住也要一拿手册就能找到。所以建议新手们没事就看看php的手册(至少array函数和string函数是要记牢的)。
作者: 爱飞    时间: 2015-2-7 11:56
要进行开发,搭建环境是首先需要做的事,windows下面我习惯把环境那个安装在C盘下面,因为我配的环境经常出现诡异事件,什么事都没做环境有的时候就不能用啦。
作者: 海妖    时间: 2015-2-8 18:15
我还是推荐用firefox ,配上firebug 插件调试js能省下不受时间。谷歌的浏览器最好也不少用,因为谷歌的大侠们实在是太天才啦,把一些原来的js代码加了一些特效。
作者: 小妖女    时间: 2015-2-11 04:48
如果你可以写完像留言板这样的程序,那么你可以去一些别人的代码了,
作者: 山那边是海    时间: 2015-2-24 06:49
有位前辈曾经跟我说过,phper 至少要掌握200个函数 编起程序来才能顺畅点,那些不熟悉的函数记不住也要一拿手册就能找到。所以建议新手们没事就看看php的手册(至少array函数和string函数是要记牢的)。
作者: 简单生活    时间: 2015-2-28 19:40
先学习php和mysql,还有css(html语言很简单)我认为现在的效果比以前的方法好。
作者: 小魔女    时间: 2015-3-3 14:04
兴趣是最好的老师,百度是最好的词典。
作者: 活着的死人    时间: 2015-3-6 05:10
说php的话,首先得提一下数组,开始的时候我是最烦数组的,总是被弄的晕头转向,不过后来呢,我觉得数组里php里最强大的存储方法,所以建议新手们要学好数组。
作者: 飘飘悠悠    时间: 2015-3-12 16:19
首推的搜索引擎当然是Google大神,其次我比较喜欢 百度知道。不过搜出来的结果往往都是 大家copy来copy去的,运气的的概率很大。
作者: 若相依    时间: 2015-3-17 08:09
环境搭建好,当你看见你的浏览器输出“it works\\\\\\\"时你一定是喜悦的。在你解决问题的时候,我强烈建议多读php手册。
作者: 再见西城    时间: 2015-3-24 10:01
其实也不算什么什么心得,在各位大侠算是小巫见大巫了吧,望大家不要见笑,若其中有错误的地方请各位大虾斧正。
作者: 精灵巫婆    时间: 2015-3-24 14:45
php是动态网站开发的优秀语言,在学习的时候万万不能冒进。在系统的学习前,我认为不应该只是追求实现某种效果,因为即使你复制他人的代码调试成功,实现了你所期望的效果,你也不了解其中的原理。
作者: 变相怪杰    时间: 2015-4-1 12:50
对于初学者来说不推荐去拿钱买的。当然如果一个网站你经常去用,而且里面的资料也比较有用,最好还是买个会员比较好,毕竟那些也是别人的工作成果。
作者: 冷月葬花魂    时间: 2015-4-4 11:24
这些中手常用的知识,当你把我说的这些关键字都可以熟练运用的时候,你可以选择自己
作者: 只想知道    时间: 2015-4-17 17:51
其实没啥难的,多练习,练习写程序,真正的实践比看100遍都有用。不过要熟悉引擎
作者: 因胸联盟    时间: 2015-4-20 21:24
至于模板嘛,各位高人一直以来就是争论不休,我一只小菜鸟就不加入战团啦,咱们新手还是多学点东西的好。
作者: 兰色精灵    时间: 2015-4-25 01:48
在学习的过程中不能怕麻烦,不能有懒惰的思想。学习php首先应该搭建一个lamp环境或者是wamp环境。这是学习php开发的根本。虽然网络上有很多集成的环境,安装很方便,使用起来也很稳定、
作者: 莫相离    时间: 2015-5-10 15:23
兴趣是最好的老师,百度是最好的词典。
作者: 飘灵儿    时间: 2015-6-5 22:49
环境搭建好,当你看见你的浏览器输出“it works\\\\\\\"时你一定是喜悦的。在你解决问题的时候,我强烈建议多读php手册。




欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2