使用jQuery和PHP构建一个受Ajax驱动的Web页面

大多数 PHP 开发人员都是以老式的方法学习技能。他们一般先学习如何定义和构建简单 的 PHP 页面,然后再了解如何将这些页面连接到简单的 MySQL 表,于是就可以由此进行自 己的开发了。随着技能水平的提高,他们还逐渐学会了如何创建更为复杂的 PHP 功能,以及 如何连接 MySQL 内的表并执行其他高级任务。

在这个过程中,他们有可能还会掌握 一些客户端技能来将 Web 应用程序投入使用。也有可能学会有关 XHTML 或 CSS 甚至一些 JavaScript 编程的知识。随着所参与项目的种类的增多,他们甚至有机会接触到 Ajax 以便 为您的 Web 应用程序赋予 Web 2.0 或 “桌面” 的感觉。不过,如果您初次使 用 Ajax 的经验与我类似的话,您可能已经做了太多的工作 — 手动实现各种函数、经 历创建一个受 Ajax 驱动页面的艰难过程。

对于某些人而言,Ajax 仍是个谜。它似 乎是 Web 开发/交互社区中的 “酷小孩(cool kid)” 和 “坏小孩(bad boys)” 才会做的事情,而他们则没有时间和耐心或者能力去了解并使用它。这真是 个遗憾,因为很多客户的确喜欢添加 Ajax 风格的功能 — 它让 Web 应用程序更容易 使用。如果您是这些 PHP 开发人员中的一员,也请不要害怕:读完本文,您所掌握的知识足 以让您成为一名真正的 Ajax 专业人士。

本文展示了如何使用 jQuery 来向 PHP Web 应用程序轻松添加 Ajax 功能。我们将使用 PHP 和 MySQL 构建一个简单的 Web 应用程序 — 一个包含名字和电话号码的电话本。这个应用程序具备预期的所有标准功能 — 比如可以查找名字或电话号码、具有 MySQL 表等。接下来,还将向应用程序添加 jQuery,以便能够在键入时实时查找名字和电话号码。在完成上述任务后,您也就具备了有 关 jQuery 及 Ajax 的充足的基础知识。

何为 Ajax?

描述 Ajax 的最佳方法 是将其与传统方式进行对比。大多数 Web 页面和应用程序都在同步模式下工作。单击一个链 接或表单的提交 按钮后,请求就被发送给服务器,而此服务器之后会处理该请求并发送回一 个响应。总结此模型的最好方法是 “单击、等候、查看”。这就是您所熟知的一 个永不终止的漂洗-和-重复(rinse-and-repeat)的循环过程。换言之,如果页面需要经常 显示被更新的信息,那么就必须放上某类自动刷新 hack,或者是让用户刷新或单击一个链接 执行刷新。

Ajax 改变了这一切。Ajax 中的第一个字母 A 代表的是 异步。Ajax 允 许以任何一种编程语言创建页面,然后用来自数据库或其他后端服务器过程的信息刷新该页 面的不同部分。比如,假如说您有一个电子商务站点,上面显示了所销售的产品。在每个产 品页面,都有几个常见项目:标题、销售说明、缩略图图片、库存数量。

假如,您想 让网站的访问者能够获得库存数量的最新信息。您就可以添加一个 Ajax 函数,该函数能运 行包含 MySQL 查询的一个单独的 PHP 页面,然后就可重新填充原始页面上的信息,无需用 户输入,也不必考虑事件的单击-等待-查看模式的同步性。

Ajax 中的 j 代表的是 JavaScript,它是所有行为的驱动力。这既是好事也是坏事 — 好的一面是由于是客户 端代码,所以它是可移植的,而且不会影响到服务器;对 PHP 开发人员而言不好的一面是它 完全不同于他们所习惯使用的那个环境。这就需要像 jQuery 这样的工具和框架来大大简化 您与 Ajax 交互的方式,加快代码完成的进度。

时间: 2024-09-17 04:35:39

使用jQuery和PHP构建一个受Ajax驱动的Web页面的相关文章

asp net 管理系统-求一个简单的asp的web页面管理系统,只要求实现增删改查就行

问题描述 求一个简单的asp的web页面管理系统,只要求实现增删改查就行 求大神发一个初学者的管理给我,顺带讲解讲解,实在做不出来....................qq:732796124

Ajax驱动的Web站点

