/images/rss.gif)
Ajax et Jquery : Des techniques et des exemples
Merci au patient travail de : http://sixrevisions.com (source : juin 2008)
Voir aussi l’excellent sites avec aides, manuel, liens et tutos en français: Jarodxxx
« Ajax allows for rich-internet applications that mimic the responsiveness and complex user interfaces typically associated with desktop applications. Moving applications to the web browser opens many possibilities, including the ability to save user data, connecting with other users for collaboration and sharing, and making deployment and using the application easier since web browsers are standard-issue with most computers regardless of operating system.
The Taming of the Shrew movie If you’re interested in expanding your understanding of Ajax techniques and practices, check out these 25 hand-picked Ajax articles and tutorials that outline various methods and concepts involved in the development of Ajax-based applications. Though most are geared for budding and intermediate developers, veterans might find a trick or two they haven’t encountered before.
1. Ajax RSS reader
Build a simple RSS reader that takes remote XML data from RSS feeds using Ajax, PHP, and MySQL. This example allows users to view feed content from multiple sources in one page. At the bottom of the article, you’ll find an animated demonstration of the RSS reader.
2. Ajax Desktop Tutorial
This tutorial is a step-by-step guide on how to create a desktop/homepage similar to Pageflake and Netvibes. The goal of this tutorial is to showcase some common techiques involved in developing web-based applications like manipulating the Document Object Model (DOM), listening to events (i.e. certain mouse movements), and working with remote data.
3. Ajax for Chat
Learn to build a simple web-based chat client using asynchronous JavaScript, XML, and PHP. The tutorial’s example utilizes the Prototype JS framework, MySQL, and PHP.
4. Create your own information space with Ajax and del.icio.us
This article outlines the basic foundations of using Ajax alongside an API service. It uses the del.icio.us API, but the methods and concepts can be adapted to other popular services such as Digg’s or Flickr’s. It’s an essential resource for those contemplating on creating web applications that use remote XML data – a couple of live examples are popurls and SocialBlade, which obtains information from social media sites using available API services. This tutorial requires you to register (for free).
5. Ultra-lightweight Charts For AJAX
See how to create a super-lightweight (1.78 KB) charting component using Flash with Ajax. The example allows you to generate visual graphs using dynamically-loaded data. The solution involves ActionScript-JavaScript communication, and covers the use of the setData and setStyle ActionScript methods for generating and styling the charts.
6. Quick Calendar Using AJAX and PHP
His Name Was Jason: 30 Years of Friday the 13th ipod 
Learn how to create a calendar component using Ajax and PHP. Ajax is used for navigating through the calendar months without refreshing the page.
7. How to integrate Google Calendar in your website using AJAX
This tutorial shows you how to create a web page component that calls a publicly available Google calendar. Google Calendar allows you to easily create, share, and manage events and is an excellent feature for community websites.
8. Edit In Place with AJAX Using jQuery
In this example, users are given the ability to edit the XHTML of the web page they’re currently viewing. The example is a proof-of-concept – presenting how this functionality can be achieved using jQuery. Normally, you’d want to send the user’s edits to server-side code to perform processes such as validation or saving the changes in a database.
9. Creating an AJAX Rating Widget
Learn the concepts of creating a rating system without prompting the user to click a submit button or refreshing the page. The tutorial showcases how you can do this in a variety of ways by including examples for the following four JavaScript frameworks/libraries: Dojo, jQuery, mootools, and Prototype JS.
10. AJAX file upload tutorial
In this tutorial, you’re shown how to create a file uploader. The tutorial uses JavaScript and PHP.
11. Use AJAX and PHP to Build your Mailing List
This tutorial from SitePoint walks you through the development of a mailing list form that accepts submissions asynchronously. It uses MySQL for storing the data inputted by the user and Prototype JS for simplifying Ajax requests and binding event handlers.
12. Safer Contact Forms Without CAPTCHAs
One way to reduce spam from public web forms is to implement a system to verify if the submitter is human by using image CAPTCHAs. Problems arise with accessibility when individuals using visual assistive technologies are presented with the test (and thus cannot continue on). This simple technique uses an Ajax call to a server-side script to drop a cookie on the user’s computer.
13. Using AJAX with CAPTCHA
Avoiding the use of image-based CAPTCHAs is a good idea. With that said, many sites still prefer using this technique to distinguish between humans and computers. If forgoing web accessibility is appropriate for your situation, this article outlines a unique method for administering CAPTCHA tests. The user is presented with a sequence of descriptions (i.e. Animal, Costume, Boy), and asked to click on a set of images in sequential order. The clicks are recorded and validated, returning the appropriate status message. Though probably not an ideal solution to CAPTCHAs, it does outline a fundamental technique for developing responsive user interfaces – use it for inspiration.
14. Ajax-based login form
Create a basic login form that asynchronously validates the inputted data. The example uses the jQuery form plugin and PHP to process the request.
15. Nice Ajax effect for message box using Mootools
In this example, a message box that fades after a specified duration is displayed when the user clicks on the “save” button. This is a model for supplying users with the status of their request, and an real Ajax request should typically happen when the user clicks on the “save” button.
16. AutoCompleter Tutorial
Cry of the Owl The AutoCompleter tutorial teaches you how auto completion of input fields can be accomplished. The example uses jQuery, PHP, and MySQL.
17. Auto-populating Select Boxes using jQuery & AJAX
A key technique in Ajax applications is to populate content without a page refresh. In this tutorial, you’ll witness how this is done with a PHP and JavaScript (jQuery to make it easier).
18. Build an Ajax Dropdown Menu
Here’s a basic example of working with external data to load content into a drop-down menu – from our beloved Webmonkey. Though the example uses a text file, you can use your own data source when applying the technique to your own purposes.
19. Ajax/PHP Shoutbox Tutorial
Make an Ajax-powered shoutbox using PHP and JavaScript. This tutorial walks you through the server-side and client-side requirements of creating a shoutbox, which can be adapted to other functions such as a commenting system.
20. Building Tabbed Content
Learn how to build a tabbed content component with the data populated via Ajax. The tutorial uses PHP and Prototype JS.
21. How to Load In and Animate Content with jQuery
This step-by-step tutorial shows you how to load data into a web page using jQuery to handle the Ajax request and manipulation of the DOM.
Best practices and workaround techniques to common issues
22. The Hows and Whys of Degradable Ajax
This article discusses the concept of creating Ajax-based applications that degrades effectively when JavaScript is not detected, providing increased accessibility and bulletproof-ness. Completely successful degradation means that an application is still usable and information is still accessible without reliance to JavaScript or CSS.
23. Avoid unnecessary Ajax traffic with session state
This article presents a method for minimizing unneeded database/computational processes and avoiding large status updates if no changes have occurred. By using client cookies to keep track of the session’s state, you can cut down on processes that may be redundant. Though the article presents an example using Python for server code – the model remains the same in virtually any language you use.
24. A Better Ajax Back Button Solution
Here’s a workaround to issues pertaining to Ajax-loaded content breaking web browser controls and bookmarking capabilities. The solution involves firing off a function at a set interval that checks the #value of the URL, and then presenting the correct content. It restores the ability to bookmark the content. In Part 2 of the article, you’ll see a working example and additional discussion of this method.
25. Making Ajax Work with Screen Readers
One of the biggest drawbacks of loading content via Ajax is that it fails to indicate an update of the content to users who are reliant on screen readers. For people who are not visually-impaired – messages and status indicators can be visual queues that the content is changing; this isn’t effective for users with visual impairments. This article draws out the underlying issues and proposes techniques to make Ajax-based applications work with screen readers.
There we have it… some brilliant Ajax techniques and examples. I hope you’ve found some links of interest that will help you in a future project or in advancing your command of Ajax.
20 Sites pour apprendre l’Ajax
Ajax (asynchronous JavaScript and XML) is a technology that allows for for highly-interactive and responsive browser-based applications. By leveraging the XMLHttpRequest object, seamless communication with the server can be achieved for a smooth and dynamic user experience.
If you’ve ever wanted to learn about Ajax, there are many sites out there that’ll help you « grok » Ajax and the various technologies surrounding it. Here are 20 top-notch websites that cover the subject of Ajax.
1. Ajax resource center (developerWorks)
developerWorks, a resource center for developers and IT professionals by IBM, has a dedicated Ajax resource center that hosts plenty of tutorials on Ajax. developerWorks tutorials are in-depth and lengthy, and you can learn a variety of information and techniques from them such as creating RIA applications with jQuery and Ajax, learning about Ajax security tools, and building an Ajax-based chat system.
2. Mozilla Developer Center (AJAX)
The Mozilla Developer Center has an AJAX section that’s a great starting point for beginning developers or those that need to brush up on Ajax. The Getting Started guide on MDN is an excellent starting point to learn about the basic concepts of Ajax. Another MDN guide you might be interested in reading is the entry on XMLHttpRequest, the primary mode of communicating with server-side scripts in typical Ajax approaches.
3. AJAX Today
AJAX Today is a community-driven website where members can submit links on the topic of Ajax. AJAX Today organizes submitted links in useful categories such as AJAX Tutorials and Ajax Podcasts; you can subscribe to each individual category via RSS so that only topics that you’re interested in will be displayed in your RSS feed reader.
4. ajax.solutoire.com
ajax.solutoire.com is a large, one-page directory-style listing of online Ajax resources created by Software Engineer, Bas Wenneker. ajax.solutoire.com is conveniently sub-divided into various categories such as Ajax news and Ajax/JavaScript security. Bas Wenneker also runs Solutoire.com, a personal weblog that talks about web development topics such as JavaScript and MooTools.
5. SitePoint: JavaScript & Ajax Tutorials
SitePoint, a web publication focused on providing web professionals useful and relevant information, has a JavaScript & Ajax Tutorials section that’s great for developers who learn well by reading practical tutorials. You can follow along (and learn from) tutorials such as « Use AJAX and PHP to Build your Mailing List » and « Take Command with Ajax« .
6. Encosia
Encosia is a blog by Dave Ward, who writes about the subject of web development (primarily ASP.NET and Ajax). Encosia has plenty of tutorials that discuss topics such as how to display data updates in real-time and how to use jQuery for interactively searching data. Encosia is an top-notch resource on Ajax – especially for developers working with ASP.NET as you can read ASP.NET/Ajax-specific articles like « Are you making these 3 common ASP.NET AJAX mistakes?« .
7. Ajax Technology Center
The Ajax Technology Center is a part of the Adobe Developer Connection, a resource site for web developers and designers. The Ajax Technology Center provides handy articles and tutorials on topics such as Adobe AIR for Ajax developers and Adding Ajax components to Dreamweaver projects.
8. Ajax Blog
Ajax Blog is a weblog on the topic of Ajax. Ajax Blog has plenty of categories to help you quickly find specific information you’re looking for. If you’re searching for Ajax tutorials and examples, jump right to the Ajax Tutorials and Ajax Examples category.
9. AJAX Matters
AJAX Matters is a weblog on Ajax technology. Launched in 2004, AJAX Matters is one of the first blogs dedicated to discussing Ajax. They have plenty of helpful tutorials on matters like getting started with Ajax and PHP or learning about the Google Web Tookit
10. Ajaxonomy
Ajaxonomy is a blog by a group of web developers whose intent is to share and discuss information on Ajax. If you’re seeking out Ajax tutorials, you can go directly to blog posts tagged with Tutorials where you’ll find an aggregate of posts that either share tricks and techniques related to Ajax technologies (such as server-side caching in PHP) or reviews of tutorials elsewhere on the web.
11. Ajaxian
Ajaxian is the premier weblog dedicated to reporting new developments in Ajax. Ajaxian publishes a variety of regularly-updated Ajax topics, including a Tutorial topic which shares Ajax-related tips and tutorials. With a staff full of top web professionals in the field of web development, Ajaxian is a foremost resource for Ajax news and information.
12. Ajaxlines
Ajaxlines is a website that aims to provide its audience with Ajax-related news, resources, and tutorials. It reports on news and information from a wide variety of resources, and gives readers the opportunity to discover articles in one site.
13. AJAX Magazine
AJAX Magazine, which is part of the PHP Magazine Network, is a webzine that covers the subject of Ajax. There’s a wide range of categories to help you find information that you’re interested in including an Ajax tutorials category that reports on useful Ajax tutorials and more specific categories like the Ajax and .NET category.
14. InsideRIA
InsideRIA is an O’reilly Media community website on Rich Internet Applications (RIA for short). You will find a host of articles pertaining to building highly-interactive web applications such as writing your first YUI Application (YUI
is Yahoo!’s JavaScript library), and Ajax Frameworks for High Traffic Sites. Check out articles tagged with ajax to conveniently find Ajax-specific topics.
15. AJAX Impact
AJAX Impact is committed to delivering information on Ajax. Check out the Ajax Tutorial section to find a list of tutorials on Ajax. If you’re curious on finding examples of websites (organized into types of websites) be sure to go to the « Sites Using Ajax » section on AJAX Impact.
16. AJAXwith.com
AJAXwith.com is a community-driven site where you can submit resources on « Ajax with [fill in the blank] » (i.e. « Ajax with PHP »). They have an AJAX forum with close to 4,000 members which may be useful when you’re in need of help on a specific issue.
17. David Walsh Blog
Web developer David Walsh provides useful tips and tutorials for all levels of web designers and developers on his personal blog, David Walsh Blog
. He writes about a range of topics related to web development, and has an Ajax topic to help you speedily find articles that discuss Ajax. His tutorials on Ajax include « Ajax Username Availability Checker Using MooTools 1.2 » and « Periodical Ajax Requests Using MooTools 1.2« .
18. Ajax Projects
Ajax Projects is a directory-style listing of Ajax web projects. They have an excellent Tutorials section which lists plenty of Ajax-related tutorials from several resources such as « PHP ajax login form using Jquery« , « Google Analytics: Tracking AJAX and Flash« , and « How to structure your JavaScript code« .
19. Agile Ajax
Agile Ajax is a section on Pathfinder Development (a software development and UX design company) that shares information on the topic of Ajax. Some posts you’ll see in Agile Ajax include « App Security: Throw Out the Org Chart! » and « Scriptaculous: Fixing Hover After Highlight« .
20. Ajax Patterns
Ajax Patterns is a wiki-style, community-driven website for Ajax information. If you’d like to see common Ajax design patterns, check out the Examples entry. Ajax Patterns also has a section on Ajax demos which showcases demonstrations of Ajax patterns (great for individuals who want to see practical applications of Ajax techniques).
Si vous avez apprécié cet article, s'il vous plait, prenez le temps de laisser un commentaire ou de souscrire au flux afin de recevoir les futurs articles directement dans votre lecteur de flux.
/images/thumb1.gif)
/images/thumb2.gif)
/images/thumb3.gif)
Commentaires
Pas encore de commentaire.
Désolé, les commentaires sont clos pour le moment.