An Introduction To Ajax Prerequisites: HTML, JavaScript, PHP

Rigaudon · April 14, 2010

Hi everyone,

Looking around these posts, I've noticed that many people have questions about things that could either be easily accomplished in AJAX, or just made easier in AJAX. I learned AJAX very recently, actually, and it was very frustrating to grasp the basic concept of it by just vague and incomprehensive words on a web page. Well, obviously, you're doing the same thing, but I think the way I explain it will make things much simpler to understand.

Note: I'm not sure if this should go under tutorials or programming languages>ajax, so move as you see fit, mods.

I'm assuming you know the basic concept of HTML, a little HTML DOM, basic JavaScript, and basic PHP.

Understanding What AJAX is
AJAX stands for "Asynchronous JavaScript and XML". It is not actually a language, but a method developed by Google. It involves JS and either PHP or ASP. Since PHP is just, well, plain better than ASP, I'm going to use that.

What AJAX does is it actually communicates with the server-side script without the user having to reload the page. This is very useful if you have a script that changes something every so often so the user doesn't have to refresh. If any of you have every played Neopets, then you will know the frustration of reloading the page every time you want to do something (well, they've kinda migrated toward flash now, but still).

As you may have guessed, this script requires both a server-side script (PHP) and a client-side script (Javascript). Luckily, the client-side script hardly changes for general use.

XMLHTTP object

AJAX revolves around the Javascript object known as the XMLHTTP object. This is different for IE5 and 6 (although, if you ask me, whoever still uses IE5 and 6 don't deserve to browse the web), as they use the activex object. It is quite simple to create:

//Standard var xmlhttp = new XMLHttpRequest();// code for IE6, IE5var xmlhttp = ActiveXObject("Microsoft.XMLHTTP");}

The xmlhttp object has 2 main methods:

open(method,url,boolean)

method: the type of request: GET or POST (as a string)
url: the location of the file. CAN HAVE variables in url (ie. a=1&b=2...)
boolean: true (asynchronous) or false (synchronous)- synchronous means the script stops until it gets a response from the server.

send(string)

If you're using GET, string will be null. Don't send for ActiveX.

AJAX has 3 main properties:

readyState:

The status of the server's response.
0: not initialized
1: connection established
2: request received
3: processing
4: finished and response is ready

onreadystatechange:
When the state of the request changes, this function will be called automatically.

responsetext:
The response from the server. Use this when readystate is 4.

Don't worry if this doesn't make any sense right now because we're going to do the Hello World example very presently.

Hello World in AJAX

We only need 2 files: an HTML and a PHP.

Let's start with the PHP file. Piece of cake:

<?php echo "Hello World!"; ?>

Save this as "hello.php" or whatever.

Here's a simple HTML file document that calls a function called "ajaxfunction()" which we're going to make now.

<html><head><title>AJAX Hello World</title></head><body onload="ajaxfunction()"></body></html>

Now, read carefully. The following code, since it's Javascript, should go in the head. I will post what we are doing in the comments.

}
</script> linenums:0'><script type="text/javascript">function ajaxfunction(){var xmlhttp = new XMLHttpRequest(); //Create the AJAX object.var url = "hello.php"; //The location of the server-side file. xmlhttp.onreadystatechange = function(){ //What we are going to do every time the state of the request changes. if(xmlhttp.readyState==4){ //Only do this if the request is done (4 means done, 3 means processing, etc) alert(xmlhttp.responseText); //Alert to use what the response is from the server. }}xmlhttp.open("GET",url,true); //Open the url using the GET method, true meaning asynchronous (continue with the script while the request is going on).xmlhttp.send(null); //Don't need to send anything, since we used the GET method. Have this anyways.}</script>
Load the page, and viola! You get alerted "Hello World!", or whatever you decided to put on your "hello.php".

This is just a simple introduction, and yet this is all AJAX really is. There are other AJAX methods like suggest (type something and it gives you suggestions, like google), but the general principle is the same.

You might be thinking, "I can make it do that in just javascript!". Well, can javascript access a database? The potential for AJAX is huge.

I hope this guide is as comprehensive as I tried to make it.

web_designer · April 14, 2010

great tutorial, i like it. so simple and clear, i am sure anyone wants to learn ajax will wait for your next tutorial, even me. i used it once and i know the basics. but i really likes your introduction. i will wait for more, thank you for sharing.

Rigaudon · April 14, 2010

No problem! I hope to post another tutorial on mySQL soon, then go on to advance OOP PHP and AJAX. It's surprising to me how many people consider using a template "making their own website" without even knowing what source code is, and I hope to change that

Sign In

An Introduction To Ajax Prerequisites: HTML, JavaScript, PHP

Recommended Posts

Rigaudon 0

Share this post

Link to post

Share on other sites

web_designer 7

Share this post

Link to post

Share on other sites

Rigaudon 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information