ajax|web|站点 最近,许多Web站点开始在开发人员社区当中引起关注.这些站点独特之处在于,它们更像是桌面应用程序而非Web应用程序.当您与它们交互时,它们可以快速在浏览器显示无穷的信息而又无需重新加载页面.  例如,在Google Maps站点(http://maps.google.com/),您可以单击地图,缩小或者放大,然后随心所欲地来回移动鼠标.浏览器会连续地从服务器读取数据,但并不需要刷新浏览器.它们使用的不是applet或者类似Flash的其他程序.那么,它们是如何工作的? 下

前端的小玩意(9.5)——做一个仿360工具箱的web页面(完结篇,可以跑起来的工具箱)

DEMO网址: http://jianwangsan.cn/toolbox (五)添加.点击和移动的逻辑 我反思了一下,在(四)中我写的并不好,事实上,无论是大按钮,还是被添加到我的工具,或者是添加到常用工具栏,他都是一个按钮,因此,应该共享状态,即他们属于同一个tool实例,并能互相影响.   需求分析: 在重写Tool类之前,需要明确分析按钮的逻辑. 在全部工具页面: ①当按钮未被添加时,鼠标移动上去会有添加按钮显示: ②当按钮未被添加时,鼠标无论点击按钮本身还是点击添加按钮,都执行添加逻辑

前端的小玩意(9.4)——做一个仿360工具箱的web页面(自动生成所有图标,对图标添加响应逻辑)

DEMO网址: http://jianwangsan.cn/toolbox (四)制作JSON,自动将图标填充进所有工具 首先是JSON,因为工具很多,所以JSON内容很长. 具体而言,JSON是一个数组中的对象(只有这一个对象),他有两个属性:BigImg和CommonImg. 这两个属性都是数组类型: BigImg里面,他用于存放最上面的三个大图标: CommonImg里面,存放其他工具图标. BigImg单个数组元素的结构如下: [javascript] view plain copy  

前端的小玩意(9.1)——做一个仿360工具箱的web页面(Tab按钮切换)

需求: ①写一个web版的360工具箱,示意图如下:   ②无左上返回按钮,右上按钮有皮肤切换,下拉框(但无点击逻辑):   ③按钮点击有事件,但事件是console.log(按钮名):   ④可以在全部工具和我等工具自由切换:   ⑤可以点击左下角的编辑,然后根据实际表现设置:   ⑥可以在全部工具里面,点击按钮,然后添加到我的工具这边来:   ⑦效果尽量与原图相同,只使用jquery库:   效果网址: http://jianwangsan.cn/toolbox         (一)tab

前端的小玩意(9.2)——做一个仿360工具箱的web页面(全部工具里面的模板)

DEMO: http://jianwangsan.cn/toolbox (二)全部工具里面的按钮和样式 我将他拆成五部分:   第一部分是上面的大按钮那一排: 第二部分是小按钮: 第三部分是一条颜色很淡的线,他只在app有多行的情况下,在行间有: 第四部分是标题: 第五部分是右边的滚动条:   ①为了方便模块化开发,我先制作模板,然后实际编写代码的时候,根据样式已经设置好的模板,来添加内容,这样方便调试和制作   ②大按钮: 先分为整体和具体每个按钮: 每个按钮分为背景图.遮罩层(下半部分的灰色

前端的小玩意(9.3)——做一个仿360工具箱的web页面(我的工具里的模板和样式)

(三)我的工具页面布局 如图:   首先将其分为二部分: 第一部分是上方整体红色方框区域: 包含若干个独立按钮,按钮分为图片和下方文字两部分:   第二部分是下方蓝色方框区域: 包含左方的编辑按钮和右方的四个快捷按钮区域: 左方是图标和文字,图标分为按下和非按下状态: 右方是左边的文字和右侧的按钮,按钮又分为图标和文字.按钮在无图标时有占位图标.     先上模板: [javascript] view plain copy   //我的工具,和之前的div.toolbox-all平级   div

如何构建HTML 5 Web页面

HTML 5是时下Web开发领域炒得火热的一个术语,是的,很多人都看好它,也有很多业内知名公司开始正式使用HTML 5重新构建自己的网站,如YouTube开始使用HTML 5视频,Google已经弃用自家的Gears,开始全面拥抱HTML 5实现离线解决方案,各大浏览器厂家也纷纷开始支持HTML 5,连被人诟病的微软也声称要在IE 9中增加对HTML 5的支持.本文打算为大家详细介绍一下如何构建一个完整的HTML 5 Web页面,以加深对HTML 5的理解. HTML 5有何不同? 首先我们要明

使用Rico JavaScript库、ColdFusion MX 7和Windows Indexing Service构建一个

使用Rico JavaScript库.ColdFusion MX 7和Windows Indexing Service构建一个启用Ajax的搜索页面 几个月前,我和一些同事讨论关于将一个搜索工具添加到 Intranet 中(作 为一个向导)并将其扩展到企业网站中的可能性.此提议的主要目标之一是弄清 楚哪些访问者在查找 Web 内容并相应地改变了内容.我们中的一些人构想了一 个完全自定义的解决方案(我不是在开玩笑).他们建议在数据库服务器上构建 表以存放关键字以及与其相关的页面地址.关键字的提取将