Script Perfect

Ajax, not the cleaner, the asynchronous JavaScript and XML, it is like viagra for your website. Pop in a little Ajax and your website is performing better and making your “visitors” happy. As with viagra you need to read the warning labels associated with Ajax.

Warning:

Ajax should be used in moderation. If your server maintains a full load for more than 4 hours as a result of using Ajax, you should consult a programmer immediately. Websites hosted on shared servers or those intending to move to a shared server should not use Ajax as this may cause complications during deployment.

Seriously though, over use of Ajax can cause a lot of load on your server if you are processing too many requests at the same time, often the requests that tax the server the most include database queries. Don’t get me wrong, I love Ajax and I think every site could put it to good use. This is why I am going to show you a few simple methods to implement it on your site to make your visitors time more enjoyable.

Asynchronous JavaScript and XML, it is a little misleading, you do not really need XML, nor do you need JavaScript, come to think of it, it does not need to be asynchronous either. There have been some releases of API’s which allow you to use Ajax without JavaScript, not really sure why anyone would want to go this route as it is not as powerful. Most commonly we will use XMLHttpRequest to exchange our information.

Our Scenario

This is one of the most useful scenarios I can think of at this particular time, considering the lack of caffeine flowing through my veins I think it is a good one. How many times have you gone to register on a website to find that your user name was taken? Out of those times how many times did you have to submit the form over and over again until you found a user name that was not taken? Through the use of Ajax we can check if a particular user name is available while we type.

This method is very easy, we will start with our php which will query the database and tell us if a particular user name is available.

checkname.php

The code above simply takes a value “username” which was posted and checks if it already exists in our database. If the username entered exists we echo “Taken”, otherwise we echo “Available”.

So now we need a form and a JavaScript function which will post data to the php script we just created. What we will do is this, every time a key is pressed inside our text input we will call a JavaScript function called “checkname” which will post the value of our input to our checkname.php file.

A simple input box with a call to a JavaScript function. We also added a DIV on the page with the id “results”, this is where we will post the results of our query. All that is left now is the function which will actually gather the data from the page, post it to our php file, then return the results to our DIV.

The Listener

Something almost all women wish men would do, listen… We need to put a listener into place to see if anything is being parsed back to our page. Since browsers are different and handle the data being sent to them differently we need to account for both of them. Here is how:

This function creates an XMLHttp request, which will not only send our data but also receive it. So it is a good talker and listener, who needs that viagra now? O.k. So the final part in this equation is to gather and post the data, we can do that with our function “checkname()”.

There it is, the function that will collect and post our data as well as place a reply inside our DIV tag. Here is how it works:

The contents of our DIV is set to the response from our php file, so if it found the user name it would read “Taken” and if the name was not found it would read “Available”. This process takes place every time the user presses a key to input a new name into our input field.

Cleaning Up

As with any good night on viagra or a good night with coding there is always some form of cleanup. The code above will demonstrate how to send and receive via Ajax but it is not complete. We are not escaping any values posted and there is plenty of room for errors when posting erroneous data which means you will need to check your data before sending it to your php file.

Doctors Warning

Over use of Ajax can cause your site to run slow, it is great for the client side but can really bog down your server if too many requests are being made at the same time. Use this tool wisely and try not to overdo it, especially if you are on a budget host.

It has been more than four hours so I am off to seek medical erm…

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Ask backflip blinklist BlogBookmark Bloglines BlogMarks Blogsvine BuddyMarks BUMPzee! CiteULike co.mments Connotea del.icio.us

Digg diigo DotNetKicks DropJack dzone Facebook Fark Faves Feed Me Links Friendsite folkd.com Furl Google

Hugg Jamespot Jeqq Kaboodle kirtsy linkaGoGo LinkedIn LinksMarker Ma.gnolia Mister Wong Mixx MySpace MyWeb

Netvouz Newsvine oneview OnlyWire PlugIM Propeller Reddit Rojo Segnalo Shoutwire Simpy Slashdot Sphere

Sphinn Spurl Squidoo StumbleUpon Technorati ThisNext Twitter Webride Windows Live Worlds Movies Yahoo!

Email This to a Friend

Copy HTML: 

 If you like this then please subscribe to the RSS Feed.

Powered by Bookmarkify™

More »