Basis of AJAX#

• When the user first visits a page, the whole page is loaded
• When the user interacts with the page, a JavaScript script runs to process the interaction
• The JavaScript connects to the server, sending a request (possibly including data from the user) and receives back a response
• The JavaScript then uses this response to update the content of the existing loaded page
• Thus, a full web request/response cycle can occur without the need to reload the entire web page

Disadvantages of AJAX#

• Requires a sophisticated browser: some older or non mainstream browsers may not support it at all
• Can damage accessibility if the JavaScript script cannot create accessible content, which is often quite difficult
• Secure HTTP is accepted only for a full page, not part of a page, so a new page must be loaded when entering a secure part of the site
• Can increase security risk as a hacker can send fake requests that appear to come from the JavaScript scripts
• May not be obvious to the user which interactions with the site will require a connection to the server

Benefits of AJAX#

• Creates more modern and interactive user interfaces on the web
• Makes the web interface appear more continuous than a series of separate pages
• Minimizes server load by performing layout and presentation operations on the client
• Minimizes bandwidth and traffic usage by not requiring a full page to be reloaded for every interaction

AJAX Technologies#

• JavaScript for managing the AJAX interaction process
• The DOM for allowing the JavaScript to manipulate the displayed page
• XMLHttpRequest, a JavaScript add-on which allows a JavaScript script to make its own web requests and retrieve the data as JavaScript data rather than HTML
• XML, the extensible markup language; a language for arbitrary data based on extending the syntax of HTML (or actually HTML’s predecessor, SGML)

XML#

• XML is based on representing general structured data using the syntax rules of HTML
• Elements and attributes have a similar syntax but any tags and attributes can be used

1
<student id="12345678">
2
    <first>John</first>
3
    <last>Smith</last>
4
    <module-enrolls>
5
        <module href="cct#U08785" year="3"/>
6
        <module href="cct#U08008" year="1"/>
7
    </module-enrolls>
8
</student>

JSON#

• JavaScript Object Notation
• Based on the syntax used in JavaScript to set the value of an
• object type variable

1
{
2
    "id" : "12345678",
3
    "first": "John",
4
    "last": "Smith",
5
    "module_enrols": [
6
        {"href": "cct#U08785", "year": 3},
7
        {"href": "cct#U08008", "year": 1}
8
    ]
9
}

• Top-level sent data is an object
• An object holds data in fields
• Syntax of an object is:
  {"field1":"value1", "field2":"value2", "numberfield":5}
• If a field contains a sub-object, this syntax is nested
• If a field contains an array, array syntax is:
  ["member1", "member2", "member3"]
• Array and object syntaxes can be nested inside each other
• Unlike XML (but like JavaScript), JSON has no concept of an object’s “type”
• Because JSON is identical to JavaScript’s syntax, you can test JSON by typing it in at a JavaScript console (with a semicolon at the end)

Creating and decoding JSON#

• In JavaScript, you can parse a JSON string into a JavaScript object with the built-in command JSON.parse().
• If using Jquery, you can instead use $.parseJSON() which has the same functionality but will automatically work around if the browser does not have built-in JSON support.
• You can turn a JavaScript object into a JSON string (although this is not usually needed except for debugging) by using JSON.stringify().

• Python has a built in json library which can output data and structures as JSON.
• The top level of a JSON structure should be based on a Python dictionary:

1
person = {"name": "Bob", "role": "Project Manager"}
2
print(json.dumps(person))

• The default json library cannot output objects (members of classes), but you can add a method to your object to pack the important data members into a dictionary.
• You can also write complete custom encoder methods if you need to.

Steps to creating AJAX#

• Decide what interactions a page will support
• Design the page to support those interactions
• Identify the data that needs to be sent to and from the server
• Write a Python script that performs the interaction and returns valid JSON
• Write a JavaScript that calls the Python script and retrieves the JSON data
• Extend the JavaScript to modify the page based on the returned JSON

Interactions for AJAX#

