February 23rd, 2006 | 
Author: AJAX is a programming concept that is pretty simple, but varies widely from ‘normal’ web programming, so it takes a little bit of getting used to.
Based on Rasmus’s 30 second AJAX tutorial, I’ve cobbled together a very rudimentary example of one approach to AJAX programming. A “Hello, World” AJAX program, if you will. You can view the demo here on my site, and download the source code (document attachment at the bottom of this article).
Tags: programming
Demo doesn’t work on Opera 8.5
It doesn’t work on Opera if you have it set to identify as MSIE (it might be that way by default).
This is due to the really really simple browser detection code–if it sees “MSIE” then it assumes ActiveX, and won’t work in Opera.
This could be fixed/improved with a better browser detection algorithm.
not sure what to expect here
Do you actually write this stuff or does someone do it for you? It’s amazing! I love you!!
Exactly what I needed…so simple. Thanks!
You’re certainly welcome, Andrew. Let me know if you use it someplace, I’d love to see what you do with it.
Just one question: it is really what I need but what about taking info from SQL? Can you please help me construct a statement to “grab” data from a MySQL table? Please! will appreciate a lot.
Vasile, the text displayed is in a regular PHP file. So all you have to do is put your MySQL query and results there. For instance, in the ajax.php file:
<?php
$varID = mysql_real_escape_string($_GET['action']);
$sql = mysql_query(“SELECT field1, field2 FROM mytable WHERE id = ” . $varID;
$rs = mysql_fetch_assoc($sql);
echo(“Field1: ” . $rs['field1']);
echo(“Field2: ” . $rs['field2']);
?>
Of course, you’ll need to connect to the MySQL database first (with the mysql_connect and mysql_select_db functions).
Thank you, I managed to find how to connect to the SQL table to load data from it. Anyway, right now I am interested to combine the example.php and ajax.php in one file. This will be useful when you load a page from the menu and at the bottom or top you could add a “permalink” for example: index.php?action=page1 so a visitor could bookmark that page.
I also would like to insert the “loading page…” div before the content of the requested row is loaded.
Right now I have 3 scripts that are doing all these separetely but I have no idea how to combine these…
If you just want to show a permalink, it would need to be a permalink to the example.php file. The permalink could also be created in the ajax.php file and displayed inside of a div just like any other content from ajax.php.
The “loading page…” text (or graphic) could simply be a div or other DOM object set to visible=”false” when the page loads. When the javascript sndReq function is called, the first thing you could do is set that object to visible=”true”. Then, once the data has been loaded and the innerHTML set to the dynamic content, you could set that object back to visible=”false”.
I haven’t tried the visible/not visible thing before, so let me know if you have any success with it.
I have made a simple example how should a “loading page” look: http://www.orhei.md/navigation/ try the links from the left side. It also has included a external script, like cutenews.
mgroves, finally: I have combined 2 scripts and I got what I wanted: data are loaded from a sql table and there is a “loading” div shown each time the menu links are clicked.
You can check the script at the same page I wrote previously, plus you can download a zip file from http://www.orhei.md/navigation/navigation.zip
Feel free to use it!
Regards.
That is a very nice looking result! I’m glad I could help.
Cool!
I’m completely new to AJAX, and anything associated with it, and I’ve been digging around for an example to along the lines of this one IE: something very simple.
Although I’ve found some, they didn’t work
This one is simple, and it works, and it clearly demonstrates AJAX.
Thanks a lot!
I was the same way when I found the Rasmus tutorial, so I’m glad I could be of some help.
Hello,
I found your tutorial and it’s very helpful. I study some of the code but I have a little problem. I want to make a new page then i will put some link of Page1, Page2, Page3 and Page4. What I want is when I click example: the Page3 link on the new page then the example.php will open then it will display the page3 info. what code of link to use to open the example.php then display the information? Sorry im very newbie.
Thank very much.
Exinrex
Exinrex it sounds like you want the same thing that Vasile has worked on. I would recommend you check out his pages and code.
I mean what i want is like this example.php?action=page3 then it will display the page3 with the same layout of this page http://mgroves.com/example/example.php not like this http://mgroves.com/example/ajax.php?action=page3 coz it’s dont have a layout and navigation of page1,page2,page3 and pag4.
i will check the code of vasille.
Thank’s
Anything can be output by one PHP script and then loaded with AJAX into the current page the user is browsing. So I guess I don’t really understand the problem…
sir ,one question related with the ajax ,sir can you give me a example program to by using the ajax how we can send the more than one data to the client to the server by using the post method
woah, amazing, you can see for yourself
for now it’s the nest……
klkjkljkljkl
thanks for the GREAT post! Very useful…
ajax.js is not available ,anywhere.
please add this with this tutorial.
It is available in the zip file of the source code. Click “AJAX “Hello, World” source code” or just use this link: http://www.mgroves.com/documents/ajax_example.zip
i m unable to access this zip file.kindly provide me ajax.js file in a text format.
If you can’t access the zip file, the you’ll have the same problem accessing the text file.
Are you having a problem extracting from the zip?
Actually we have a firewall set for zip files, thats why i can’t download zip files, would you please send that code of ajax.js with your reply.
The ajax.js is used in the demo, available here: http://mgroves.com/example/example.php
Here’s a direct link to the ajax.js file: http://mgroves.com/example/ajax.js
I just wonder about site & my mind kick you to ask this questions ?
I am very beginner in AJAX. I am trying to use all application in prototypejs.
I have a form like First Name,Last Name,Street1,Street2,City,State, Zip, Country, Email,
Confirm Email.
I need to validate like Null , Email validation.
Can you help me in doing in prototypejs.
umm what?
You can’t fool me, Nitin Tiwari, I know you are mr Bean too!
exactly what i needed..thank you so much…….for your useful post..
Nice post
Will give this a try. Thanks
nice Script dude this worked like a charm for me
yaeahh.. its works for me.. thanku guyz