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 to be 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);
```

In-Class Exercise

Make dummy1.html page with a paragraph tag on it containing Hello World, place it under your web server's document root.
Make dummy2.html page with a script tag on it that does a document.write("<p>Hello World</p>"), place it under your web server's document root.
Make a tester.html page that makes three different Ajax requests: one to the get the dummy1.html and put the results in a div tag with id dummy1, one to the get the dummy2.html and put the results in a div tag with id dummy2, and one to the get the www.yahoo.com and put the results in a div tag with id yahoo.
When you view tester.html what do you see?
Post your solution to the Nov 18 In-Class Exercise Thread.

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.

AJAX, Web Services

Outline