• Should apply to part of a page – although this may be as simple as the page being divided into content and header
• Should involve server interaction – a pure client-side shopping cart does not necessarily need AJAX
• Can be especially useful if the data being retrieved is simple but the HTML presentation is complicated
• Remember to allow for accessibility and for mobile browsers

Identify the data#

• Identify the data that needs to be sent and decide on a JSON structure
• Aim to send as little data as possible
• Remember that the top level of the JSON structure must be an object
• For example, if you wished to send a list of products, you might want to send an array:
• might want to send an array:

1
[{"name": "product 1", "price": 200},
2
{"name": "product 2", "price": 300}]

• But because the top level of JSON must be an object, you must wrap this inside a dictionary:

1
{"products":
2
    [{"name": "product 1", "price": 200},
3
    {"name": "product 2", "price": 300}]
4
}

Write the server#

• Write a Python script which retrieves input from the user in the normal way, and retrieves data from (or even updates) the database
• Instead of outputting HTML, the script should output JSON
• You can output JSON manually or use the json library
• Always follow the same rules regarding security and stability that you would for a regular web accessed script
• Test your script by accessing it from a web browser via Flask
• To check the JSON is valid, copy and paste it into your browser’s JavaScript console and place a variable assignment command before it (eg, x={the JSON};). If the JSON is valid, JavaScript should give no syntax error

Example Python#

1
# Run an SQL query (code to set up the query
2
# is not included in this example)
3
cursor.execute(query,(param1,param2..))
4
# Build a list of dicts from the results
5
productarray = []
6
for (id, name, price) in cursor:
7
    productarray.append({"id": id, "name": name,"price": price})
8
# Wrap inside a single dict and encode JSON
9
Return json.dumps({"products": productarray})

1
{
2
    "products": [
3
    {"id":1234, "name":"product 1"},
4
    {"id":2345, "name":"product 2"},
5
    . . . Rest of products . . .
6
    ]
7
}

Writing JavaScript to load JSON#

• To load the JSON file into JavaScript, you will use the XMLHttpRequest extension.
• Note that this is a misnomer: XMLHttpRequest can read multiple different types of content, not just XML.

1
var theRequest = new XMLHttpRequest();
2
theRequest.open("get","/json? Param=one&paramtwo=more");
3
theRequest.onload = () => {
4
    window.alert(
5
    JSON.parse(theRequest.response));
6
}
7
theRequest.send();

1
{
2
    "products": [
3
        {"id":1234, "name":"product 1"},
4
        {"id":2345, "name":"product 2"},
5
        . . . Rest of products . . .
6
    ]
7
}

Asynchronous requests#

• AJAX requests by default are asynchronous.
• This means that the send() method returns immediately. This indicates that the request has been sent to the server.
• However, the server may not reply immediately (or at all). The specified onload function will be called when it does reply.
• Make sure to tell the user somehow that their click has registered and the server will be contacted.
• You may also wish to disable or hide the button or link that the user used to initiate the request – otherwise they may click it again, sending an extra request which will queue up with their original request and may cause confused operation.

Steps for an AJAX request#

In the initiating function:

• Check a request is not already in progress
• If it is, stop
• Build an XMLHTTPRequest object holding the request
• Load it with the request and the responding functions
• Mark that a request is now in progress
• Modify the UI so the user can see the request is in progress
• Send the request

Then, in the responding function:

• Mark that a request is no longer in progress
• Remove the “request in progress” parts of the UI
• Update the page based on the response

”Safe” JSON loading#

1
// Mutex must be declared global
2
if (mutex) return;
3
mutex = true;
4

5
var theRequest = new XMLHttpRequest();
6
theRequest.open(“get”,”script.php?
7
    Param=one&paramtwo=more”);
8
theRequest.onload = () => {
9
    mutex=false; window.alert(theRequest.response);
10
}
11
theRequest.onerror = () => {
12
    mutex=false; window.alert(“AJAX error”);
13
}
14
theRequest.timeout=10000;
15
theRequest.ontimeout = function() {
16
    theRequest.abort(); mutex=false;
17
    window.alert(“AJAX timed out”);
18
}
19

