Task 4

Download a copy of this zip file and extract to your local working space. In this task you will:

• Work through each script in turn to ensure that you understand the functionality.
• Aim to understand the relationship between the scripts used.
• Create a working application that sends an AJAX request to the dialogplus server and returns data from the geog5871 database.

HTML

Let's first look at the HTML file. Most of this mark-up is straight forward. There are two script links at the top of the file, one of which makes reference to the AJAX jQuery library and the second of which links to the Javascript file. The important thing to note is the addition of two buttons in the HTML:

<button onclick = 'fetchData()'>Fetch Data</button>
<button onclick = 'clearData()'>Clear Data</button>

The first button calls a function called fetchData() and the second calls clearData() both of which are defined in the Javascript file.

There is also an empty div called 'textWrap' which is where we will print the results of request to the server.

Javascript

The first function in the Javascript file is the 'fetchData()' function which is called when the Fetch Data button is clicked; a number of things occur in this function. Firstly a new empty array is defined called 'tweetData':

tweetData = new Array();

Secondly, an AJAX request is called which makes a HTTP GET request to the PHP file sat on the dialogplus server and returns a set of JSON encoded results. Upon successfully retrieving the results, a function is called which loops through the results to create a new Javascript object for each tweet in the results array. Each tweet object contains: id, text body, latitude and longitude. The new JavaScript object is then 'pushed' to the end of the 'tweetData' array, to create an array of JavaScript objects. Note that the object is written in JSON, but is much more structured than just a bunch of text; the id, body, lat, and long are all labelled as such.

//AJAX request to fetchData.php file
$.getJSON("fetchData.php", function(results) {
   //Populate tweetData with results
   for (var i = 0; i < results.length; i++ ) {
      tweetData.push ({
      id: results[i].id,
      body: results[i].body,
      lat: results[i].lat,
      lon: results[i].lon
   });
}


Thirdly the fetchData() function calls another function called 'writeTweets()'.

The writeTweets() function simply loops through the tweetData array created above and appends each object to the 'textWrap' DIV in the HTML. Note how 'document.getElementById()' is used to access the HTML DIV. The reason this code is written in a separate function is to ensure that it occurs after the callback function has completed.

function writeTweets() {
   for (var i = 0; i < tweetData.length; i++) {
      document.getElementById('textWrap').innerHTML
      += "id = " + tweetData[i].id + ",
      text = " + tweetData[i].body +
      ", coordinates = " + tweetData[i].lat +
      ", " + tweetData[i].lon + "<br />";
   }
}

The clearData() function at the bottom of the Javascript file simply overwrites the current content of the textWrap div with nothing, hence the empty quotation marks:

function clearData() {
   document.getElementById('textWrap').innerHTML = ' ';
}

PHP

The first half of the PHP script is the same as the one created in the previous task, with the exception of the addition of a header at the top of the file. This header is used by the AJAX HTTP GET request to inform the browser of the type of data returned from the server, so the data can be handled appropriately on the client side.

header("Content-type:application/json");

In the second half of the script, the code in the while loop has been altered; instead of printing the contents of the row straight to the page as we did before, each value in the row is now assigned a key so that a key-value pair array can be constructed for that particular row:

//Loop through query results
while ($row = pg_fetch_array($result, null, PGSQL_ASSOC)) {
   //Populate tweetData array
   $tweetData[] = array(
      "id" => $row["oid"],
      "body" => $row["body"],
      "lat" => $row["latitude"],
      "lon" => $row["longitude"]
   );
}


The key-value pair array representing one row of data is then pushed to the tweetData array, so that a multidimensional key-value pair array is constructed for the whole dataset. Note how the row array is appended to the tweetData array using the syntax $tweetData[].

Now the whole dataset is formatted in a suitable way it can be encoded to JSON and outputted by the function using the echo command. AJAX returns the results of the PHP script, in this case the JSON encoded tweetData array.

echo json_encode($tweetData);

Summary

To summarise, let’s look at an overview of the whole process:

1. User clicks 'Fetch Data' button.
2. fetchData() function is called which initiates a AJAX GET HTTP request to the PHP file.
3. PHP creates a secure connection to geog5871 database.
4. PHP queries tweets table and returns a results set.
5. PHP loops through the results set row by row and creates an associative array.
6. PHP encodes the associative array in JSON and returns the data using echo.
7. Upon receiving the AJAX request results, a callback function is called.
8. The callback function loops through the returned results and creates a Javascript Object array which will exist outside of the scope of the AJAX request function.
9. The callback function calls the writeTweets() function.
10. The writeTweets() function loops through the tweetData array and writes to the page.

Using the 3 files provided, try to get this example to work so that tweet data is returned when the user clicks the 'Fetch Data' button and the data is cleared when the 'Clear Data' button is clicked.

---

[ Next: Unit 8: Introduction to web mapping with Leaflet ]

---