Checking availability of user name with AJAX

Lately I’ve been writing quite much about AJAX, but it is so useful that I’m sure it is of everyone’s interest!

In this post I will show you – as the post title says – an example script of AJAXed registration form, without recurring to AJAX frameworks (there are already many tutorials about this topic in relation with them). The example omits the synchronous part of the registration and focuses on the user name, which we want to asynchronously check. It doesn’t sound so weird if I say it in other words: check on the fly if the user name the person is typing already exists in the database or not, and take actions depending on whether it does or not (for instance, only allow form submission if name is available).

This is the basis for other types of effects like for instance searching contents and dynamically returning result suggestions, or checking if a specific word exists in the database, etc. but as I mentioned, here the intention is to use it on a registration form.

Read the rest of this entry »

Refreshing DIV content with AJAX (multiple DIVs)

After reading the post Refreshing DIV content with AJAX, you already know how to refresh the content of a DIV in your website with the help of AJAX. But perhaps you want to refresh more than one DIV, and you’ve realised the code in the other post didn’t work! Don’t panic, as a matter of a fact refreshing multiple DIVs is the same process than refreshing a single DIV. I’ve prepared an example and some code so you can see how easy it is. See the working demo here.

Read the rest of this entry »

AJAXifying your site’s navigation

This post is inspired in Refreshing DIV content with AJAX. However this code does not actually automatically refresh the contents of a DIV but it refreshes them when the user clicks a link. The implementation of the code below allows to refresh the contents as mentioned, but the content retrieved can be different every time. This is very useful to make a website work in a similar way as with frames, but with more advantages and without the disadvantages of frames.

I provide the code necessary to achieve this purpose but I don’t present it like a step-to-step tutorial. This is because I guess that for anyone with minimal knowledge of HTML and JavaScript is totally self-explanatory and because I would prefer you to make your website look like you want it to rather than like my post tells you to.

You can see a demo page with AJAX navigation here.

Read the rest of this entry »

Automatically query MySQL and output results with AJAX

This is an extension of the post Refreshing DIV content with AJAX. I recommend you read it at first because you will understand better what the script below is about.

What this script does is the following: without having to press any refresh button, and not even reloading the whole page (but a DIV), it retrieves every X seconds the specified data from a MySQL database and displays in the DIV the refreshed contents of it. In other words, it queries the database regularly and updates the output. Read the rest of this entry »

Refreshing DIV content with AJAX

AJAX (Asynchronous JavaScript And XML) is a keystone of Web 2.0 and is very useful in many aspects, because it offers the possibility to change the structure of the page (DOM). For instance, it makes possible refreshing a part of a website instead of having to use the classic page reload, which requests again the whole page from the server even when the updated parts are minimal (much slower and of course consumes more bandwidth; therefore making the visitor experience worse).

If you know what a HTML <div> tag is and how to use it, with the help of AJAX refreshing a section of your website is possible. The section which will be refreshed is within a DIV; the rest of the HTML outside the DIV will not be refreshed.

To show you how to do so, I prepared an example with the code required for this purpose. But if you’re new to AJAX and would like to know how the code works, I recommend you to take a look at first at w3schools AJAX tutorial.

Read the rest of this entry »