20
theRequest.send();

Testing JavaScript JSON loader#

• The URL accessed can be a static JSON file or a script which generates JSON. You may wish to use a static JSON file for testing. If you are typing JSON in by hand, make sure to use a web console to check that it is valid.
• The URL must be on the same site as the HTML file that contains the JavaScript.
• The JSON response will initially be a string that can be printed, but not accessed by field. After JSON.parse, it will be a JavaScript object, so when printed out directly, it will just read “[Object object]”. This does however confirm that some valid JSON was received. To see the contents of the object you could print them individually.

1
{
2
    items:
3
    [{name: "item name", link: "link ref"},
4
    {name: "item 2", link: "link 2"}]
5
}

1
<style>
2
div.loading {
3
    position: fixed;
4
    border: 5px #aaaaaa solid;
5
    left: 30%;
6
    right: 30%;
7
    top: 456;
8
    bottom: 456;
9
    text-align: center;
10
    cursor: wait;
11
    font: 12pt sans-serif;
12
    display: none;
13
}
14
</style>
15

16
<div id="loading" class="loading">
17
    Loading...
18
</div>

1
<div id="browser">
2
</div>

1
<body onload="startUp();">

1
function startUp() {
2
  var browserbox = document.getElementById("browser");
3
  var mutex = false;
4
  fetchList("start");
5
}

1
function fetchList(menuid) {
2
    // Don’t allow multiple requests at once
3
    If (mutex) return;
4
    mutex = true;
5
    // Show the loading message
6
    document.getElementById("loading").style.display = "block";
7
    // set up the request
8
    var theRequest = new XMLHttpRequest();
9
    theRequest.open("get","menuserver.php?pageid=" + menuid);
10
    theRequest.onload = () => {
11
        menuLoaded(this.response);
12
    }
13
    theRequest.send();
14
}

1
function menuLoaded(liststring) {
2
    // Request is over now
3
    mutex = false;
4
    // Hide the loading message
5
    document.getElementById("loading").style.display = "none";
6
    let listobject = JSON.parse(liststring);
7
    let theList = listobject.items;
8
    // Remove all the old list items
9
    while (browserbox.firstChild) {
10
        browserbox.removeChild(browsebox.firstChild);
11
    }
12
    // Loop through the list we loaded
13
    for(let t=0; t<theList.length; t++) {
14
    // Create an LI element for each one
15
    let newLi = document.createElement("LI");
16
    // Put the name of the item as text inside
17
    // the LI
18
    let newText = document.createTextNode(items[t].name);
19
    newLi.appendChild(newText);
20
    // Use a value closure to set up a function
21
    // to run when the item is clicked
22
    newLi.onclick = ((object) => ((event) => {
23
        browserClicked(object);
24
    })) (items[t]);
25
    // Add the new list item to the “browse” DIV
26
    browserbox.appendChild(newLi);
27
    }
28
}

1
newLi.onclick = (event) => {
2
  browserClicked(items[t]);
3
};

1
newLi.onclick = (event) => {
2
    browserClicked(items[t]);
3
};

1
newLi.onclick = ((object) => ((event) => {
2
    browserClicked(object);})) (items[t]);

1
newLi.onclick = (event) => {
2
    browserClicked(items[t]);
3
};
4
(event)=>{browserClicked(object);}

1
(object)=>((event)=>{
2
        browserClicked(object);})

1
Function browserClicked(item) {
2
  // Make the next AJAX request
3
  fetchList(item.link);
4
}

Steps to creating AJAX#

• Decide what interactions a page will support
• Design the page to support those interactions
  • Probably within the template for the page
• Identify the data that needs to be sent to and from the server
  • Decide on a JSON structure
• Write a Python script that performs the interaction and returns valid JSON
  • Build a dictionary and use json.dumps
• Write a JavaScript that calls the Python script and retrieves the JSON data
  • Use XMLHttpRequest and JSON.parse
• Extend the JavaScript to modify the page based on the returned JSON
• Use closures if necessary to pack the necessary information into the response handler