AJAX/Ajax - Asynchronous JavaScript and XML

*   in Ajax, the user's web browser creates a JavaScript
    object called an XMLHttpRequest

    *   The XMLHttpRequest object requests some data
        from the web server

    *   the data is sent back from the web server
 
    *   JavaScript code injects that data (or
        something based on that data into the
	currently-being-displayed document

*   note that Ajax...
    is NOT a programming language
    is NOT a product to be installed
    IS a catchy name for a group of existing technologies
        built into a web browser,
	and some clever ways of using those technologies
    IS currently based on open standards
    browser MUST have JavaScript enabled for these
        to work...!
BUT for reasonably-recent browsers,
    having JavaScript enabled is all you need
    for Ajax to work;

*   let's talk about Ajax's A: asynchronous
    *   synchronous, here, would be: make a
        request, wait for the response,
	then proceed;

	asynchronous, here, means, make the
	request, DON'T wait for the response,
	keep going! (and handle the response
	also when it comes)

*   EXAMPLE 1: SYNCHRONOUS JavaScript with plain-text
               (sjat?)
    *   here is a fragment to synch'ly fetch text using
        XMLHttpRequest:

	var ajaxReq = new XMLHttpRequest();
        ajaxReq.open("GET", "desired_URL", false);
        ajaxReq.send(null);

        // when reach here, the web req has completed
	do something with ajaxReq.responseText

*   see sjat-ex1.php

*   WHAT if an error occurs in your request?
    ... the XMLHttpRequest object's status data field
        will be filled with the HTTP error code value,

	and its statusText data field will be filled
	with any messages related to that

    *   turns out that an "error" code of 200 means 
        SUCCESS!

*   see sjat-ex2.php

*   making it Asynchronous!
    *   now we'll get the request started,
        send it to the server,
	specify a function to be called WHEN a response
	    is received,
	    by attaching a function to an data field
	        onreadystatechange

    ajaxReq.open("GET", "notes.txt", true); <-- asynch, not synch!

    ...see Chapter 12...

    *   first:
        ...you call the XMLHttpRequest object's open
	method with a 3rd argument of true, for one thing!

            var ajax = new XMLHttpRequest();
            ajax.open("GET", "notes.txt", true);
            ajax.send(null);

            ...Now the open method call will 
            return immediately, before the request
	    is necessarily completed!

    *   SO -- we can't just assume we have the
        requested data yet --

	when CAN we know that the request is
	completed?

	...the XMLHttpRequest object has an
	onreadystatechange attribute,

	and if we attach an event handler to this
	attribute,

	then when a readystatechange event happens
	this event handlers will be called for us.

        *   this occurs ANY time the ready state changes --
	    0, 1, 2, 3, or 4 -- 4 means completed,
            THAT's what we want!

    *   if you want to be able to access parts
        of the XMLHttpRequest object IN this handler,
	ONE way (demo'd in the course text and here)
	is to set up this handler as an anonymous
	function IN the same function as our
	XMLHttpRequest variable...

        var ajaxReq = new XMLHttpRequest();

        ajaxReq.onreadystatechange =
            function()
            {
                if (ajaxReq.readyState == 4)
                {
                    ...do something with ajaxReq.responseText...
                }
            };

        ajaxReq.open("GET", "desired_url", true);
        ajaxReq.send(null);

*   see ajat-ex1.php   
    
==========
ADDED AFTER CLASS
*   how would we turn this into ajaX?

    *   the XMLHttpRequest object ALSO has
        a data field responseXML

        ...similar to responseText, EXCEPT instead
	of representing the data as a single long
	string, it represents it as a TREE
	of LINKED OBJECTS

	...an XML Document Object Model (DOM)
	object!

        *   NOTE: the way the XML DOM tree represents
            each element and attribute in the XML data
	    is similar to the way the HTML DOM tree
	    represents the elements in a web page...

            SO, walking the child references can be
            (sadly) tricky,
	    and using methods to access certain children
	    and descendants is easier...

            *   e.g., getElementsByTagName - returns an
	        array of element objects with that
                tag name

            *   getAttribute - method of an element
	        object - given an attribute name,
	        it returns the value of that attribute

    *   see notes.xml and ajax-ex1.php