25个优秀的Ajax技术和示例

WebFX总裁。Bill在互联网营销行业有超过25年的经验,专门从事SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

Ajax允许富internet应用程序模仿通常与桌面应用程序相关联的响应能力和复杂的用户界面。将应用程序迁移到web浏览器提供了许多可能性,包括保存用户数据的能力,与其他用户连接以进行协作和共享,以及使应用程序的部署和使用更容易,因为web浏览器是大多数计算机的标准配置,无论使用哪种操作系统。如果您有兴趣扩展对Ajax技术和实践的理解,请查看这些内容25篇精心挑选的Ajax文章和教程概述了开发基于ajax的应用程序所涉及的各种方法和概念。

虽然大多数都是面向新手和中级开发人员的,但老手们可能会发现一两个他们以前没有遇到过的技巧。

1.Ajax RSS阅读器

Ajax RSS阅读器-截图构建一个简单的RSS阅读器,使用Ajax、PHP和MySQL从RSS提要获取远程XML数据。此示例允许用户在一个页面中查看来自多个源的提要内容。在本文的底部,您将看到RSS阅读器的动画演示。

2.Ajax桌面教程

Ajax桌面教程-截图本教程是一步一步地指导如何创建一个桌面/主页类似于Pageflake和Netvibes.本教程的目标是展示开发基于web的应用程序所涉及的一些常见技术,如操作文档对象模型(DOM)、监听事件(即某些鼠标移动)和处理远程数据。

  • Ajax桌面演示

3.Ajax聊天

学习使用异步JavaScript、XML和PHP构建一个简单的基于web的聊天客户端。本教程的示例使用了Prototype JS框架、MySQL和PHP。

4.使用Ajax和del.icio.us创建自己的信息空间

本文概述了将Ajax与API服务一起使用的基本基础。它使用del.icio.us API,但方法和概念可以适应其他流行的服务,如Digg的或Flickr的.对于那些打算创建使用远程XML数据的web应用程序的人来说,这是一个必不可少的资源——其中有几个实例popurlsSocialBlade使用可用的API服务从社交媒体网站获取信息。

本教程要求您注册(免费)。

5.用于AJAX的超轻量级图表

用于AJAX的超轻量级图表-截图了解如何使用Flash和Ajax创建超轻量级(1.78 KB)图表组件。该示例允许您使用动态加载的数据生成可视化图形。该解决方案涉及ActionScript-JavaScript通信,并涵盖了setData而且setStyle用于生成和样式化图表的ActionScript方法。

6.使用AJAX和PHP的快速日历

快速日历使用AJAX和PHP -截图了解如何使用Ajax和PHP创建日历组件。Ajax用于在不刷新页面的情况下导航日历月份。

  • 快速日历演示

7.如何集成谷歌日历在您的网站使用AJAX

如何集成谷歌日历在您的网站使用AJAX -截图本教程向您展示如何创建一个web页面组件,调用一个公开可用的谷歌日历。谷歌日历允许您轻松地创建、共享和管理事件,是社区网站的一个优秀功能。

  • AJAX日历演示

8.使用jQuery编辑在AJAX的地方

使用jQuery编辑在AJAX的地方-截图在本例中,用户可以编辑当前正在查看的网页的XHTML。这个例子是一个概念验证——展示了如何使用jQuery实现这个功能。通常,您希望将用户的编辑发送到服务器端代码,以执行诸如验证或将更改保存在数据库中的过程。

  • 就地编辑演示1
  • 就地编辑演示2

9.创建一个AJAX评级小部件

创建一个AJAX评级小部件-截图学习在不提示用户单击提交按钮或刷新页面的情况下创建评级系统的概念。本教程通过以下四个JavaScript框架/库(Dojo、jQuery、mootools和Prototype JS)的示例,向您展示了如何以各种方式实现这一点。

10.AJAX文件上传教程

AJAX文件上传器-截图在本教程中,您将了解如何创建文件上传器。本教程使用JavaScript和PHP。

11.使用AJAX和PHP构建邮件列表

本教程来自SitePoint介绍异步接受提交的邮件列表表单的开发过程。它使用MySQL存储用户输入的数据,使用Prototype JS简化Ajax请求和绑定事件处理程序。

12.没有验证码的更安全的联系表单

没有验证码的更安全的联系形式-截图减少来自公共web表单的垃圾邮件的一种方法是实现一个系统,通过使用图像验证码来验证提交者是否是人类。当使用视觉辅助技术的个体在测试时出现可访问性问题(因此不能继续)。这种简单的技术使用Ajax调用服务器端脚本,在用户的计算机上放置一个cookie。

  • 安全表格演示

