Beginning AJAX

AJAX stands for Asynchronous Javascript and XML.
Asynchronous means that one does not need to wait for the response to an HTTP request to do something one can use Javascript to have several outstanding HTTP requests and still make things happen in the browser.
Further one doesn't have to reload the entire page when the results of a request are returned.
The XML in AJAX is because the results of a request are usually XML, JSON, or YAML data which is then formatted by some Javascript code.
The basic key to AJAX is the ability for Javascript to make an HTTP request. This is done with the XMLHttpRequest object.
As an example, consider the following test news items:
http://www.cs.sjsu.edu/faculty/pollett/174.1.17s/test-news.html
We can use AJAX to get these news items from our server and and embed them in the current page with the div tag with id "test-news" below:
Over the next couple slides we'll discuss how the code for this works.

Step-by-Step I

To create an XMLHttpRequest one could simply write in Javascript:
```
request = new XMLHttpRequest();
```
If we need to set up HTTP request headers we can use:
```
request.setRequestHeader("name", "value");
```

Step-by-Step II

To open a connection back to the server the Javascript came from one can then do:

request.open(theHTTPmethod, theURL, theAsync flag)
or
request.open(theHTTPmethod, theURL, theAsync flag, username, password)

For example,

request.open("GET", "test-news.html", true);
request.onreadystatechange = function()
{
    switch(request.readyState)
    {
        case 0:// handle uninitialized case
        case 1: // handle open but no send case
        case 2: // handle send but no response case
        case 3: // handle response is being downloaded case
        case 4: // handle response has completed being downloaded case 
    }
}

The asynchronous flag says whether or not the Javascript can continue executing (true) or if it must wait for a response (false).
At this point no data has been sent yet.

Step-by-Step Continued III

In case 3 or 4 above, request.responseText or request.responseXML will contain the data that has been returned by the server
In case 3 or 4 above, request.getAllResponseHeaders() can be used to get the HTTP response headers.
Sometimes it is useful to start a timer in case 3, using setTimout. If the request is taking too long so that the timer gets called, one can then abort the request using: request.abort.

Typically, the code in 3 or 4 above would put the response text into some tag in our document. This could be done with:

document.getElementById("myDivTag").innerHTML =  request.responseText; 
//or we could do...
myDiv = document.getElementById("myDivTag")
if(myDiv.firstChild)
{
	myDiv.removeChild(myDiv.firstChild);
}
myDiv.appendChild(document.createTextNode(request.responseText));

For our starting example, the code looked like:

request = new XMLHttpRequest();
request.onreadystatechange = function()
{
    switch(request.readyState) {
        case 4:
           document.getElementById("test-news").innerHTML =  request.responseText; 
        break;
    }
}
request.open("GET", "test_news.html", true);
request.send();

Step-by-Step Continued IV

Once we have set up our callback function we are ready to send data to the server.
To do this we can do:
```
request.send(null);
```
Note: send's argument can be used if using POST method to send the posted data
That's it! We just sit back then and wait for our callback to be called.

Parsing What Comes Back

After doing a request.open(), one can set the value of request.responseType.
By default this is null, if one sets it to 'document', then when the response comes, request.responseXML will hold an HTMLDocument object (provided the data was HTML). You can access from javascript objects within this document the same way one can access a web page. I.e., use getElementsByTagName, getElementById, nodeValue, firstChild, etc.
For XML data, one wants the content type sent by the server is text/xml, then request.responseXML will then again have a document object that can be manipulated with standard methods.
We haven't talked about JSON, but for JSON, we don't need to set the responseType after opening the request. Once the request completes, we can instead just call:
```
my_object = JSON.parse(request.responseText);
```

Quiz

Which of the following statements is true?

The DOM style property of a page element cannot be changed.
It is possible to have multiple event handlers for the same event in Javascript.
An XML tag can only have subtags from the same namespace.

Web Services

One important use of AJAX and PHP is to allow you to write web services.
A web service is a programming interface which can be invoked over HTTP.
The first attempts to standardize such services made use of things like WSDL, SOAP, UDDI, etc. XML languages which tended to violate the KISS (keep it simple stupid) principle.
Some simpler web service interfaces have been written by major companies using XML-RPC, JSON-RPC and REST.
A XML-RPC document is a XML document which specifies a remote procedure call, i.e., which function of which object to invoke on some server; or it specifies the response of such a call. It later evolved into the more complicated and still evolving SOAP (Simple Object Access protocol)
JSON-RPC is like XML-RPC but uses JavaScript Object Notation -- basically, a snippet of Javascript code for an object.

REST

REST stands for Representational State Transfer. It is a technique for writing web services developed by Roy Fielding in 2000.
The idea is that an application state/method is viewed a resource. Each resource has a URL. There is a well defined way to tack on to this URL a query to invoke the function and return results. For example, the Yioop News Service might be invoked with a line like:
```
http://www.yioop.com/s/news?f=rss&limit=20&num=30
```
The resource in this case is "http://www.yioop.com/s/news" and the arguments are (f, limit, num) which control the returned value from the resource.

In general, a web service for an object might be given by

