广告
返回顶部
首页 > 资讯 > 后端开发 > PHP编程 >PHP+XML+jQuery如何实现即时功能
  • 645
分享到

PHP+XML+jQuery如何实现即时功能

phpxml 2022-10-19 08:10:48 645人浏览 薄情痞子
摘要

这篇文章将为大家详细讲解有关PHP+XML+Jquery如何实现即时功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Google的即时功能是一种新的搜索增强功能,随着您

这篇文章将为大家详细讲解有关PHP+XML+Jquery如何实现即时功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

Google的即时功能是一种新的搜索增强功能,随着您的键入显示结果,它已经获得了众多瞩目,而且很容易明白这是为什么。获取结果所需做的全部工作就是键入。您无需按Enter键来查看结果,然后调整您的搜索并再次按Enter键。这都将随着您的键入而发生。如果您还没有这样做,请尝试一下。令人惊讶的是这么小的变化却能在可用性上产生如此大的差异。

这类即时功能的主要好处在于易于实现,尤其当您在使用jQuery等客户端工具时。在本文中,您要遵循构建简单搜索引擎的流程,而后再为该引擎构建即时搜索用户界面。这一切都始于获取搜索数据。

设置数据

对于本文,我决定搜索“辛普森一家”剧集。我创建一个包含所有 “辛普森一家” 剧集、标题、季数、集数、播放日期和每集摘要的 XML 文件(包括在源代码 下载 中)。您可以在清单 1中看到该XML的一部分。

清单1. XML数据源  <?xml version="1.0" encoding="UTF-8"?> <episodes>   <episode title='Simpsons Roasting on an Open Fire' episode='1' season='1'     aired='17 December 1989'>      Christmas seems doomed for the Simpson family when Homer receives no      Christmas Bonus. Homer becomes a mall Santa Claus, hoping to make money and      bring Marge, Bart, Lisa, and baby Maggie, a happy holiday.    </episode>    ...  </episodes>

它实际上是一个非常大的文件,其大小约为840K。这应该不令人意外,因为 “辛普森一家” 已经播放了漫长的22年。接下来就是编写一个php类,可为您执行XML解析和搜索。这个类称为Simpsons,如清单 2中所示。

清单 2. Simpsons 搜索类  <?php class Simpsons {   private $episodes = array();   public function __construct() {     $xmlDoc = new DOMDocument();     $xmlDoc->load("simpsons.xml");   foreach ($xmlDoc->documentElement->childnodes as $episode)     {       if ( $episode->nodeType == 1 ) {        $this->episodes []= array(         'episode' => $episode->getAttribute( 'episode' ),        'season' => $episode->getAttribute( 'season' ),        'title' => $episode->getAttribute( 'title' ),        'aired' => $episode->getAttribute( 'aired' ),        'summary' => $episode->nodeValue );       }     }   }   public function find( $q ) {     $found = array();     $re = "/".$q."/i";     foreach( $this->episodes as $episode ) {       if ( preg_match( $re, $episode['summary'] ) ||           preg_match( $re, $episode['title'] ) ) {       $found []= $episode;     }     }     return $found;   }  }  ?>

该类的构造函数使用对于PHP来说标准的XML DOM库读取剧集信息的XML文件。它迭代根节点的所有子节点并提取它们的季数、标题、播放日期和剧集属性,以及包含摘要的节点的文本。然后将所有数据作为一个哈希表附加到剧集数组,该数组是一个成员变量。

然后,find函数搜索剧集列表以便使用与标题和摘要匹配的简单正则表达式来查找匹配项。任何匹配的剧集都被附加到一个数组,然后返回给调用方。如果数组为空,则没有发现匹配项。

现在有了数据,下一步就是开始构建ajax响应程序,您的即时UI将调用该响应程序来检索数据。

创建Ajax响应页面

第一个版本的UI针对Ajax请求使用html响应。此方法是实现即时UI的最简单的方式。即时UI WEB页面采用搜索关键词并使用该关键词对服务器发出Ajax 请求。然后,服务器格式化组成该响应的HTML块并将其返回到页面。在一个简单的调用中,即时UI web页面中的代码将使用更新的 HTML 替换该页面的一部分。

在本文的后面,我会演示使用来自服务器的XML响应和JSON响应,但是现在,为了简单起见,我们从HTML版开始。