13.使用带有验证码的AJAX

使用AJAX与验证码-截图避免使用基于图像的验证码是个好主意。尽管如此,许多网站仍然喜欢使用这种技术来区分人类和计算机。如果放弃web可访问性适合您的情况,本文概述了一种管理CAPTCHA测试的独特方法。

用户会看到一系列的描述(如动物、服装、男孩),并被要求按顺序点击一组图像。记录并验证单击,返回适当的状态消息。

虽然可能不是captcha的理想解决方案,但它确实概述了开发响应式用户界面的基本技术——使用它来获得灵感。

14.基于ajax的登录表单

基于ajax的登录表单演示-截图创建异步验证输入数据的基本登录表单。该示例使用jQuery表单插件和PHP来处理请求。

15.不错的Ajax效果的消息框使用Mootools

漂亮的Ajax效果的消息-截图在本例中,当用户单击“保存”按钮时,将显示一个消息框,该消息框在指定的持续时间后淡出。这是一种向用户提供请求状态的模型,当用户单击“save”按钮时,通常会发生真正的Ajax请求。

  • 不错的Ajax效果的消息框演示

16.自动完成教程

自动补全教程-截图AutoCompleter教程教你如何自动完成输入字段。本例使用jQuery、PHP和MySQL。

  • 自动补全教程演示

17.使用jQuery和AJAX自动填充选择框

使用jQuery和AJAX自动填充选择框-截图Ajax应用程序中的一项关键技术是在不刷新页面的情况下填充内容。在本教程中,您将看到如何使用PHP和JavaScript (jQuery使其更容易)来完成这一任务。

  • 自动填充选择框演示

18.构建一个Ajax下拉菜单

下面是一个使用外部数据将内容加载到下拉菜单的基本示例——来自我们心爱的Webmonkey。虽然示例使用文本文件,但在将该技术应用于自己的目的时,您可以使用自己的数据源。

19.Ajax/PHP大喊框教程

Ajax大喊框-截图使用PHP和JavaScript制作一个ajax支持的大喊框。本教程将介绍创建大喊框的服务器端和客户端需求,它可以适应其他功能,如注释系统。

  • AJAX大喊框演示

20.构建选项卡内容

构建标签内容-截图了解如何使用通过Ajax填充的数据构建选项卡内容组件。本教程使用PHP和Prototype JS。

  • 构建选项卡内容演示

21.如何加载和动画内容用jQuery

加载和动画内容-截图这个循序渐进的教程向您展示如何使用jQuery将数据加载到web页面中,以处理Ajax请求和DOM操作。

解决常见问题的最佳实践和变通技术

22.可降解Ajax的原理和原因

可降解Ajax的原理和原因-截图本文讨论了创建基于ajax的应用程序的概念,该应用程序在未检测到JavaScript时可以有效降级,从而提供更高的可访问性和防弹功能洛克.完全成功的降级意味着应用程序仍然可用,信息仍然可以访问,而不依赖于JavaScript或CSS。

  • 可降解Ajax演示

23.避免使用会话状态进行不必要的Ajax流量

本文介绍了一种方法,可以最大限度地减少不必要的数据库/计算进程,并在没有发生变化的情况下避免进行大的状态更新。通过使用客户端cookie来跟踪会话的状态,可以减少可能是冗余的进程。尽管本文给出了一个使用Python进行服务器代码的示例,但在您使用的任何语言中,模型都是相同的。

24.一个更好的Ajax后退按钮解决方案

这里有一个解决ajax加载内容破坏web浏览器控件和书签功能的方法。解决方案包括在设定的时间间隔内触发一个函数来检查#价值,然后显示正确的内容。它恢复了为内容添加书签的功能。

在本文的第2部分中,您将看到一个工作示例和关于此方法的其他讨论。

25.让Ajax与屏幕阅读器一起工作

让Ajax与屏幕阅读器一起工作-演示截图通过Ajax加载内容的最大缺点之一是,它无法向依赖屏幕阅读器的用户指示内容的更新。对于视力正常的人来说,消息和状态指示器可以是内容正在变化的可视队列;这对有视觉障碍的用户无效。本文指出了潜在的问题,并提出了使基于ajax的应用程序与屏幕阅读器一起工作的技术。

现在我们有了一些出色的Ajax技术和示例。我希望您已经找到了一些感兴趣的链接,这些链接将对您将来的项目或提高您对Ajax的掌握有所帮助。

你有自己最喜欢的链接吗?让我们在评论区留言看看吧。

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!