Ajax examples (XMLHttpRequest examples), code snippets and proof of concepts - the links below should help get you started on building your own functions with XMLHttpRequest and Ajax.
A cool little blog post and demo that Retrieves an xml atom feed and xsl stylesheet with XMLHttpRequest()
.
An example of using XMLHTTP to perform real time data validation, in this example for validating data entered into a user registration form. The example focusses on Microsoft and ASP.
XMLHttpRequest is one of modern DHTML's best kept secrets.
- Haha, not anymore! Simon Willison offers up a little code that takes an HTML fragment, fetched via xmlhttp.open
, and inserts it into an element with a specified id. Some good links and comments follow the article.
Paul James gives the basics of getting started with XMLHttpRequest and using REST for attaching the client-side to the server.
He builds an example where, upon entering a postal code and pushing a button, a form queries the server for the rest of the address information and fills in the appropriate fields when the data is returned.
Jim Ley provides his overview of the XML HTTP request object, getting into some browser details and detection before providing some examples and getting into using XMLHTTP with google's SOAP API.
Drew McLellan provides an excellent overview of the basics of using XMLHttpRequest offering up a simple, well documented example used for checking if a username is available (similar to g-mail).
Three examples of XMLHttpRequest in use: autocomplete, live search, and live action.
From the site: This library is meant to simplify and unify the code necessary to successfully send and receive simple data via XMLHTTP.
Two scripts that use XMLHttpRequest: 1 - a javaScript interface to the languid.cantbedone.org API and 2 - a javaScript interface to the del.icio.us API.
Apples page on the the XMLHttpRequest object, covering object creation, methods and properties in addition to security issues. They build an example for reading XML data, by retrieving iTunes RSS feeds that you select from a dropdown menu.
The wiki page for the livesearch function. From the page: On the client side, we use XMLHttpRequest for sending the request to the server. There we have a little PHP script, which returns a small HTML file (http://blog.bitflux.ch/livesearch.php?s=PHP ) . This is then inserted into the page with some DOM manipulation.
This article provides an ASP.NET 2.0 angle of Google Suggest along with a short little look at the history of javascript, frames, remote scripting and XmlHttp + XMLHttpRequest.
A nice overview of the history and a good breakdown how the Suggest feature works.
From the site: Sajax makes it easy to call PHP functions from your webpages via JavaScript without performing a browser refresh
. Worth checking out and having a play with.
From the site: This is my take on Google Suggest only with Amazon so I've called it "Amazon Zuggest".
Head on over and give this a try.
Francis writes "The Javascript runs in the browser and fires every so often, looks for something to search on, it shoots a request using XMLHttp to my webserver, which in turn creates a SOAP message that gets sent to Amazon. They send back the content and it's formatted on the server, then streamed to the browser. All in the blink of an eye.
This is a cool little app. When you are done searching, have a hover over the "History" list in the left hand column... The site comes up a little messy in Firefox...
Manolo Guerrero sets up a little app that allows you to click on a form field and edit the text, which is automatically saved to the server via xmlHttpRequest. Worth a look, though the commented Javascript is in Spanish.
A neat little script to play with (not sure what it has to do with weblogs especially tho). From the site: It uses Javascript to get data from a remote source and then loads that into a specified target. Whatever content you like to wherever you like on the page.
A proof of concept, Ajax based login script that, in this case, uses a php/mysql backend. The author provides all of the scripts involved and lists some advantages and dis-advantages of his method.
Thomas Baekdal gets back into accessibility and Ajax. From the site: Let's look at what we can do to turn an otherwise user-hostile XMLHttpRequest application - into a usable one...
. An excellent write-up.
An excellent proof of concept and something I was waiting for someone to code up ;-). This XHTML live Chat uses XMLHttpRequest to post chat messages and to periodically check the server for new messages and update your chat window.
This is simply a proof of concept, and would work really well in a blog commenting setting or for forums when those fast threads start happening.
Here's an excellent application of the livesearch idea that has been seen around the web. Type in your search (a band name) and the results show up in a nice table below the search box.
Similar to other livesearch functions out there, only this one plugs into Google's API and has a Java backend, returning a list of results and descriptions for your query.
From the site: Sproutliner is a free web service that helps you manage your projects and ideas.
This tool looks to be very promising, and to be honest you have to try it out to 'get it'. It is a sort of Ta-da list on steroids, so to speak, in that it is very simple yet a user can add to it and tailor it to their needs.
Very cool...
Whenever I came across forgetfoo I was always amazed at the scripting being done on that site. This blog post outlines some very cool tricks using xmlHttpRequest. Be sure also to click on the comments (bottom) and the calendar (top).
While makaing some excellent points in the article, the little adventure game "The Search For Fonzie’s Treasure" built using Ajax technologies is pretty cool. The author discusses user profiling as an "evil use" of Ajax. I'm not so sure that I would say that it is evil...
A very impressive piece of Ajax work, with some context provided here. Have a click thru the site and try out that back-button. Also be sure to head in and check out the demo section.
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..