您首先需要的是HTML响应页面。此页面接受来自请求的查询字符串。然后使用该字符串调用Simpsons类来搜索剧集。接着,将已返回的剧集数组格式化 HTML。此代码位于清单 3中。

清单 3. HTML Ajax 响应页面  <?php include 'Simpsons.php';   $s = new Simpsons();  $episodes = $s->find( $_REQUEST['q'] );  if ( count( $episodes ) == 0 ) {  ?> No results found  <?php   } else {  ?> <table> <?php foreach( $episodes as $e ) { ?> <tr><td class="episode"><b><?php echo( $e['title'] )   ?></b> -    Season <?php echo( $e['season'] ) ?>    Episode <?php echo( $e['episode'] ) ?> -    Aired on <?php echo( $e['aired'] ) ?></td></tr> <tr><td class="summary"><?php echo( $e['summary'] )   ?></td></tr> <?php } ?> </table> <?php }  ?>

在顶部,清单 3包括Simpsons类。然后该代码创建该类的一个新实例并进行find调用。之后它会查看响应是否为空,以及是否返回 “No Results Found”;否则,它遍历这些结果并组成一个结果表。

为了测试该页面,只需转到您的Web浏览器并请求该网页。您可以在图 1中看到输出。

此时,您拥有开始构建即时搜索UI所需要的所有东西。

构建即时搜索UI

使用javascript jQuery库可以轻松构建即时搜索UI。查看清单 4,您就可以明白我的意思。

清单 4. 使用HTML响应的即时页面  <html><head> <script src="jquery-1.4.2.min.js"></script> <link rel="stylesheet" href="styles.CSS" type="text/css" /> <title>Instant Search - HTML Based</title> </head> <body> Simpsons Search: <input type="text" id="term" /> <div id="results"> </div> <script> $(document).ready(function() {  $('#term').keyup(function() {    $.get('search_html.php?q='+escape($('#term').val()), function(data) {      $('#results').html(data);    } );  } );  } );  </script> </body> </html>

在页面的顶部,清单 4包括jQuery库和CSS样式表,以使输出更美观。页面的主体包括搜索关键词的输入字段和保存此输出的结果div。

工作的大部分都在页面底部的 JavaScript 部分完成。它首先调用文档中的 ready 函数。此调用可确保在页面准备就绪前都不执行内部 JavaScript。内部 JavaScript 使用搜索关键词输出对象中的 keyup 函数来监控搜索关键词字段中的关键字键入。在文本字段变更时,将对服务器调用 Ajax get 方法。通过使用 html 函数,来自此调用的数据响应将用于填充结果元素。

如果JavaScript代码看上去像线路噪声,没关系。这实际上就是JavaScript的技术现状,该代码需要复查线路,所以代码规模最好保持得小一些。

虽然您可以在没有jQuery库的情况下完成这些工作,但是使用该库的价值在于,该代码非常简洁且所有跨平台工作都已经为您完成。您不必担心Internet Explorer与Safari或Firefox;只需编写一次代码然后将其用于任何地方。

要测试该库,请在Web浏览器中建立即时搜索UI。在图 2中,您可以看到类似的东西。

图2显示了我输入少量字符后的界面。在我键入关键词 “frink” 之后,您可以在 图 3 中看到结果。

图3显示了在标题或两集概要中出现 “frink”。可笑的数据!Frink教授(到目前为止节目中的最佳角色)出现在不止两集中。但这仍是非常奇妙。本地计算机上的响应时间是非常出色的,即使服务器代码解析是通过840K的XML。

现在您可能想通过在每一个按键之间放置一个延迟并在您真正发出请求时来控制请求的数量。在清单 5中,更新的代码可以执行此操作。

清单 5. 使用带有延迟的 HTML 响应的即时页面  <html><head> <link rel="stylesheet" href="styles.css" type="text/css"> <script src="jquery-1.4.2.min.js"></script> <title>Instant Search - HTML Based With Delay</title> </head> <body> Simpsons Search: <input type="text" id="term" /> <div id="results"> </div> <script> delayTimer = null;   function getResults() {    $.get('search_html.php?q='+escape($('#term').val()), function(data) {      $('#results').html(data);    } );    delayTimer = null;  }   $(document).ready(function() {  $('#term').keyup(function() {    if ( delayTimer )       window.clearTimeout( delayTimer );    delayTimer = window.setTimeout( getResults, 200 );  } );  } );  </script> </body> </html>

