- 18
- Mar
On the heels of two very successful tutorials on creating a collapsible div and an animated sliding div, I’ve decided to write another. It seems my last few helped a number of programmers learn a simple trick, and hopefully this one will do the same.
Note, I’ve also upgraded to a much newer, faster server, so hopefully the social networking sites won’t “collapse my server” again, as one Digger so eloquently put it.
Hearing about AJAX constantly, but never have found time to read a lengthy, frustrating, complex tutorial? In the following post, I’m going to explain how to add AJAX functionality to your website in three easy steps. It’s actually quite simple, and I’m going to try and be clear and to the point, but not over or under-explain anything like most tutorials have a tendency to do.
Before you begin, decide what purpose or additional functionality adding AJAX to your website will accomplish. Will it be a live search feature? Something to save user preferences? In this example, we’re developing a simple calculator. Let’s dive in.
Step 1: Create the Intelligence
First let’s make the brain of the system. In our calculator, we’re going to need a PHP function to actually perform the operations. We’ll handle the front-end later, but for this file, we’ll take our input from GET request strings (variables passed through the URL itself, such as file.php?var=value&var2=test).
Name this file: backend.php
<?
if($_GET['op']==”" || $_GET['num1']==”" || $_GET['num2']==”"){
echo “Error: Please complete all fields.”;
exit;
}
if($_GET['op'] == “divide” && $_GET['num2'] == “0″){
echo “Error: Division by zero.”;
exit;
}
if(!is_numeric($_GET['num1']) || !is_numeric($_GET['num2'])){
echo “Error: Invalid numbers.”;
exit;
}
switch($_GET['op']){
case “add”:
echo $_GET['num1'] + $_GET['num2'];
break;
case “subtract”:
echo $_GET['num1'] - $_GET['num2'];
break;
case “multiply”:
echo $_GET['num1'] * $_GET['num2'];
break;
case “divide”:
echo $_GET['num1'] / $_GET['num2'];
break;
}
?>
Now, let’s take a look at this file. We’re working with three variables passed from the GET string: the operation such as add/subtract/divide/multiple ($_GET['op']), and the two numbers we’re performing the math on ($_GET['num1'] and $_GET['num2']). For example, we might call this page like this: backend.php?op=add&num1=12&num2=4 . This is running our above file (backend.php), passing “add” as the ‘op’ variable, and 12 and 4 as the two numbers.
The first four lines of the above backend.php script checks to make sure all the variables were entered. If any of the three values are blank (”"), then it errors and exits. The next if-block is checking for a divide by zero error. If the op variable is divide and the num2 variable is zero, it errors and exits. Simple.
Next it checks to ensure you entered valid numbers with the is_numeric() function in PHP. If you enter a letter or something else in the field, it will show and error and exit.
The next (and last) block we get to is the switch statement. This goes through and checks the op variable to see what we’re trying to do here. Every case-statement represents one of the possible operations (add/subtract/divide/multiply). When it figures out which operation is being requested, it performs the math on num1 and num2, echo’s the result, and breaks out of the switch statement, thus ending the file. If you need to brushen up on how switch statements work, php.net has a great tutorial.
There, now you’re 1/3rd done with adding interactive AJAX functionality to your web application. Easy right?
Step 2: Create the Form
Now we’re going to create the frontend to the AJAX. This is the part the user sees, and is mostly basic HTML. You can add this to any PHP or HTML file you have, anywhere you want.
Here’s the frontend code for our calculator:
<input type="text" id="num1" size="6">
<select id="op">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">*</option>
<option value="divide">/</option>
</select>
<input type="text" id="num2" size="6">
<input type="button" value=" = " onClick="doMath();">
<div id="answer" style="display: inline; font-size: 16px"></div>
This is simple HTML, adding two textboxes, a drop-down (with values corresponding to the values of the case statement in backend.php), a button, and a DIV. Notice I’m not using a submit button (it doesn’t matter) because I’m not using a form. This might not be best practice, but it goes to show you’re not submitting anything to another page, like you traditionally would. The button has a function “doMath()” which is called from the onClick attribute. We’ll explain this function in step 3, but for now, just know that begins the AJAX and solves the math problem. Also notice we’re using id’s instead of names for the textboxes and drop-down field (select)- this is for us to reference the fields from Javascript in the next step. The last line is a simple DIV with a bit of CSS styling (display: inline makes it appear after the equals button, rather than on it’s own line, and the font size is for aesthetics). We set the id of this div to “answer”, and we’ll be using it later from the Javascript to output the answer.
Very easy. Now we have the backend setup to do the math, and the frontend to ask the user what kind of math he wants to do… so now the only piece left is connecting them together!
Step 3: Connecting the Frontend and Backend Together
This step is the trickiest, but stick with me, and you’ll see how easy it really is. We use Javascript (AJAX = Asynchronous Javascript and XML) to talk between the HTML and the PHP.
For this step, let’s create another new file, and call it ajax.js.
http = getHTTPObject();
function getHTTPObject(){
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if(!xmlhttp && typeof XMLHttpRequest != 'undefined'){
try {
xmlhttp = new XMLHttpRequest();
}catch(e){
xmlhttp = false;
}
}
return xmlhttp;
}
function doMath(){
var url = "backend.php?op=" + document.getElementById('op').value;
url += "&num1=" + document.getElementById('num1').value;
url += "&num2=" + document.getElementById('num2').value;
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function handleHttpResponse(){
if(http.readyState == 4){
document.getElementById('answer').innerHTML = http.responseText;
}
}
Now, your first reaction might be to panic, but stay calm, it’s not that bad. The entire getHTTPObject() function (half the file) you do not need to understand. It’s a standard function included in almost every AJAX script out there… simply copy and past that exactly as it is, and forget about it. There, now you’re just left with the first line, the doMath() function, and a small function called handleHttpResponse.
The first line is declaring an object to ask PHP for it’s result. Think of it as a mini web browser.
The doMath() function is where you actually send the AJAX request. Remember it being called when you click that button in the frontend? This is what’s run. The first three lines of this function are building a variable (url) that is the PHP page we’re going to request. It begins with “backend.php?op=” and grabs the value of the drop-down from the frontend to find out if we’re adding, subtracting, multiplying, or dividing. Then it adds the two numbers from the frontend on to the end of URL request string as well, using document.getElementById to find them (the textboxes’ values). Now the url variable is left with something similar to the example I gave right after the code in step 1. You could in theory plug this URL into your web browser, and see the result yourself, but instead we’ll let Javascript do it for us. The last three lines of the doMath() function pass that URL to our mini web browser (variable “http”), and essentially press the Go button. It sends the request, and tells it to notify us when it gets a response back, via the handleHttpResponse() function.
Now, the last function of our Javascript file is the handleHttpResponse() function… called automatically by our mini web browser when our PHP page finishes downloading (and it has an answer). The if-statement is basically saying “if the PHP site is done loading and you have an answer, continue.” The middle line is a call to set the innerHTML property of the answer DIV on the frontend to whatever the PHP page says…. in our case… the math answer.
Important!
Now, for this to work, you need to call the ajax.js file from the file where your frontend is. This is done by simply placing this line above the frontend somewhere in the code:
<script language="javascript" src="ajax.js"></script>
The best place to put this is between the HEAD tags of the file, but anywhere would work. If you do not add this line, your website will give errors when someone tries the AJAX, and it won’t work.
And you’re done!
Now, I’m sure critics are going to ask why do this with AJAX when I could easily accomplish the same thing with pure Javascript, and the answer is this is a tutorial to learn. Often times the PHP backend does MySQL calls, or things that Javascript couldn’t do. For example, live searches (results below the textbox as you type) are this same basic framework, but the backend searches a database for what the user is typing, and returns the results to set in the answer div (equivalent). Simple!
And as always, here is a live, working demonstration of the tutorial in action:
I enjoy your comments and requests for future tutorials!
March 18th, 2007 at 5:17 am
[...] read more | digg story [...]
March 18th, 2007 at 7:28 am
Nice, i was planning on buying a ajax book anyway. This just made me buy it quicker!
March 19th, 2007 at 12:35 am
[...] AJAX Made Easy Tutorial: AJAX Made Easy A very simple tutorial explaining how to add AJAX functionality to your website with 3 easy steps. [...]
March 19th, 2007 at 12:57 am
Cool, thanks for the simple tutorial. It helps out a lot. One question I have is how I would go about doing this with POST rather than GET?
March 19th, 2007 at 1:10 am
[...] AJAX Made Easy Filed under: Uncategorized — recar @ 5:10 am Tutorial: AJAX Made Easy A very simple tutorial explaining how to add AJAX functionality to your website with 3 easy steps. [...]
March 19th, 2007 at 1:24 am
These direct methods of implementing AJAX are good for beginners, so that the concepts are understood. But if you are doing serious development, you should use an AJAX framework like SAJAX.. it handles all the compatibility headaches and allows you to bother only abt the actual functionality that you want to code.
March 19th, 2007 at 1:55 am
Question: Is there a way to hide the AJAX url from being visible in the javascript file ? I could not find any and I would fear that it can be manually crafted to harm the website when doing any serious development.
March 19th, 2007 at 2:42 am
I just wanted to extend my gratitude to you. I have been wanting to start learning AJAX, but found nothing that made it easy enough in the beginning to really understand what’s going on. You did it marvelously! Thank you so much! I checked out the other two tutorials you’ve put up linked from digg and found them helpful, but this sealed it for me. Your site is now in my daily routine of places to check! Keep up the good work.
March 19th, 2007 at 2:46 am
A clean tutorial and its good to teach the basics but I’d agree with dEEPS … would be far more efficient to get yourself a good js framework.
With the YUI lib this kind of thing could be reduced down to:
function doMath() {
var url = “backend.php?op=” + $D.get(’op’).value;
url += “&num1=” + $D.get(’num1′).value;
url += “&num2=” + $D.get(’num2′).value;
var callback = {
success : responseSuccess,
failure : responseFailure
};
var myConn = $C.asyncRequest(’GET’, url, callback);
}
function responseSuccess(response) {
$D.get(’answer’).innerHTML = response.responseText;
}
function responseFailure(response) {
$D.get(’answer’).innerHTML = “Ajax failed! Please try again.”;
}
A hell of a lot easier to read and understand and it saves having to use hardcoded constants like “http.readyState == 4″.
March 19th, 2007 at 3:14 am
Nice, simple tutorial. Can anyone recommend any good ajax books they have read.
March 19th, 2007 at 3:51 am
[...] read more | digg story [...]
March 19th, 2007 at 4:58 am
also asentence.com needs such like ajax scripts.
March 19th, 2007 at 5:02 am
[...] ? c’est facile ! Je vous explique … Jarry Maugans nous a pondu un petit tutorial de +/- 1 page pour nous expliquer comment mettre de l’AJAX sur notre site sans lire pleins [...]
March 19th, 2007 at 5:07 am
I just want to mention, that if you are doing custom AJAX, instead of a full framework, that you should at the very least look into prototypejs.org with prototype, you can use a simplified AJAX.Request() object to process your request, and parameters, and calls the callback when the response is processed. Other things to research on are JSON (JavaScript Object Notation) which is lighter for transfering information than XML, as well as JSON-RPC.
March 19th, 2007 at 6:05 am
zingooo
thanks for the tutorials
now i understand it
March 19th, 2007 at 6:35 am
isnt the innerHTML call soon to be depreciated? shouldnt you be creating a new textElement?
March 19th, 2007 at 6:55 am
[...] Harry Maugans » Tutorial: AJAX Made Easy [...]
March 19th, 2007 at 7:20 am
Tutorial : AJAX Made Easy
Tutorial : AJAX Made Easy posted at IndianPad.com
March 19th, 2007 at 7:34 am
Another great article.
March 19th, 2007 at 8:28 am
i like AJAX, but i don’t like that it too slow
March 19th, 2007 at 8:49 am
[...] 2007, 12:49 pm Filed under: technical the quickest ajax tutorial i hav seen.. seems pretty good >> No Comments so far Leave a comment RSS feed for comments on this post. TrackBack URI [...]
March 19th, 2007 at 8:59 am
This is a very nice tutorial to get started.Could u pls give more examples of websites or exaples from real world where ajax is used.
March 19th, 2007 at 9:11 am
I did the backend.php with ColdFusion .cfm, just change the reference in ajax.js and use this:
Please complete all fields!
Error: divide by zero is bad.
Error: Invalid numbers.
#num1# + #num2#
= #answer#
#num1# - #num2#
= #answer#
#num1# / #num2#
= #answer#
#num1# x #num2#
= #answer#
March 19th, 2007 at 10:01 am
[...] Story source: http://www.harrymaugans.com [...]
March 19th, 2007 at 10:26 am
[...] Link here. [...]
March 19th, 2007 at 10:29 am
Great stuff! So simple!
March 19th, 2007 at 10:30 am
Ajax jest prosty
Dynamiczny kalkulator w Ajaxie, krótki tutorek.
March 19th, 2007 at 11:34 am
Ajax jest prosty
Krótki przykład, udawadniający że Ajax jest do ugryzenia. Tutorial jak zmontować dynamiczny kalkulator.
March 19th, 2007 at 12:14 pm
Harry, this is a really nice article, and I enjoyed reading it.
I notice you are using conditional compilation to produce the ActiveX version of XMLHttpRequest for ALL versions of IE. Please note that XMLHttpRequest is supported natively in IE7 and the ActiveX control is deprecated. I would recommed removing the conditional compilation completely, checking for the native first, followed by the ActiveX, then returning false.
Was there a reason you decided to use this unique methodology?
March 19th, 2007 at 12:50 pm
Harry - I’d love to get an email address - I wanted to see if you’d be interested in writing an article for us (paid of course)
March 19th, 2007 at 12:57 pm
I used to program in PHP, but had to move over to the dark side for practical/economic reasons. Here is the code for backend.aspx, written so it will work in ASP 1.1 or 2.0. NOTE: There is no HTML markup in this program.
[I got an error submitting the code as-is, so I will try leaving out the quote marks this time]
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If (Request(op) = Or Request(num1) = Or Request(num2) = ) Then
Response.Write(Error: Please complete all fields.)
Exit Sub
End If
If Request(op) = divide And Request(num2) = 0 Then
Response.Write(Error: Division by zero.)
Exit Sub
End If
If (Not IsNumeric(Request(num1)) Or Not IsNumeric(Request(num2))) Then
Response.Write(Please specify valid numbers for the math equation.)
Exit Sub
End If
Select Case Request(op)
Case add
Response.Write(CDbl(Request(num1)) + CDbl(Request(num2)))
Case subtract
Response.Write(CDbl(Request(num1)) - CDbl(Request(num2)))
Case multiply
Response.Write(CDbl(Request(num1)) * CDbl(Request(num2)))
Case divide
Response.Write(CDbl(Request(num1)) / CDbl(Request(num2)))
Case Else
Response.Write(CDbl(Request(num1)) + CDbl(Request(num2)))
End Select
End Sub
Enjoy!
March 19th, 2007 at 1:50 pm
Friendly Important note concerning your “Important!” note:
You need a space between the brackets
i.e. ” ”
Or the “ajax.js” won’t load in some browsers.
March 19th, 2007 at 1:53 pm
Well let’s try that again…since the script code didn’t copy.
Near the end of the tutorial (which was GREAT, by the way):
You need a space between the script brackets or ajax.js won’t load in some browsers.
March 19th, 2007 at 1:54 pm
[...] with this framework. Definitely time invested in this quality article. final fantasy hentai blackread more | digg [...]
March 19th, 2007 at 1:58 pm
[...] test 03/19/2007 Harry Maugans » Tutorial: AJAX Made Easy Annotated [...]
March 19th, 2007 at 2:00 pm
[...] o artigo no site do Harry Maugans. [...]
March 19th, 2007 at 2:01 pm
This is a good read Harry. The more I read about the XHR, the more I understand it. I found your site on digg, and I will check it out a lot now. Also, thanks for the tip on wp-cache!
March 19th, 2007 at 2:21 pm
[...] Harry Maugans » Tutorial: AJAX Made Easy (tags: ajax javascript) This entry was written by Craig and posted on March 19, 2007 at 6:21 pm and filed under Uncategorized. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « links for 2007-03-18 [...]
March 19th, 2007 at 2:25 pm
Dugg.
March 19th, 2007 at 2:55 pm
[...] books, web design, Ferret with Ruby on Rails, error messages, and C programming. Here they are:Tutorial: AJAX Made Easy A very simple tutorial explaining how to add AJAX functionality to your website with 3 easy steps. [...]
March 19th, 2007 at 3:24 pm
thanks! your last 2 tutorials have been helpful, but this is much better for actually understanding.
March 19th, 2007 at 3:35 pm
Hi,
Thank you for your tutorials! They are very useful in getting across the rudiments of this technology.
For a future tutorial, how about pop-up mini windows, like the product roll-overs we see on sites like NetFlix?
March 19th, 2007 at 4:21 pm
[...] clipped from http://www.harrymaugans.com [...]
March 19th, 2007 at 4:47 pm
How about an article about using darker fonts on #FFFFFF. You have successfully strained my eyes. Huzzah!
Also, this comment text box green is way too light. Damb.
March 19th, 2007 at 6:10 pm
the green works for me …
March 19th, 2007 at 8:32 pm
[...] Tutorial: AJAX Made Easy via Harry Maugans (via LifeHacker): a tutorial that covers a few AJAX fundamental concepts and walks you through building a basic AJAX app. (tags: ajax tutorial essay todo) [...]
March 19th, 2007 at 11:09 pm
Great tutorial. Learned a ton. A great follow up to this would be to actually show how his is used with a database. For example, submitting into a database, and then displaying “Information entered” without the page refresh….
Also, perhaps show how this can be done unobtrusively….
March 19th, 2007 at 11:16 pm
Jonas, that’s a great idea. I might write a short tutorial on connecting to using MySQL with PHP first.
Thanks.
March 20th, 2007 at 12:30 am
[...] A simple AJAX tutorial for newbies: http://www.harrymaugans.com/2007/03/18/tutorial-ajax-made-easy/ [...]
March 20th, 2007 at 5:04 am
I tried it in FF 2.0.2 and it does not work. Javascript function runs, but I never get result.
March 20th, 2007 at 5:36 am
[...] AJAX Made Easy - A very simple tutorial explaining how to add AJAX functionality to your website with 3 easy steps. Helpful no matter what your technical expertise may be. [...]
March 20th, 2007 at 5:55 am
[...] Totorial: AJAX Made Easy [...]
March 20th, 2007 at 6:53 am
[...] Harry Maugans » Tutorial: AJAX Made Easy AJAX简单教学 (tags: AJAX tutorial) [...]
March 20th, 2007 at 6:53 am
I actually ajaxified a small app just by using your example. Thanks a bunch! Very simple and helpful.
March 20th, 2007 at 6:55 am
Perttu, glad I helped! That’s why I write these tutorials.
Expect another big tutorial coming later this week.
March 20th, 2007 at 7:55 am
How about your new server? Did it handle well the traffic spike? I can tell you’re using the EV1 datacenter, but is it a shared server? Which company?
March 20th, 2007 at 4:08 pm
Decio, I use The Planet for all my servers (I have three dedicated).
I recently moved HarryMaugans.com to a new one, which yes, is hosted in an old EV1 datacenter (The Planet bought Ev1). It’s about $250 a month with all my extras. More than enough for the few sites I run on it.
March 21st, 2007 at 1:19 am
[...] Harry Maugans » Tutorial: AJAX Made Easy (tags: ajax howto) [...]
March 21st, 2007 at 3:36 am
dugg
Very nice, had it tagged for awhile, just got around to playing tonight.
to clean up a couple of html warnings I added type=
and surround the inputs with form tags
…
I’m thinking there should be something about onsubmit= return:false to prevent it from actually reloading the page.
How is this done when using ajax?
March 21st, 2007 at 4:32 am
[...] read more | digg story [...]
March 21st, 2007 at 8:03 am
[...] [...]
March 21st, 2007 at 8:59 am
[...] udvikleren Harry Maugans har lavet en lille how-to til hvordan man hurtig og let tilføjer lidt AJAX goodies til ens site. Så hvis du er interesseret [...]
March 21st, 2007 at 5:24 pm
[...] Tutorial: AJAX Made Easy (tags: ajax blog howto php programming) [...]
March 21st, 2007 at 7:33 pm
[...] Tutorial: AJAX Made Easy (tags: development tutorial javascript ajax) Leave a Comment [...]
March 22nd, 2007 at 10:36 am
How To: Make a dynamic calculator for your news site (using AJAX!)
Untitled Document Have a look at this AJAX tutorial, posted last Sunday by Harry Maugans on his blog. He offers directions, step by step, how to create a simple, dynamic calculator — and in the process, gives a good…
March 22nd, 2007 at 5:21 pm
[...] Tutorial: AJAX Made Easy [Harry Maugans] [...]
March 23rd, 2007 at 7:27 pm
Very cool. I TekTagged it and might even try it out on the site.
March 23rd, 2007 at 8:51 pm
Hi,
This article has very useful information, it will be helpful for many AJAX aspirants. Actually one of my friends first read this article and asked me to visit this page.
It’s really amazing to read this description of this article. Thank you so much for your help and for your efforts.
Thanks,
Steve
http://www.eplanetlabs.com
March 26th, 2007 at 3:36 am
[...] Harry Maugans nos vuelve a obsequiar con un tutorial, en este caso de Ajax. En él explica cómo añadir funcionalidad AJAX a un sitio web en tres [...]
March 26th, 2007 at 6:46 am
Thanks for tutorial. It is very good.
March 26th, 2007 at 3:20 pm
ianmendiola, what do you mean it rewrites the input boxes? Does it reload the page?
March 26th, 2007 at 3:31 pm
ianmendiola, it’s some problem with your backend.php script I believe.
What happens when you go to http://yourdomain/backend.php?op=add&num1=3&num2=3
in your browser?
March 26th, 2007 at 3:42 pm
When you visit backend.php in your browser, it displays input boxes?
It should just show the number 6, and nothing else.
March 26th, 2007 at 4:31 pm
[...] read more | digg story [...]
March 30th, 2007 at 6:47 pm
[...] read more | digg story [...]
March 31st, 2007 at 2:01 pm
[...] may be one of the most difficult things to consider when starting up with AJAX. There are a lot of AJAX Tutorials out there that give you good background information. And it’s good to know what’s going [...]
April 2nd, 2007 at 11:33 am
excelent!but how to do this with login form?
April 3rd, 2007 at 11:16 am
[...] An intro to AJAX Filed under: Technology — 0ddn1x @ 2007-04-03 15:15:57 +0000 http://www.harrymaugans.com/2007/03/18/tutorial-ajax-made-easy/ [...]
April 11th, 2007 at 11:03 am
[...] read more | digg story [...]
April 12th, 2007 at 10:47 am
I wonder how much time does it take to write article, but yes - it’s usefull
April 14th, 2007 at 2:30 am
[...] Harry Maugans » Tutorial: AJAX Made Easy (tags: javascript howto tutorial) [...]
April 16th, 2007 at 12:55 pm
[...] Tutorial: AJAX Made Easy a non-graphical, 2 textareas, 1 dropdown, and 1 button AJAX calculator (tags: AJAX) [...]
April 16th, 2007 at 2:24 pm
[...] taught meThings no-one told me before I started developing software for money. More… Tutorial: AJAX Made Easy A very simple tutorial explaining how to add AJAX functionality to your website with 3 easy steps. [...]
April 17th, 2007 at 12:38 am
[...] Harry Maugans » Tutorial: AJAX Made Easy (tags: ajax Tutorial programming Javascript webdesign php Web blog code computers scripting website webdevelopment work) [...]
May 2nd, 2007 at 4:26 pm
[...] Tutorial: AJAX Made EasyUna splendida introduzione alle basi di Ajax [...]
May 2nd, 2007 at 5:56 pm
I tried the above example. It does not work for me at all. It just calls javascript file but does not call the file named backend.php & the url in the address bar does not change.
Please help if I am making any mistake.
May 3rd, 2007 at 7:46 am
I wonder how much time does it take to write article
May 3rd, 2007 at 7:50 am
it’s some problem with your backend.php script I believe.
What happens when you go to
May 6th, 2007 at 10:51 pm
As promised in the beginning of this example, this tutorial is to the point, and at the same time, explantion for the code is also very clear.
Dhantu
May 8th, 2007 at 11:24 am
Hmmm… It seems to NEVER get
http.readyState == 4
It seems to always be ==1
May 11th, 2007 at 10:42 am
Another great one Harry, thanks a stack! I was considering buying an Ajax book, but the reality is.. I don’t actually need one with all these great online resources!
May 16th, 2007 at 9:10 pm
Ajax creme of the month
You just can't say the word "enough" when it comes to Ajax. Everyone is so hungry of information that's related to it so we will try to satisfy this hunger a little bit by providing you a small list with what we think that is hot on a…
May 18th, 2007 at 4:38 pm
[...] AJAX Made Easy (a Tutorial) [...]
May 24th, 2007 at 12:01 am
Works great if you have a lenient server enviornment, but for those of you without the this set in your php.ini file:
short_open_tag = On
It won’t work. You need to change the opening php tag to “
May 24th, 2007 at 12:05 am
basically you need to have a less than sign followed by a question mark followed by “php” if you want your php scripts to work on all servers
June 27th, 2007 at 5:53 am
[...] Add Ajax to your site Hearing about AJAX constantly, but never have found time to read a lengthy, frustrating, complex tutorial? In the following post, I’m going to explain how to add AJAX functionality to your website in three easy steps. It’s actually quite simple, and I’m going to try and be clear and to the point, but not over or under-explain anything like most tutorials have a tendency to do. Read More [...]
July 16th, 2007 at 11:50 pm
I wonder how much time does it take to write article, but yes - it’s usefull
September 14th, 2007 at 3:50 pm
VERY GOOD!!! now I understood what is AJAX!! and i can use, cause now I know how it works..
PARABENS!!!!
BRAZIL!
September 25th, 2007 at 8:09 pm
[...] read more | digg story [...]
October 1st, 2007 at 2:57 am
[...] read more | digg story [...]
October 8th, 2007 at 5:40 am
[...] on your site and modernize with this framework. Definitely time invested in this quality article.read more | digg [...]
October 8th, 2007 at 1:48 pm
excelent , Great work!
October 14th, 2007 at 5:09 am
[...] on your site and modernize with this framework. Definitely time invested in this quality article.read more | digg story [?] Share [...]
October 24th, 2007 at 11:19 am
Nice page. I most like in web tis a themes. Fantastic colors.
October 27th, 2007 at 4:04 am
free composer ringtones nokia 2300
free composer ringtones nokia 2300
November 7th, 2007 at 10:58 am
Thanks.
This is exactly what I needed.
November 23rd, 2007 at 8:30 am
Saudi Arabia and Libya were the source of about 60 percent of the foreign fighters
who came to Iraq in the past year to facilitate attacks.
November 27th, 2007 at 2:56 pm
[...] on your site and modernize with this framework. Definitely time invested in this quality article.read more | digg story Posted in Uncategorized RSS 2.0 | Trackback | [...]
December 10th, 2007 at 2:32 am
All Internal
all internal
December 12th, 2007 at 6:15 am
The code was very simple and easy to understand.It was helpfull for me in finding the probability of comparing values with several combination.
December 26th, 2007 at 6:27 pm
LOVE your posts. Please dont stop. How about packing a little library, or a decent php class for all of this?,
December 27th, 2007 at 4:24 pm
Its nice, I like Ajax.
January 1st, 2008 at 7:54 pm
hot wallpaper
The wallpaper is good on the blog also, a Tip.
January 2nd, 2008 at 12:19 pm
Nice work! The tutorial really addresses the beginner viewpoint.
Great job of writing toward this audience.
January 9th, 2008 at 8:08 pm
I Think, İt’s Very Nice…
January 12th, 2008 at 7:00 pm
Error: divide by zero is bad.
Error: Invalid numbers.
#num1# + #num2
January 16th, 2008 at 10:16 am
You just can’t say the word “enough” when it comes to Ajax. Everyone is so hungry of information that’s related to it so we will try to satisfy this hunger
January 21st, 2008 at 7:01 am
+
-
*
/
I most like in web tis a themes. Fantastic colors.
January 23rd, 2008 at 2:46 am
Hmm.. dont work( i will try again.
January 27th, 2008 at 11:51 am
Jack
Geat post. I added you to my blog roll!
January 29th, 2008 at 2:41 am
Very nice reading and it works me well. Thanks for it.
February 12th, 2008 at 3:28 pm
i just wanted to extend my gratitude to you. it is a good tutoriel for bigginer like me ,thanks a lot you’ve done a good job .
can you tell where i can find a free ajax book?
February 13th, 2008 at 7:18 pm
Thanx for the AJAX tutorial, buy on my server dont install PHP 4.x version.
February 17th, 2008 at 4:04 pm
Thanks Harry — nice work.
February 24th, 2008 at 5:37 pm
desktop bilder
pretty sweet!
February 26th, 2008 at 1:25 pm
korku,korkunç,giyotin,korku sitesi
March 13th, 2008 at 4:48 pm
Very good man ..
thsx for explicationn ..
the codig fantastic simples
March 19th, 2008 at 3:54 pm
Hey Harry Webmaster.. Thanks , Will tell everybody abt it !
March 23rd, 2008 at 2:13 pm
Well let’s try that again…since the script code didn’t copy.
March 27th, 2008 at 10:42 am
Thanks
April 4th, 2008 at 1:16 am
Great tutorial. It helped with a little problem I was trying to do. It broke it down really simple and being new to Javascript this was perfect. Thanks
April 6th, 2008 at 10:15 pm
Hentai Videl Hentai Tenchi Hentai
I can not agree with you in 100% regarding some thoughts, but you got good point of view
April 7th, 2008 at 10:01 pm
Jessie
Nice Site. Keep up the good work.
April 8th, 2008 at 11:06 am
background checks
I found your post comments while searching Google. Very relevant especially as this is not an issue which a lot of peaople are conversant with.
April 10th, 2008 at 11:36 am
10 witzige filme downloaden
Wo kann ich filme downloaden?
April 10th, 2008 at 10:55 pm
Nutritional Supplements Weight Loss Weight Loss
I can not agree with you in 100% regarding some thoughts, but you got good point of view
April 11th, 2008 at 12:26 am
Property Science
It is a quite interesting post but quite difficult to understand for me -
April 13th, 2008 at 6:44 am
Carpet Boy
What if i say that you where wrong and you need to do your research better, would you belief me?
April 13th, 2008 at 11:02 am
book e marketing site web
April 13th, 2008 at 3:10 pm
Mark
. The term is used colloquially for any kind of Linkback. As a result, TrackBack spam filters similar to those implemented against comment
April 14th, 2008 at 2:17 pm
Computer Top Of The In Line Desktop
Organized crime in America takes in over forty billion dollars a year and spends very little on office supplies. Woody Allen.
April 22nd, 2008 at 7:11 am
15 Online gratis viele Filme runterladen
wo kann man gratis filme runterladen?
April 22nd, 2008 at 4:57 pm
Computer Course Online Training
Wow, this is interesting. How could i missed this info before? It seems like i was lagging for years to have this kind of facts. Hehe. Thanks for the sharing, but i feel that i can’t really understand some of the issues here. I really need to check so…
April 24th, 2008 at 3:54 pm
The code you explained is easy to understand. Your tutorial is all time great tutorial for a beginner like me. Thanks for the great post…
May 6th, 2008 at 6:40 am
Prosto o technologii AJAX
Ajax może być prosty…
May 9th, 2008 at 12:46 am
Well,men. Was Ajax hard? It is really easy.
June 17th, 2008 at 11:39 am
cool
June 17th, 2008 at 11:44 am
test
June 26th, 2008 at 12:02 pm
Very good !!!
June 28th, 2008 at 1:28 am
goooood, Thanks
August 16th, 2008 at 6:04 am
You can download the mp3 here, please delete it after 24 hours to keep things legal
August 19th, 2008 at 2:37 am
books, web design, Ferret with Ruby on Rails, error messages, and C programming. Here they are:Tutorial: AJAX Made Easy A very simple tutorial explaining how to add AJAX functionality to your website with 3 easy steps Thank
September 4th, 2008 at 1:11 pm
very good tutorial. it helped me to understand ajax
September 9th, 2008 at 8:22 am
very nice keep that up
September 12th, 2008 at 3:57 pm
Canadian Health&Care Mall started as a multistore based in Toronto and Ottawa in early 90s. Health&Care chain store system has been growing from year to year and finally has resulted in the current online project, as a result of operating not just as a family pharmacy but also as a store of so-called “useful things” . We tried to obtain the benefit from our previous experience and to create a really competing online resource for absolutely any customer. Though the idea is standard you may be absolutely sure that the filling is unique and has no analogues all over the Internet. We would like to admit that our online store is operating independently from the offline store system.
http://www.qweymurlu.com
September 15th, 2008 at 1:30 pm
thanks yOU
November 9th, 2008 at 1:31 am
[...] Tutorial: AJAX Made Easy - On the heels of two very successful tutorials on creating a collapsible div and an animated sliding div, I’ve decided to write another. It seems my last few helped a number of programmers learn a simple trick, and hopefully this one will do the same. [...]
December 4th, 2008 at 2:15 pm
Buy Cheap Propecia Online :
http://home.kku.ac.th/faa_new/phpBB2/viewtopic.php?t=6566
December 11th, 2008 at 3:55 am
Zx93fcdmlkEqo09
bb hp bm
ir jc dp
January 22nd, 2009 at 4:15 pm
adult izle
Adult izle videosu
January 22nd, 2009 at 4:16 pm
adult izle
Adult izle
video izle
torno video izle
February 6th, 2009 at 2:10 pm
very good job thanks
February 6th, 2009 at 2:11 pm
It is a quite interesting post but quite difficult to understand for me
February 8th, 2009 at 11:30 pm
very good job buddy
February 18th, 2009 at 7:59 pm
nice job bobby
March 2nd, 2009 at 1:59 am
[...] One more classsic tutorial for Ajax basics: http://www.harrymaugans.com/2007/03/18/tutorial-ajax-made-easy/ [...]
March 16th, 2009 at 12:36 pm
nice job bobby
March 16th, 2009 at 1:58 pm
very good job thanks
March 16th, 2009 at 2:00 pm
It is a quite interesting post but quite difficult to understand for me
March 16th, 2009 at 2:01 pm
thanks…
March 20th, 2009 at 5:37 am
thank you. nice job.
March 25th, 2009 at 10:23 pm
thankss so much
March 28th, 2009 at 5:36 pm
very nice, but if you can add loading to this script it’s go better.
April 2nd, 2009 at 5:18 am
great tutuorial thanks….
April 23rd, 2009 at 6:31 am
[...] See the rest here: Harry Maugans " Tutorial: AJAX Made Easy [...]
April 23rd, 2009 at 11:02 pm
I’m getting a error on the funny quotes …. I copy pasted …. Any help???
Parse error: syntax error, unexpected ‘”‘ in /backend.php on line 2
April 24th, 2009 at 12:50 am
FIgured it out…. Search replace all quotes to these kind ” ‘ not ”
April 28th, 2009 at 9:00 am
Thank You..
May 13th, 2009 at 6:09 am
thanks..
May 18th, 2009 at 3:54 am
Thank You..
May 19th, 2009 at 6:49 am
Hi, you have a great site! I also recommend this site: g5zv1 , thanks!
May 20th, 2009 at 4:21 am
Круто, а продолжение будет?
May 22nd, 2009 at 10:36 am
Good article, thanks. One of the problems I have found is that most php guides don’t incorporate everything you might like, like ajax. What I mean is, I like to hack together a piece of code, for a custom search or whatever, rather than learning how to code properly.
I know this is a bad approach, but at my age (old) it is the best I can do. So what I would like tofind would be a good guide to sample code that includes all the extra fiddly bits that I would like. Any suggestions?
May 22nd, 2009 at 7:10 pm
ferret supplies…
Your topic Medicaid Cuts | Fired Up! Missouri was interesting when I found it on Friday searching for ferret supplies…
May 25th, 2009 at 6:47 pm
Thanks you Admin
May 26th, 2009 at 11:27 am
Thank You Admin McX
May 27th, 2009 at 6:49 pm
Я вот подумал, а где Вы материал взяли для этой статьи? Неужели из головы?
June 5th, 2009 at 4:28 pm
hallo dear friends thanks a lot for your workshop
June 8th, 2009 at 6:46 pm
hallo i wish you verry succes operator
June 13th, 2009 at 5:22 pm
a lot for your workshop
June 20th, 2009 at 5:50 pm
I’m thinking there should be something about onsubmit= return:false to prevent it from actually reloading the page.
June 25th, 2009 at 9:18 am
what I would like tofind would be a good guide to sample code that includes all the extra fiddly bits that I would like.
June 29th, 2009 at 11:20 am
ckA24, I really like your site! epz7v
June 29th, 2009 at 11:38 am
Lanac, I really like your site! ae6i8
July 27th, 2009 at 5:07 pm
tnks you admin good
August 14th, 2009 at 3:35 pm
TOSYAKAPI-American Door, Wooden Door, Door, Safe, Wooden Window, Hot Press Door, MDF Door, Entrance, Internal Room Doors, Glass, glass, Value Glass Doors Price Buy Cheap Wholesale Vendors İmalatcıları Manufacturers Manufacturing TOSYA
August 14th, 2009 at 3:37 pm
THE DOORS-American Door, Wood Door, MDF Door, PVC Door, Door Furniture, Hot Press Door, Wood Interior Room Door, Wood, American Door Price, American Door Fiat, the Prices, the American door prices, steel doors Doors, Glass, Cheap , Wholesale, Merchant, Vendors, Price, manufacturing, imalatcıları, Manufacturers, TOSYA doors, furniture doors, koçtaş, dortek, laminate parquet, kitchen cabinets, ready kitchen, steel door price American Door American Panel Doors, Wood Doors, Wood Windows, mdf doors, PVC doors, Door Furniture
August 24th, 2009 at 4:42 pm
Да, интернет - огромен, если и такое даже можно найти
September 30th, 2009 at 6:36 pm
great article. I will bookmark this
October 1st, 2009 at 7:24 pm
I have used Ajax on several website. Its especially usefull for better and fast display of sites and also the forms are attractive.
October 25th, 2009 at 1:31 pm
Thanks for that nice web design..
October 25th, 2009 at 3:15 pm
Question (or idea), say your using it in a FAQ section, would it be possible to click on a 2nd link, and it would minimize the last one licked (or say all of them, for coding ease) and then slide open the new one?
October 25th, 2009 at 3:16 pm
I love it thank you for the script.Question
is it possible to have a link saying “Open” once you click on it it slides the div down but changes the text from “Open” to “Close” ?
October 25th, 2009 at 3:16 pm
Nerdly (or anyone else with the solution), could you please share with us how you accomplished this? This is exactly what I am looking to do with one of my current sites.
Thanks!
December 3rd, 2009 at 7:23 pm
тюнинг ваз 2101 72г.в tmu от 03 январь 2009, 17:57:30 первым делом занизить машинку, хотя бы немного, ракеров и так хватает.
December 3rd, 2009 at 9:28 pm
Форум “дайв-арена”, 5 star idc дайв-центра “акваланг”, россия и дайв-центров “веселый роджер”, таиланд.
December 3rd, 2009 at 10:30 pm
Цените свое время и свое здоровье, живите в ногу со временем, а интернет аптека поможет вам в этом.
December 3rd, 2009 at 11:33 pm
Декоративная ваза “малышка” - декоративная керамика - магазин сувениров подарки и сувениры из керамики.
December 4th, 2009 at 5:17 am
Великолепные памятки архитектуры и образцы строений древнего мира разбросаны в индии практически на каждом шагу
December 4th, 2009 at 8:24 am
Японская диета почему японская диета так популярна, если выдержать ее трудно, а сброс веса небольшой.
December 4th, 2009 at 6:23 pm
Его предсказуемость заключается в постоянном и непрерывном росте цен на недвижимость и это не удивительно.
December 4th, 2009 at 9:13 pm
В нашем ассортименте вы найдете примут решение сделать автомобиль они не имеет отношения к motor co.
December 5th, 2009 at 6:44 am
Ищете ноутбук? Решили купить ноутбук, но еще не определились с выбором модели? В магазинах компании вы найдете широкий ассортимент.
December 7th, 2009 at 6:14 pm
Не удивительно, ведь джинсы - это, пожалуй, самая популярная одежда в мире.
December 7th, 2009 at 10:19 pm
Бoди 36 мeсяцeв Для дeвoчkи RosyBaby интepнeтмaгaзин дeтсkoй oдeжды дeтсkaя платье миpoвыx пpoизвoдитeлeй
December 11th, 2009 at 2:59 pm
Кроме тoго, мы подсобим вaм избрать, взять и забросить строительные материалы для ремонта и отделки домов.
December 18th, 2009 at 2:50 pm
[...] Tutorial: AJAX Made Easy – On the heels of two very successful tutorials on creating a collapsible div and an animated sliding div, I’ve decided to write another. It seems my last few helped a number of programmers learn a simple trick, and hopefully this one will do the same. [...]
December 18th, 2009 at 10:27 pm
она, в свою очередь, находится внутри страниц о здоровье восьмистраничной секции, также легко извлекаемой из газеты.
December 29th, 2009 at 6:25 pm
Туристический каталог визит : главная страница : турфирмы, туроператоры, туристические порталы, каталоги по туризму и пр.
January 2nd, 2010 at 2:23 am
Активная игрушка Пирамидка состоит из 4 развивающих элементов, которые можно ставить друг на друга и строить пирамидку.
January 13th, 2010 at 12:31 am
Впрочем, казино, в качестве кого принцип, никак не ограничивают преимущество игрока удваивать быть всякой комбинаци.
January 13th, 2010 at 9:57 am
Приглашаем к сотрудничеству торгашеские организации и представителей сообразно реализации нашей продукции на взаимовыгодных критериях.
January 13th, 2010 at 10:45 pm
Кабельная продукция в частности кабель olflex, unitronic, sintop, hitronc, flexmark кабельные цепи.
January 14th, 2010 at 8:57 am
[...] AJAX Made Easy Build a calculator in AJAX [...]