9. Asynchronous Javascript and XML (AJAX)

1. Ajax
2. XMLHttpRequest example
3. Form for RSS feeds
4. outputFeeds function
5. loadXMLHTTP function
6. proxy.php
7. feedToList function
8. Google Suggest lookalike
9. searchSuggest function
10. searchSuggest.php
11. handleSearchSuggest function
12. handleSearchSuggest function (for loop)
13. Mouse over, mouse out and click functions
14. Exercise
15. Links to more information

9.1. Ajax

• Ajax = Asynchronous Javascript and XML
• Ajax is used by many websites to implement responsive and dynamic web applications
• examples include Google's Gmail, Suggest and Maps services
• XMLHttpRequest object is an important part of the Ajax web development technique

9.2. XMLHttpRequest example

• following buttons call a function with different URLs for RSS feeds
• script (on following slides) displays values of title elements from retrieved document as list items of an invisible ul element below (with id="details")

9.3. Form for RSS feeds

<form>
  <input type="button" value="BBC news"
         onClick="outputFeeds(0)" />
  <input type="button" value="Guardian news"
         onClick="outputFeeds(1)" />
  <input type="button" value="New York Times news"
         onClick="outputFeeds(2)" />
</form>

• outputFeeds function is defined on the next slide

9.4. outputFeeds function

function outputFeeds(i) {
  var feed = new Array(
      "http://feeds.bbci.co.uk/news/rss.xml?edition=uk",
      "http://feeds.theguardian.com/theguardian/uk/rss",
      "http://www.nytimes.com/services/xml/rss/nyt/World.xml");
  var doc = loadXMLHTTP(feed[i]);
  var ul = document.getElementById("details");
  ul.innerHTML = feedToList(doc);
}

• URLs of RSS feeds are hardcoded into an array
• loadXMLHTTP function loads XML from URL into DOM document (next slide)
• ul element for output has id="details"
• feedToList function converts titles to list items (later slide)

9.5. loadXMLHTTP function

function loadXMLHTTP(url) {
  xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", 'proxy.php?url=' + escape(url), false);
  xmlhttp.send(null);
  return xmlhttp.responseXML;
}

• file must come from the same domain as the loaded page
• PHP script (next slide) just retrieves contents of url and returns it
• false argument means call is synchronous: interpreter waits for response before continuing
• send sends request to server; content is null for GET
• responseXML method makes response available as XML

9.6. proxy.php

<?php

header('Content-type: text/xml; charset=utf-8');

$url = $_GET['url'];
echo file_get_contents($url);

?>

• header() is used to send an HTTP header
• $_GET['url'] gets value of url parameter from query string
• file_get_contents returns file contents as a string

9.7. feedToList function

function feedToList(doc) {
  var title;
  var out = "";

  var items = doc.getElementsByTagName("item");
  for (var i = 0; i < items.length; i++) {
    title = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
    out = out + "<li>" + title + "</li>";
  }
  return out;
}

• recall getElementsByTagName returns a collection
• expect only one title child of an item, so access 0'th member of collection
• recall nodeValue can only be applied to a text node

9.8. Google Suggest lookalike

• example taken from Dynamic AJAX Suggest Tutorial
• code for form above is:

  <form>
  <input type="text" id="txtSearch" name="txtSearch"
    onkeyup="searchSuggest();" autocomplete="off" />
  <div id="search_suggest">
  </div>
  </form>
  

• text box has id="txtSearch"
• searchSuggest() (next slide) is called in response to an onkeyup event
• autocomplete="off" turns off browser default to suggest recently entered data
• div with id="search_suggest" is where suggestions will appear

9.9. searchSuggest function

var searchReq = getXmlHttpRequestObject();

function searchSuggest() {
 if (searchReq.readyState == 4 || searchReq.readyState == 0) {
  var str = escape(document.getElementById('txtSearch').value);
  searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
  searchReq.onreadystatechange = handleSearchSuggest;
  searchReq.send(null);
 }
}

• getXmlHttpRequestObject is similar to our earlier loadXMLHTTP function, but just returns an XMLHttpRequest object
• text box in form has id="txtSearch"
• note that calls to open are now asynchronous
• as a result, we must specify the function to call (handleSearchSuggest) when readyState changes
• values for readyState are:
  • 0 = uninitialised - open() has not yet been called
  • 1 = open - send() has not yet been called
  • 2 = sent - send() has been called, headers and status are available
  • 3 = receiving - downloading (not available in IE)
  • 4 = loaded - finished

9.10. searchSuggest.php

<?php
header("Content-Type: application/json; charset=utf-8");
...
$suggestions = array("Ajax","ASP","Javascript","JSP","XML","XPath","XSD","XSLT");
$result = array();

// Make sure that a value was sent.
if (isset($_GET['search']) && $_GET['search'] != '') {
   $search = $_GET['search'];
   foreach ($suggestions as $suggestion) {
      // Add each suggestion to the $result array
      if (strpos($suggestion,$search)===0)
         $result[] = $suggestion;
   }
   echo json_encode($result);
}
?>

• foreach allows iteration through array
• strpos returns first position where second argument is found in first argument, or FALSE if not found
• since FALSE==0 is true in PHP, need to use strict comparison === to check types are equal too
• if value for $search matches $suggestion at 0'th position
  • add $suggestion to $result array
• output the $result array as JSON using json_encode

9.11. handleSearchSuggest function

//Called when the AJAX response is returned.
function handleSearchSuggest() {
 if (searchReq.readyState == 4) {
  var ss = document.getElementById('search_suggest');
  ss.innerHTML = '';
  var str = JSON.parse(searchReq.responseText); // PTW modified for JSON
  // For loop to build list of suggestions goes here (next slide)
 }
}

• div element under textbox in form has id="search_suggest"
• note the use of responseText since response is text (in JSON format)
• JSON.parse() parses JSON text, returning a JSON type
• for loop is on the next slide

9.12. handleSearchSuggest function (for loop)

...
  // Returned suggestions are in array str
  for(i=0; i < str.length; i++) {
   //Build our element string.  This is cleaner using the DOM,
   //but IE doesn't support dynamically added attributes.
   var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
   suggest += 'onmouseout="javascript:suggestOut(this);" ';
   suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
   suggest += 'class="suggest_link">' + str[i] + '</div>';
   ss.innerHTML += suggest;
  }
...

• each suggestion is output as a div element with mouseover, mouseout and onclick events
• suggestOver, suggestOut and setSearch are defined on next slide

9.13. Mouse over, mouse out and click functions

//Mouse over function
function suggestOver(div_value) {
  div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
  div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
  document.getElementById('txtSearch').value = value;
  document.getElementById('search_suggest').innerHTML = '';
}

• suggest_link_over is a CSS class value which highlights the suggestion
• suggest_link unhighlights the suggestion
• setSearch() enters the value in the search box and clears the suggestions
• all code is in ajax_search.js and the CSS file suggest.css

9.14. Exercise

• Combine the functionality of the Google Suggest lookalike with that for adding acronyms in order to achieve the following. When a user types into the textbox, the suggestions are retrieved from an XML file on the server, rather than being hardcoded into the program. Now add a button to the form which calls another program on the server which adds the word entered to the XML file if it is not already present.

9.15. Links to more information

• http://www.php.net/
  PHP: Hypertext Preprocessor
• www.DynamicAJAX.com
  Dynamic AJAX Suggest Tutorial