此代码在用户按键时创建一个计时器。当该计时器在 200 毫秒后停止时,请求发出。如果另外一次击键在计时器停止之前,则原来的计时器将被取消,同时创建一个新的计时器。其结果就是在用户停止了键入之后,计时器停止 200 毫秒。虽然该界面始终感觉像原来的,但是向服务器发出请求的数量会大幅减少,尤其是在用户快速键入的时候。

虽然我们可以到此为止,但是实际上有另外两种方式来进行此即时过程。

迁移到XML

第一种方式是使用XML作为您从服务器到客户端的传输语法。此处的想法是服务器提供一个通用XML端点,任何流程都可以使用该端点来执行查询,并且您的客户端足够智能,能够读取XML并以其想要的方式来格式化它。

要变成XML,首先要创建如清单 6中所示的新服务器页面。

清单6. XML Ajax页面  <?php include 'Simpsons.php';   header( 'Content-type: text/xml' );   $s = new Simpsons();  $doc = new DOMDocument();  $root = $doc->createElement( 'episodes' );  $doc->appendChild( $root );  foreach( $s->find( $_REQUEST['q'] ) as $episode ) {     $el = $doc->createElement( 'episode' );     $el->setAttribute( 'title', $episode['title'] );     $el->setAttribute( 'episode', $episode['episode'] );     $el->setAttribute( 'season', $episode['season'] );     $el->setAttribute( 'aired', $episode['aired'] );      $tn = $doc->createTextNode( $episode['summary'] );     $el->appendChild( $tn );      $root->appendChild( $el );  }  print $doc->saveXML();  ?>

虽然搜索仍然一样,但是您格式化结果的方式变了。现在,该代码创建了XML文档并将节点附加到其上,从而保存所有返回的数据。然后在脚本的末尾,它只是将XML DOM保存为字符串。请注意在脚本的顶部,在导出XML而非HTML时,还要将内容类型设置为文本/xml。

如果在您的Web浏览器中导航到此页面,则您会看到类似图 4中的情况。

不过,一些浏览器可能以更结构化的方式显示已返回的文本。如果您想查看原始的源XML,则您可以选择View - Source以便看到类似图 5中的窗口。

如您所见,该脚本创建了一些良好格式化的XML,准备好供新的客户端代码使用。

解析XML(而不是直接使用 HTML)的新客户端代码位于清单 7中。

清单 7. 使用 XML 的即时搜索页面  <html><head> <script src="jquery-1.4.2.min.js"></script> <link rel="stylesheet" href="styles.css" type="text/css" /> <title>Instant Search - XML Based</title> </head> <body> Simpsons Search: <input type="text" id="term" /> <table id="results"> </table> <script> $(document).ready( function() {  $('#term').keyup( function() {   $.get('search_xml.php?q='+escape($('#term').val()), function(data) {  html = '<table id="results">';  $(data).find('episode').each( function() {       var ep = $(this);           html += '<tr><td class="episode"><b>'+           ep.attr('title')+'</b>&nbsp;';           html += 'Season '+ep.attr('season')+'&nbsp;';           html += 'Episode '+ep.attr('episode')+'&nbsp;';           html += 'Aired '+ep.attr('aired')+'</td></tr>';           html += '<tr><td class="summary">'+           ep.text()+'</td></tr>';     } );     html += '</html>';     $('#results').replaceWith( html );   } );  } );  } );  </script> </body> </html>

用于监控击键和发出Ajax请求的客户端代码几乎完全一样。所不同的是不同的URL获取XML数据而不是HTML数据。

在数据返回以后,该代码使用jQuery来寻找所有剧集标签。然后它可格式化大量XML并使用replaceWith函数来用新表替换旧表。由于使用了jQuery,此代码比在使用浏览器的原生 DOM 功能时更容易使用。

传输数据的另一种方式是通过JSON(JavaScript对象符号)。

迁移到JSON

在Web 2.0的世界中,JSON是一种非常流行的移动数据的方式。它小巧、方便、快捷,便于浏览器读取,因为需要做的所有操作就是评估已返回的JavaScript代码。创建JSON也很简单,就如您在清单 8中的Ajax搜索页面的JSON版本中所见的那样。

