Javascript Ajax

Ajax
Variety of methods of building fully user-interactive web applications.
Features:
- Ajax is usually based on Javascript.
- Javascript can communicate with server constantly in background. (In response to user action on client side, or just on timer, etc.)
- e.g. User is picking a userid. As he types, Javascript sends communication (HTTP requests) to server in background to check server database to see if userid is free.
- Small parts of the page can change after initial loading, rather than entire page being re-loaded.
Examples:
- Gmail
- Google Maps
XMLHttpRequest - the API to do this.

Ajax is not about XML

Ajax is badly named.
It stands for "Asynchronous JavaScript and XML".
When it emerged, XML was the normal expected return data.
- XML
- Parsing XML
But in fact, and despite the name "XMLHttpRequest", the return data does not have to be XML.
JSON return data is common, and some people call it "AJAJ" when they do that ("Asynchronous JavaScript and JSON").
- JSON
e.g. Flickr XML and JSON feeds

How to make the Ajax call

How to make the Ajax call from JavaScript:

Obsolete: XMLHttpRequest object.
In the early days of Ajax, in vanilla JavaScript you had to construct the XMLHttpRequest object.
This was complex and verbose. It was hard to make it browser independent.
I would not recommend this any more.
Works great: Use a library like jQuery.
In my notes I use jQuery to make the call.
This makes it much, much simpler than XMLHttpRequest object.
Built-in: fetch.
jQuery was popular in part because it made Ajax easy.
Eventually vanilla JavaScript caught up with jQuery and now has "fetch" call.

Ajax reference

Vanilla JS

w3schools
- fetch (and here)
- Promise
MDN web docs
- fetch
- Promise

jQuery

w3schools
jquery.com

Javascript Ajax demos

Simple pages. No header or footer. To make it easier to View Source.
Note source loads jQuery.

Demo	HTML	JS
Ajax demo - fetch server file	HTML	JS
Ajax demo - fetch server file (minimal)	HTML
Ajax demo - call server program	HTML	JS
Ajax demo - call server program (minimal)	HTML
Ajax demo - fetch XML and parse	HTML	JS
Ajax demo - parse Flickr XML	HTML

Asynchronous programming

Coding Ajax takes some getting used to, because it is asynchronous.
You fire off a HTTP request. And then your code carries on.
At some future point the HTTP request returns.
When you make the request, you include the future function to call.

So you can't do:

var x = makeRequest ( url );  // get back data
// do stuff with x

Instead you do something like:

var x;
makeRequest ( url, fn ); 
// don't do anything with x yet


function fn ( data )    	// called when request returns in future 
{
 x = data;
 // now can do stuff with x  
}


// and you may need multiple lines like the following in other parts of code:

 if ( typeof x == 'undefined' ) ...   // x has not yet been defined  
 else ...                             // x is defined

Sometimes the asynchronous nature of the call is hidden.
For example, jQuery load hides what is going on. To get contents of URL and put them into the element "updateArea":
```
 $("#updateArea").load ( URL ); 
```
It looks synchronous but is actually asynchronous. The call returns sometime in the future and then the element contents change. It has an implicit callback function.
With other Ajax calls, the asynchronous nature of the call is obvious, with a defined callback function.