Ajax Lessons

UnkdavarUnkdavar Junior Member
edited May 2011 in Code & Art
Does anyone know where I can find a good set of lessons for Ajax basics? Yes, I could always google, but most of the lessons I've found have done a poor job at explaining how to use Ajax in ways other than their specific examples. It doesn't need to be super-comprehensive, but I would prefer one that goes into detail.

Any help is appreciated. =)

Comments

  • JasonKeyJasonKey BADministrator
    edited January 2011
    Will find some options .. isk likely can post some to you too ..

    Will dig around..
  • DrTranDrTran Simfiler
    edited January 2011
    how to use ajax

    image

    buy ajax
    mix 1 part ajax to 4 parts water
    add some sope(any kind of dishsoap is fine)
    dip sponge in mixture
    scrub in a circular motion on dirty area
    whipe off mixture with a clean rag

    repeat if necessary
  • DrTranDrTran Simfiler
    edited January 2011
    i hope i helped!!
  • FlashpantssFlashpantss Music Maker
    edited January 2011
    DrTran;4153 said:
    how to use ajax

    image

    buy ajax
    mix 1 part ajax to 4 parts water
    add some sope(any kind of dishsoap is fine)
    dip sponge in mixture
    scrub in a circular motion on dirty area
    whipe off mixture with a clean rag

    repeat if necessary

    This helped me.
  • 13053121k013053121k0 Junior Member
    edited April 2011
    try checking out w3schools.com. btw. is it allowed here to post outside links? o.O i hope im not disobeying the rules.
  • PatashuPatashu Simfiler
    edited April 2011
    posting links is a-ok, just don't advertise nike air jordans
  • UnkdavarUnkdavar Junior Member
    edited April 2011
    13053121k0;6652 said:
    try checking out w3schools.com.

    Thanks for the suggestion. :) Though I've used that site to learn a few things, I wasn't fond of their Ajax lessons. I've ended up buying a few books on the subject instead. Books on computers tend to give me much more information than I need, but it worked out pretty well.
  • KynosaurKynosaur Simfiler
    edited April 2011
    Is your kitchen floor clean now, Unkdavar?
  • iskisk BADministrator
    edited April 2011
    If you just want to be (relatively) productive doing cool stuff then try a javascript framework such as jQuery. It provides a normalized ajax request interface and hides all the cross-browser ugliness.
  • Youri Member
    edited May 2011
    This topic might be old, but I felt like writing so here goes...

    Before you start reading, I'll be going in-depth with code samples, beware!

    Basically AJAX isn't all that hard to use. It all involves one general feature, which is basically a extended link between JS and PHP (client and server). Note that this does mean that JS must be enabled on the client browser for AJAX to work.

    JQuery
    JQuery is one of the more powerful JS library that I've found so far. I personally don't prefer it though, since it has very distinct and usually different ways of programming, requiring me to pretty much learn a new language AND adapt all of my JS to it. Then again, it's quite powerful. There are loads of actions it can handle, including perfectionized AJAX, albeit sometimes at the cost of performance.

    There's alot of personal preference involved. Just visit their site (see above post) for the download. The full documentation is found here, and the AJAX-specific part here. Yes, there are alot of AJAX functions there.

    If you decide to use JQuery you will need a little knowledge of JS, especially JS events.
    W3Schools should be good for most info here, but I also find Quirksmode to be a very nice website for the more advanced infos. They have an article about JS events here.

    I won't be putting in any JQuery examples here, since I simply don't know them myself. I can however show you how AJAX should look like. It's allot smaller and simpler than JQuery, but has to be dealt with delicately, browsers don't agree with each other alot on this topic.

    Now for the AJAX code samples
    The general AJAX consists of two main parts: the startup and the actual usage.
    Here's how you 'load' AJAX. As far as I know this should be as cross-browser as possible.

    // Start up the AJAX usage
    var xmlHttp;
    try { xmlHttp = new XMLHttpRequest(); } // Firefox, Opera 8.0+, Safari
    catch(e) {
    try { xmlHttp = new ActiveXObject(\"Msxml2.XMLHTTP\"); } // Internet Explorer
    catch(e) {
    try { xmlHttp = new ActiveXObject(\"Microsoft.XMLHTTP\"); } // Internet Explorer
    catch(e) {
    alert(\"Your browser does not support AJAX!\");
    return false;
    }
    }
    }

    This will try to get the XMLHttp object saved onto a JS variable. Note that IE sees this as part of the ActiveX components, thus requiring different functions.
    When the object can't be found, the most inner catch { } statement is executed. You can customize this to change the behavior there. On the project I took this sample from AJAX is required to make the site work properly, so I figured it was best to abort the script using 'return false;' and put an alert on screen.

    This code is usually placed on the onLoad event, or in your onLoad function, but can technically be put anywhere you like. Only thing is you have to run it at least once before trying to attempt any AJAX calls.

    Next comes the harder part, the AJAX usage code samples
    Now that you have the startup code working, you need the code to actually use this xmlHttp variable.

    xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
    var result = xmlHttp.responseText;
    // Use the result as you like.
    }
    }

    var url = \"ajax.php\";
    xmlHttp.open(\"POST\",url);
    xmlHttp.send(null);

    What's strange here, is that you put the code for the call at the end. (The xmlHttp.open() and xmlHttp.send() functions.)
    The actual result is received and used above that part.

    Basically what happens, is that the AJAX object (saved in xmlHttp variable) is used to load a specified url in the background, invisible to the user.

    The open() function will open the data connection. instead of 'POST' you can also use 'GET' and several others, but they are rarely used.
    After the url there are three more optional arguments, async, username, and password. async defaults to true, meaning it will be called asynchronously (i.e. it will run separately from, therefore not interfering with, JS). Username and password are for restricted files, rarely used.

    Then the send() function will send data using an optional data argument, but you can simply leave that out.

    Next, the xmlHttp object will start its work on processing the document, pretty much like a normal browser does. During this it will set its readyState, which you check for completion (readyState == 4) whenever the special event onreadystatechange. This is called on every readyState change, so you can also use it to perform actions on different parts of the process.

    Once finished, your xmlHttp variable will be filled with several arguments. responseText holds the entire raw output of the url you have called. Since it's raw it can also include for example HTML, PHP, JS, CSS, and most other languages.
    There are more arguments, but I'll keep it to this one for now since it's all you need to make your first few basic AJAX applications.

    A few other notes
    • If you are going to be handling multiple AJAX calls in several seconds, it's possible for calls to be started when another call is still being processed. And since you use a variable for the xmlHttp information, all calls use this same variable. A solution to this is to change the xmlHttp variable into an array, and ensure that every AJAX call uses a different array element for its information.
    • If you have multiple different calls using the same url, or multiple calls using a different url but the same processing on the output, it might be helpful to separate the second code snippet in two parts and put them in separate functions. This is entirely possible as long as you keep the proper order: first the onreadystatechange part, then the post+send functions.
    Well I've been typing for long enough on this for now, I hope it answers all of your questions. If not, just post here what you don't understand, or if you want you can always pm me. I'd be glad to help you out on anything.

    Youri
Sign In or Register to comment.