清单8. JSON Ajax页面  <?php include 'Simpsons.php';   header( 'Content-type: application/json' );   $s = new Simpsons();  print json_encode( $s->find( $_REQUEST['q'] ) );  ?>

您只需使用json_encode函数来将已返回的数组转变为JSON代码。如果您好奇的话,这里也存在一个可将JSON转回为PHP基本类型的json_decode函数。大多数流行语言都具有与这里一样简单的JSON机制,可以将基本数据结构转化为JSON,或者转换出JSON。

如果您在浏览器中查看JSON页面,则您会看到类似图 6中的响应页面。

虽然本页面可能不会太吸引人们的目光,但是对于浏览器中的JavaScript解译器来说,此页面看起来非常易于阅读。用于读取 JSON 格式化输出的相应的即时UI web代码位于清单 9中。

清单 9. JSON 即时搜索 UI  <html><head> <script src="jquery-1.4.2.min.js"></script> <link rel="stylesheet" href="styles.css" type="text/css" /> <title>Instant Search - JSON Based</title> </head> <body> Simpsons Search: <input type="text" id="term" /> <table id="results"> </table> <script> $(document).ready( function() {  $('#term').keyup( function() {   $.get('search_json.php?q='+escape($('#term').val()), function(data) {     html = '<table id="results">';     $.each( data, function( ind, ep ) {           html += '<tr><td class="episode"><b>'+ep.title+'</b>&nbsp;';s           html += 'Season '+ep.season+'&nbsp;';           html += 'Episode '+ep.episode+'&nbsp;';           html += 'Aired '+ep.aired+'</td></tr>';           html += '<tr><td class="summary">'+ep.summary+'</td></tr>';     } );     html += '</html>';     $('#results').replaceWith( html );   } );  } );  } );  </script> </body> </html>

此代码非常类似于 XML 代码,不同的是您可以对返回的数组使用 jQuery each 函数,然后使用点符号来访问数据中的所有重要关键字(也就是说,标题、剧集、摘要等等)。

现在您具有:可以用作您自己的工作起始点的即时搜索功能的初步实现。

与Google的开发人员所做的相比,此实现具有三个主要区别。首先是缩放。他们每天要处理数十亿的搜索,现在通过每一次击键他们可处理数十亿单独的小搜索。虽然存在许多有关这方面的问题和解决方案,但是在这种情况下您至少有一件事情要去做 &mdash; 浏览器缓存。如果用户键入相同的关键词两次,由于浏览器缓存的缘故,实际上仅进行一个请求,因为第二次发出请求时浏览器返回缓存的数据。

Google 所作的另外一件事情是预取结果。例如,如果您键入 “mov”,则暗示您正在寻找 “movies”,进行此搜索并通过用于您缺少的 “ies” 的灰色文本指示这点。

第三个区别是对于分页的支持,这相当容易解决。您所要做的就是在页面的底部为页面链接添加一些 JavaScript,然后在用户单击以从第一页浏览到任何随后页面时调用此脚本。

关于“PHP+XML+jQuery如何实现即时功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: PHP+XML+jQuery如何实现即时功能

