digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

Tutorial: AJAX Made Easy

harrymaugans.com — 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... from beginner to advanced. Take existing features on your site and modernize with this framework. Definitely time invested in this quality article.

Bury
show profanity settings
expand all
  • hmaugans, on 10/12/2007, -3/+9Mirrors (if needed later):
    http://www.harrymaugans.com.nyud.net:8080/2007/03/18/tutorial-ajax-made-easy/
    http://www.duggmirror.com/programming/Tutorial_AJAX_Made_Easy
    • blaze03, on 10/12/2007, -3/+8That is a ***** of social news network icons under his content.
  • jimmy8091, on 10/12/2007, -12/+4What is the benefit of this method over the a preexisting AJAX library like prototype?
    • hmaugans, on 10/12/2007, -1/+26Sure, you can use a preexisting library, but the purpose of my tutorials is to help people understand HOW they work. Mootools and script.aculo.us are not the final, end-all libraries... who knows... someone on digg might come along and make the next popular library.

      Secondly, if you want a small, simple script.. such as a single AJAX function, like the calculator in the example, you don't need to load the overhead of a do-everything library. This is an ALTERNATIVE- a lean method to adding simple AJAX functionality.
    • zammit, on 10/12/2007, -9/+4doesn't really explain how it works... yea you can asynchronously talk to the server and have a php script respond with plain text, but...

      "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."

      ... really doesn't help with HOW it works (entirely) considering you just told people to ignore the most important part about AJAX... "XMLHttpRequest"
    • TheCaptainJS, on 10/12/2007, -1/+2As someone who doesnt know a lot about ajax, or how it really works, I find this tutorial to gives me a good overview of what the whole point of ajax is!
      Granted, it doesn't give much depth, I now understand the basic functionality of it.
  • thethink, on 10/12/2007, -2/+4Oh my god is that Kobayashi?!
  • pmolaughlin, on 10/12/2007, -3/+7Where's the XML???
  • iWasHere, on 10/12/2007, -2/+2Not a bad tutorial, but a POST method should be used instead of the GET and the PHP empty() function is handy checking to see if the fields are filled.
    • dotdan, on 10/12/2007, -2/+3Why use empty() if you can just do a comparison? == would be faster than calling a function.
    • sishgupta, on 10/12/2007, -7/+1wrong reply
    • eurleif, on 10/12/2007, -1/+3@dotDan:

      empty() isn't really a function, so it shouldn't incur any stack overhead. Also, it checks whether the variable is unset in addition to whether it's empty.
    • arctic, on 10/10/2007, -0/+1POST is slower than GET.
  • cozinator, on 10/12/2007, -22/+2This is nice, but it's nothing new and doesn't belong on the front page.
    • Mootabolife, on 10/12/2007, -4/+15Thank you for deciding for all of digg.
    • slanted77, on 10/12/2007, -15/+1@moot: He wasn't deciding for all of digg, he was giving his opinion. I happen to agree with him - how many tutorials like this have shown up on digg before?
    • GoatMonkey2112, on 10/12/2007, -1/+2If it didn't belong, it wouldn't be there. That is the whole point of Digg. Currently 1262 people disagree with you.
  • Pingspike, on 10/12/2007, -4/+9This is a bad example to newcommers to ajax. Easy yes, but thats all it is.

    And its about as secure as a bank vault made out of hamburgers.
    • BigDfromCali, on 10/12/2007, -2/+13mmm.... hamburgers
    • drpcken, on 10/12/2007, -1/+5I'll gladly pay you tomorrow for a bank made out of hamburgers today.
    • arctic, on 10/10/2007, -0/+1I don't get the analogy...
  • diggmeup, on 10/12/2007, -7/+1This code HURTS my eyes to read. Get some better colors!
    • hmaugans, on 10/12/2007, -1/+7I made the font color a bit darker in the code block. Any better? :)
  • runspace, on 10/12/2007, -0/+4@pingspike,
    do you have any suggestions then for better ajax tutorials? At least you won't starve ;)
  • enyawd, on 10/12/2007, -4/+2extremely useful, thanks :)
  • trukin, on 10/12/2007, -8/+6I'm gonna make an ajax tutorial.
    How old are you?: [ ]
    Whats your name?: [ ]

    Result after click: Hey [ ]! You are [ ] years old.

    Why do they post every stupid ajax tutorial there can be?
  • Ruhtar, on 10/12/2007, -1/+4Not too bad. It might be useful to add the ability to either use POST or GET, depending on the usage.

    Regarding the testing of support for the XMLHTTPRequest object, here is what I use instead,

    var oRequest = null;
    if (window.XMLHttpRequest)
    oRequest = new XMLHttpRequest();
    else if (window.ActiveXObject) // For IE
    oRequest = new ActiveXObject('Microsoft.XMLHTTP');

    It isn't a bad idea of yours to test for which version of ActiveXObject is available but I found Msxml2.XMLHTTP to be unreliable but that may just be me.

    It would be a good idea though that once you have received a readyState of "4" to then check for a "status" of "200" to make sure the server replied as expected and didn't throw an error.

    But then again, it's just a tutorial and tutorials should leave things for the readers to figure out for themselves anyway.

    The best part though, very nice explanation of what is going on! :-)
  • nestafett, on 10/12/2007, -4/+1I HATE it when people say stuff like "Helpful no matter what your technical expertise may be." cause i had no idea what this article was talking about. So its not helpful to everyone no matter what your expertise is. I hate it when comp. people think that everyone knows as much as them
  • xlar54, on 10/12/2007, -1/+16Why has Digg gone so freakin' rude all of a sudden? If you don't like the tutorial, bury this article. And if you already know Ajax, then wtf do you need a tutorial for? The guy is doing a service to new coders who don't understand the basics of this stuff, and his article is a very basic example of what it can do. Try and find any other tutorial out there and it's about the same for beginners. I'm always amazed at people's attempt to show their own level of intellect by trashing someone else's work. Where is YOUR tutorial?
    • nestafett, on 10/12/2007, -5/+0was that to me? or just a general comment?
  • PhilH, on 10/12/2007, -1/+4Having only used AJAX once before, I found this a much simpler explanation than clumping together lots of badly written tutorials. For all those haters, don't get confused between something that you don't like and something that you don't need.
  • Stonekeeper, on 10/12/2007, -7/+1The entire ajax.js file if coded using JQuery:

    function doMath(){
    $.get("backend.php",
    { op: $("op").value(), num1: $("num1").value(), num2: $("num2").value() },
    function(data) { $("answer").html(data); }
    ); }
    • foamcow, on 10/12/2007, -4/+2If someone wants to know how to use jQuery then they should follow a tutorial on just that. If they want to know how to build jQuery then should start by understanding how Ajax works.

      It's like those people that say they can use a computer when all they can do is write a badly formatted Word document.
      Although, granted jQuery isn't as straightforward Word document mangling. :-)
    • Stonekeeper, on 10/12/2007, -2/+2Dude, It was informational for people who liked the tutorial and wanted to move on to bigger things. It wasn't intended to be an elitist jquery fanboi post.
    • stupidStan, on 10/12/2007, -2/+3yes it was :P
  • Intrepion, on 10/12/2007, -2/+6I did it! I did something in AJAX!

    wow.

    I wish I could digg this twice.
  • jordan314, on 10/12/2007, -1/+2What did the @ cc_on stuff mean in the javascript?
  • sugarskane, on 10/12/2007, -2/+1If you're interested in using POST or a very small (practical) library, check out Feather Ajax (http://celtickane.com/programming/code/ajax.php). It's built on the same principle as this tutorial, but from the perspective of creating a Javascript library.
  • bigapple666, on 10/12/2007, -2/+1How presumptous to create you own mirrors right after posting. This is definitely not for the Beginner. Maybe somewhere between Beginner and Novice.
  • 0siris, on 10/12/2007, -1/+4No google ads? how am i going to give you money?
    • hmaugans, on 10/12/2007, -1/+3I don't make any money from making these tutorials. Haha
  • digmatrix, on 10/12/2007, -0/+1Easy to understand, nice
  • rahulsv, on 10/12/2007, -0/+1It was simple but nice article. In the code for doMath, it will be good to check if http is true.
  • amoeba, on 10/12/2007, -0/+1Nice tutorial. It shows the basics.

    Here's another way to instantiate the XMLHttp object in 1 line:

    var http = (window.XMLHttpRequest ? new XMLHttpRequest : (window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : false));
  • dmitriyvoz, on 10/11/2007, -0/+0This is a bad example to newcommers to ajax. Easy yes, but thats all it is.
    And its about as secure as a bank vault made out of hamburgers. The same theme on Russian sites: http://pivo.in.ua http://www.alcogol.kiev.ua
  • turdigg, on 10/11/2007, -0/+0I'm gonna make an ajax tutorial http://www.viptraveler.info .
    How old are you http://www.ukrtravel.org ?: [ ]
    Whats your name?: [ ]
    Result after click: Hey [ ]! You are [ ] years old.
    Why do they post every stupid ajax tutorial there can be http://www.megatourism.info ?
  • jshaw3, on 04/04/2008, -0/+0This tutorial helped me with my little project. Great tutorial, great information good work!
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.