Lesson 10

ECMAScript JSON encoding data:

var data = JSON.parse(string);

Returns JavaScript data parsed from string.

var string = JSON.stringify(data);

Converts the JavaScript data data to a JSON encoded string, suitable for storage or transmission.

AJAX - Asynchronous JavaScript And XML JSON (AJAJ)

The only good thing to come out of IE (Internet Explorer):

XMLHttpRequest()

This object that provides asynchronous communication to a server for the browser. Allocate it using the new keyword, i.e.:

var req = new XMLHttpRequest();

The object then allows you to setup a GET or POST request to the server that is handled asynchronously to the current page, i.e. the request will not cause a new page load as everything happens behind the scene. GET is typically used to fetch data from the server (although some data can be sent via the "application/x-www-form-urlencoded" method, and POST is usually used to send data to the server in the form of a form data object.

Methods:

.open(method,url,async)

Sets up a request, not initiated until the send() method is called.

.overrideMimeType(string)

Change effective mime type for the data transfer. Not often necessary.

.send(string)

Commits the previous open. string is only required for the POST method, may be replaced with a FormData object.

Properties:

.status

Current status of the request (An HTTP code, 200 = successful, 404 = not found, etc.)

.readyState

The state of the transfer, from 0 (unsent) to 4 (done). The transfer is complete and successful when .readyState == 4 and .status == 200.

.responseText

The data that was retrieved from the server, if any.

Event handler

.onreadystatechange

This event handler is fired every time the .readyState property is updated. An anonymous function assigned to this handler can then check the status of the transfer and act accordingly.

function loadurl(url, callback)
{
  var req = new XMLHttpRequest();
  req.open('GET', url, true);
  req.overrideMimeType('text/plain; charset=x-user-defined');
  req.onreadystatechange=function() {
    if (req.readyState==4 && req.status==200) callback(req.responseText);
  };
  req.send(null);
}

POST example:

var req = new XMLHttpRequest();
req.open("POST","ajax_test.php",true);
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.send("fname=Henry&lname=Ford");
//...

The FormData() object

Creates a form and binds data to it purely in ECMAScript, useful for creating a form for submitting via XMLHttpRequest().

var form = new FormData();

Methods:

.append(name,value)
.append(name,value,filename)

Appends a value to the form under the given name. The filename is the name of the file when a Blob or File object is passed as the value to the append.

Example:

var form = new FormData();
form.append("username", "sbaker");
form.append("password", "123456");

var req = new XMLHttpRequest();
req.open("POST", "login.php", true);
req.send(form);