url/my_obj/method1?arg_1_for_method1=value_1&
    arg_2_for_method1=value_2...
url/my_obj/method2?arg_1_for_method2=value_1&
    arg_2_for_method2=value_2...
...

JSON

Stands for Javascript Object Notation.
It is commonly used for sending data when REST is used by Javascript can immediately use the data.

Primitive types in JSON are written as you expect:

12.3  -- an example Number
"hi there" -- an example String
true -- an example Boolean, other possibility false

Arrays are written in square brackets and comma separated:
```
[1, 4, 9]
```
Objects are written in braces and the name value pair are separated by a colon:
```
{"bob": 29,  "sally" : 35}
```
JSON data can be assigned to an object with the syntax:
```
myObj = eval( "(" + data + ")" );
```

Proxies

Javascript function is only allowed to make requests back to the server from which it came.
Suppose if you have a page http://somewhere.com/index.html and you would like the Javascript on it to make use of the Yioop Rest API (Yioop being the code used for the class discussion board), how do you do it?
You need to use a proxy on your server which passes the request onto Yioop

Consider the following example proxy script for the Yioop News service:

<?php
define ('YIOOP_NEWS_URL', 'https://www.yioop.com/s/news/');

// look at incoming request fields
$query = (!empty($_REQUEST['f']) && in_array($_REQUEST['f'], ["rss", "json"])) ?
    "?f=" . $_REQUEST['f'] : "";

$url = YIOOP_NEWS_URL . $query;

// Open the Curl session
$request_handle = curl_init($url);

// If we wanted to use post we could uncomment the lines below
//curl_setopt ($request_handle, CURLOPT_POST, true);
//curl_setopt ($request_handle, CURLOPT_POSTFIELDS, $postvars);

// Don't bother with the HTTP headers. Do bother with the content back
curl_setopt($request_handle, CURLOPT_HEADER, false);
curl_setopt($request_handle, CURLOPT_RETURNTRANSFER, true);

// Make proxy request
$response_content = curl_exec($request_handle);

//determine the content-type of the respeonse
$pre_content_type = curl_getinfo($request_handle, CURLINFO_CONTENT_TYPE);
$content_type = (empty($pre_content_type)) ? "text/html" : $pre_content_type;

// Set the outgoing proxy content type
header("Content-Type: $content_type");

echo $response_content;
curl_close($request_handle);

To use such a proxy, you need to have PHP running on your machine and it needs to have curl enabled.
By tacking on different query strings such as ?f=rss or ?f=json to the url above you can control the format of the response.

JSONP

You might wonder if there is a more client-side way to do proxying in the case where we can't add code to our server to make the proxy request. For example, suppose our hosting doesn't allow curl requests.
One way to fake this is to use a web service that can respond with JSONP (JSON with Padding).
Such a service returns the JSON data within a Javascript function call of the requester's choice.
For example, the request:
https://www.yioop.com/s/news?f=json&callback=myHandleDataCode
return data that looks like:
```
// API callback
myHandleDataCode({"language":"en-US","link":"http...etc...etc ...});
```

So in my HTML page I could have the script tags:

<script>
function myHandleDataCode(obj)
{
    // do something pretty with json data
}
<script>
<script src="https://www.yioop.com/s/news?f=json&callback=myHandleDataCode" />

Promises

Using XHR requests involve setting up a callback which is executed later after some event occurs.
Since about 2014 most major browsers support in Javascript a generic mechanism for doing this called Promises.
Suppose one was reading a PDF through the Javascript PDF viewer PDFJS. Then one left the site and came back. Suppose the script stored your previous location and now needs to restore it, but it first must wait until the pdf you were viewing has downloaded.

You could do this with code like:

<script src="http://url_for_pdf.js/pdf.js" ></script>
<script>
</script>
function renderPdfPage(media_obj, num)
{
    if (media_obj.reflect_rendering) {
        return;
    }
    var media_name = media_obj.reflect_name;
    media_obj.reflect_page_num = num;
    media_obj.reflect_rendering = true;
    media_obj.getPage(num).then(function(page) {
        var viewport = page.getViewport(1.5,
            parseInt(media_obj.reflect_orientation));
        var canvas = document.getElementById('area-' + media_name);
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        var renderTask = page.render(renderContext);
        renderTask.promise.then(function () {
            media_obj.reflect_rendering = false;
        });
    });
}
PDFJS.getDocument(url_of_document_viewing).then(
    function (pdf) {
        if (localStorage) {
             old_page = localStorage.getItem(url_of_document_viewing_old_page);
             renderPdfPage(pdf, old_page);
        } else {
             renderPdfPage(pdf, 1);
        }
    }
);

The general format of a Javascript promise is

my_promise = new Promise( function (resolve, reject) {
   /* this is the main code that your promise executes.
      request and reject are two callbacks your promise
      calls on success or failure.
    */
} );
// to use the promise we then have code like:
my_promise.then(function(arg_list) {
   // when anonymous function above calls resolve this code runs.
}).catch(function(arg_list) {
   // when anonymous function above calls reject this code runs.
} )

AJAX, Web Services, JSON, Promises

Outline