This free AJAX JavaScript tutorial guides you how to build a simple AJAX application using PHP and JavaScript. This free HTMl JavaScript tutorial provides you some helpful information about JavaScript and AJAX: How AJAX works, A simple AJAX web request (with JavaScript example code), Simple AJAX web request Code Explanation.

• Demo
• Enlarge
• Reload
• New window

To those of you who are used to my typical crazy picture/funny video/interesting stuff post, you will have to excuse me a few posts to talk about nerdy things. This being one of those posts. Unless you care about programming, stop reading now.

How ajax works

Building the new style web 2.0 sites that contain Ajax functionality is actually quite simple, especially now with the multitude of frameworks being released to simplify this (Atlas, jQuery, etc). But I am a bit old school and like to know exactly what is happening when my code executes as opposed to using pre-built functions and assuming they will work for every scenario I must handle. Sure, these frameworks are great for RAD and applications that are only used in-house (because you can hack the backend to pieces without worries for security really, unless you must provide role based access in the application). We will be dealing with a simple page containing raw javascript and php.

There are at least two files required for a simple ajax example. One is an HTML file containing the javascript to make the request from the client to the web server. The other is a script to receive the request, process it, and return the information to the client javascript.

If you do not understand how a basic ajax request works, consider it nothing more than a client/server connection. The client is your visitor, and the server is of course your server. When you attach javascript to an HTML file, that javascript code is executed on the visitors machine and can save your server some memory as well as cpu cycles. The browser sees this javascript code and interprets it and then executes it. An ajax request is nothing more than using javascript to create a socket, send a request to your server, and process the returned data with javascript. A query would go as follows:

Clients requests www.mysite.com/index.html -> javascript code on index.html creates a socket on visitors computer -> socket sends request to www.mysite.com/ajax.php -> ajax.php processes the request and sends back information (aka "hello world") -> visitors computer gets the data ("hello world") and decides what to do with it on the page (show it as an alert, show it in a text box, show it as an error).

This allows an entire website to be built in such a way that the visitor actually never has to load another page. The entire website could simply be sent back and forth using ajax and show the returned data on the page as it gets it. Want an example of how this can be used in a very efficient manner? Take a glance at Bing Image Search. Do a search for anything and scroll down. Notice how you never have to click a "Next Page" to get more results, it simply continues to load new images as you scroll down, always staying one step ahead. Well, in this case it is nothing more than ajax being used and the request sent being "gather more images", and so bing.com passes back more images, and your web browser says, "add new images to image listing". Another example of this that most people don't notice is the search suggestion feature at Google. Notice if you type in a few words you will get suggestions of what to search for by Google. It simply passes what you type to google as you type it, and returns back searches related to what you have typed so far, your browser is told via javascript to "list them here". Pretty neat eh?

A simple ajax request (example code)

Let's dive into some code here and get our hands dirty. A quick "Hello World" example using ajax and php requires two files: ajax.php and ajax.html. The source code for these files is below. I would suggest you manually type them instead of simply copy and paste if you feel weak about understanding all of this. If you feel you have a good idea about what's going on go ahead and copy and paste. I only suggest manually typing it for newbies because it forces you to look at the code line by line and understanding it.

ajax.html

 
<html>
 
	<head><title>Ajax Hello World Example (www.amusingmarlow.com)</title></head>
<script language="javascript">

		function socketsetup() {
 
			if (window.XMLHttpRequest)

				httpsocket = new XMLHttpRequest();
			else if (window.ActiveXObject)

				httpsocket = new ActiveXObject("Microsoft.XMLHTTP"); 
 
			httpsocket.open("GET","ajax.php",true);

			httpsocket.onreadystatechange=socketreceive;
 
			if(window.XMLHttpRequest)
				httpsocket.send(null);

			else if(window.ActiveXObject)
				httpsocket.send();
		}

		function socketreceive() {
 
			if(httpsocket.readyState==4) {

				if(httpsocket.status==200 || httpsocket.status==304) {

					document.getElementById('received').innerHTML=httpsocket.responseText;
				}
			}

		}
 
</script>
</head>
<body>
<div id="received"></div><br />
<input onclick="socketsetup();" type="button" value="Grab Data" />

</body>
</html>

ajax.php

<?php
echo 'Hello World. This is an ajax test.';
?>

Save the two files above, upload them, and visit http://www.yoursite.com/ajax.html. You should see a blank page titled "Ajax Hello World Example" with a button saying "Grab Data". Click this button and you will instantly see the message from ajax.php (well, depending on how fast your server and computer are). Congratulations! You just ran your first ajax script.

The real question is, do you understand the code? No? Well that is fine, I will explain line by line exactly what is going on here.

• Code
• Print

• Comment (1)
• Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New