本文链接: https://www.lsjlt.com/news/79529.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • PHP+XML+jQuery如何实现即时功能
    这篇文章将为大家详细讲解有关PHP+XML+jQuery如何实现即时功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Google的即时功能是一种新的搜索增强功能,随着您...
    99+
    2022-10-19
    php xml
  • 如何在PHP中实现即时通讯功能
    随着社交媒体和移动互联网的迅速发展,即时通讯(IM)已经成为人们生活中不可或缺的一部分。开发者们也开始向自己的网站或应用程序中添加IM功能,以提供更好的用户体验和互动性。PHP作为一种流行的服务器端编程语言,学会如何在其中实现IM功能可以为...
    99+
    2023-05-21
    PHP 实现 即时通讯
  • jQuery如何实现计时器功能
    小编给大家分享一下jQuery如何实现计时器功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在写项目的过程中遇到要前端60秒发...
    99+
    2022-10-19
    jquery
  • 使用php开发Websocket,实现即时聊天功能
    使用PHP开发Websocket,实现即时聊天功能Websocket是一种全双工通信协议,适用于实时通信场景,比如即时聊天、实时数据更新等。PHP作为一种流行的服务器端编程语言,也可以通过相关库和扩展来实现Websocket功能。在本文中,...
    99+
    2023-12-09
    PHP开发 Websocket实现 即时聊天功能
  • Html5 FileReader如何实现即时上传图片功能
    今天小编给大家分享一下Html5 FileReader如何实现即时上传图片功能的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有...
    99+
    2022-10-19
    html5 filereader
  • jQuery如何实现延时加载功能
    这篇文章将为大家详细讲解有关jQuery如何实现延时加载功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery延时加载功能$(document).ready(fu...
    99+
    2022-10-19
    jquery
  • PHP实现即时通讯聊天消息发送功能
    随着互联网的不断发展,即时通讯已经成为现代社会日常沟通的主要形式,因此实现即时通讯聊天消息发送功能成为了各个网站和应用程序的必备特性。本文将介绍PHP实现即时通讯聊天消息发送功能的步骤和注意事项。一、数据库创建首先,我们需要创建一个数据库来...
    99+
    2023-05-22
    PHP 实时通讯 消息发送
  • nodejs如何结合Socket.IO实现的即时通讯功能
    这篇文章主要为大家展示了“nodejs如何结合Socket.IO实现的即时通讯功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“nodejs如何结合Socket...
    99+
    2022-10-19
    nodejs socket.io
  • AndroidFlutter基于WebSocket实现即时通讯功能
    目录前言联系人界面构建聊天界面的实现消息界面的 MultiProvider运行效果前言 我们在前面花了很大篇幅介绍 Provider 状态管理,这是因为在 Flu...
    99+
    2022-11-13
    Flutter WebSocket 即时通讯功能 Flutter WebSocket 通讯 Android WebSocket 即时通讯
  • php如何实现即时通讯实例
    本篇内容介绍了“php如何实现即时通讯实例”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!php实现即时通讯实例的方法:1、搭建websock...
    99+
    2023-07-04
  • 如何利用微信小程序和php实现即时通讯聊天功能
    目录一、PHP7安装Swoole扩展1、自定义安装2、宝塔面板安装PHP swoole扩展二、配置nginx反向代理三、微信小程序socket合法域名配置四、效果演示和代码1、小程序...
    99+
    2022-11-13
    微信小程序实时聊天 php即时通讯聊天源码 php聊天源码
  • jQuery+Ajax+PHP如何实现“喜欢”评级功能
    这篇文章给大家分享的是有关jQuery+Ajax+PHP如何实现“喜欢”评级功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实现过程本文基于jQuery,通过PHP与mysql...
    99+
    2022-10-19
    php jquery ajax
  • Android Flutter基于WebSocket怎么实现即时通讯功能
    这篇文章主要介绍“Android Flutter基于WebSocket怎么实现即时通讯功能”,在日常操作中,相信很多人在Android Flutter基于WebSocket怎么实现即时通讯功能问题上存在疑惑,小编查阅了各...
    99+
    2023-06-29
  • 利用java怎么实现一个即时提交功能
    本篇文章给大家分享的是有关利用java怎么实现一个即时提交功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。具体内容如下package com.tian.batis;impor...
    99+
    2023-05-31
    java ava
  • jquery如何实现弹窗功能
    这篇文章主要介绍jquery如何实现弹窗功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果图:代码如下:<!DOCTYPE HTML> <html&g...
    99+
    2022-10-19
    jquery
  • jquery如何实现筛选功能
    这篇文章主要介绍jquery如何实现筛选功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! jquery实现筛选功能的方法:1、使用jquery的appe...
    99+
    2022-10-19
    jquery
  • jquery如何实现过滤功能
    本篇内容介绍了“jquery如何实现过滤功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
    jquery
  • jQuery如何实现扩展功能
    这篇文章将为大家详细讲解有关jQuery如何实现扩展功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。扩展我们需要的功能$.extend({ min: func...
    99+
    2022-10-19
    jquery
  • jquery如何实现全选功能
    这篇文章主要介绍“jquery如何实现全选功能”,在日常操作中,相信很多人在jquery如何实现全选功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jquery如何实现全选功能”的疑惑有所帮助!接下来,请跟...
    99+
    2023-07-02
  • jQuery如何实现弹出框功能
    本篇内容介绍了“jQuery如何实现弹出框功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在我们构建网站或应用程序时,经常需要使用弹出框来...
    99+
    2023-07-06
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作