PHP-Generated XML   [top]
Since we are more focused on how to dynamically generate content, let's look at how we might generate the same XML but from PHP instead of a flat file. The first thing to do is to change our content-type from "text/html" to "text/xml":

#########################################################
# Tell the browser what type of data to expect
#########################################################
header("Content-type: text/xml");

echo <<<END
<?xml version="1.0"?>
<instrument>
  <item>
    <id>1</id>
    <name>vocals</name>
  </item>
  <item>
    <id>2</id>
    <name>guitar</name>
  </item>
  <item>
    <id>3</id>
    <name>harmonica</name>
  </item>
  <item>
    <id>4</id>
    <name>sitar</name>
  </item>
  <item>
    <id>5</id>
    <name>drums</name>
  </item>
  <item>
    <id>6</id>
    <name>bass</name>
  </item>
  <item>
    <id>7</id>
    <name>piano</name>
  </item>
</instrument>
END;

# Tell the browser what type of content to expect
header("Content-type: text/xml");

#########################################################
# Create initial XML - Assume our main container is <instrument>
#########################################################
$data = "<?xml version=\"1.0\"?>\n<instrument>\n";

#########################################################
# Get the list of instruments and put in $data
#########################################################
$SqlStatement = "SELECT id, name FROM instrument ORDER BY id";
$result = mysql_query($SqlStatement,$connection);
if (!$result) die("Error " . mysql_errno() . " : " . mysql_error());
while ($row = mysql_fetch_array($result,MYSQL_NUM))
{ # Add this row to our XML data
  $data .= "<item><id>$row[0]</id><name>".htmlspecialchars($row[1])."</name></item>\n";
}

# Finish our data
$data .= "</instrument>\n";

# Now send our XML
print $data;

AJAX (Asynchronous JavaScript and XML)   [top]
Ajax lets us combine our knowledge of JavaScript, the DOM object, and XML representations of data to create web applications based on the client-side. The premise is to allow for HTTP requests and exchanges of data between the browser and server without having to actually reload the page each time, which makes the app seem more timely.

There are four functions we'll need:

• Function to create the XMLHttpRequest object
• Function to make the request
• Function to handle the response XML from the server
• Function to trigger the request

// Creates an XMLHttpRequest object
function createRequestObject()
{
  try
  { xmlhttp = new XMLHttpRequest();
  }
  catch (trymicrosoft)
  { try
    { xmlhttp = new ActiveXObject("Msxml2.Microsoft.XMLHTTP");
    }
    catch (othermicrosoft)
    { try
      { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (failed)
      { xmlhttp = null;
      }
    }
  }
  if (xmlhttp==null)
    alert("Error creating XMLHttpRequest object");

}


// Generic function to call a server script
function makeRequest(url)
{ 
  // A new object is created each time - needed for IE
  createRequestObject();

  // Set the callback function
  xmlhttp.onreadystatechange = handleResponse;
  
  // Only GET seems to work reliably
  xmlhttp.open("GET", url, true);
  xmlhttp.send(null);
}


// Handle response
function handleResponse()
{ if (xmlhttp.readyState == 4)
  { if (xmlhttp.status == 200)
    { 
      // Process the return XML here

    }
    else
    { alert("Error! Request status is " + xmlhttp.status);
    }
  }
}

function triggerRequest()
{
  var url = "http://itp.nyu.edu/[netId]/dwd/makeXml.php";
  
  makeRequest(url);
}

On the server side, for a listing of sites, for example, I use "o" as my tag and then write all the fields for each site as a set of attributes named after each field name:

# Tell the browser what type of content to expect
header("Content-type: text/xml");

#########################################################
# Create initial XML - Assume our main container is <response>
#########################################################
$data = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<response>\n";

#########################################################
# Get the list of sites and put in $data
#########################################################
$SqlStatement = "SELECT id, title FROM class05_table2 ORDER BY id";
$result = mysql_query($SqlStatement,$connection);
if (!$result) die("Error " . mysql_errno() . " : " . mysql_error());
while ($row = mysql_fetch_array($result,MYSQL_NUM))
{ # Add this row to our XML data
  $data .= "<o id=\"$row[0]\" title=\"".htmlspecialchars($row[1])."\"></o>\n";
}

# Finish our data
$data .= "</response>\n";

# Now send our XML
print $data;

Ajax and jQuery   [top]
As discussed previously, the jQuery library exists as a single JavaScript file, containing all the common DOM, Event, Effects, and Ajax functions. It greatly simplifies the code needed to make an AJAX call. Let's revisit the initial AJAX example that loads our favorite sites into a dropdown menu:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script language="javascript">

function loadSites()
{

  $.ajax(
  {
    url: 'http://itp.nyu.edu/~cs220/dwd/class10-xml2.php',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
      alert('Error loading XML document');
    },
    success: function(xml)
    {
      // Remove all options
      $("#pagelist").empty();
			
      // Add default option
      $("#pagelist").append('<option value="0">- Choose site to edit from JQuery -</option>'); 

      // Now get all objects from PHP-generated XML
      $(xml).find('o').each(
        function()
        {
          var id = $(this).attr("id");
          var title = $(this).attr("title");
					
          // Add new option
          $("#pagelist").append('<option value="' + id + '">' + title + '</option>'); 
        }
      );
    }
  });
}

</script>

• jQuery Official Site | jQuery Ajax Documentation
• Ajax - Populating Select Menu using jQuery | PHP Source Code

Introduction to Web Services   [top]
One of the most significant changes in website content over the past few years is the willingness of content providers (search engines, e-commerce sites, social networks, location-based services) to make their data publicly available for re-use. The data is usually presented by way of an API (Application Programming Interface) which allows a remote user to request some subset of their data via HTTP and using a client-side language such as JavaScript, or a server-side language, such as PHP. This data can then be re-formatted or even re-correlated with other data (e.g. a mashup) to create alternate views.

Google Maps
For our first foray into web services, let's take a look at Google Maps and their API. In order to take advantage of Google Maps as a developer, you'll need to obtain a Google Maps API key:

so you can create your own apps like:

Introduction to JSON   [top]
JSON stands for JavaScript Object Notation, and is a lightweight data-interchange format, along the lines of XML. It has widespread support among both Javascript framework developers, and providers of web services like YouTube, Flickr, Delicious, et al. The basic data types in JSON are:

• Number (integer, real, or floating point)
• String (double-quoted Unicode with backslash escaping)
• Boolean (true and false)
• Array (an ordered sequence of values, comma-separated and enclosed in square brackets)
• Object (collection of key:value pairs, comma-separated and enclosed in curly braces)
• null

<contact>
<firstName>John</firstName>
<lastName>Smith</lastName>
<address>
  <streetAddress>721 Broadway</streetAddress>
  <city>New York</city>
  <state>NY</state>
  <postalCode>10003</postalCode>
</address>
<phoneNumbers>212 555-1234</phoneNumbers>
<phoneNumbers>646 555-4567</phoneNumbers>
</contact>

{
  "firstName": "John",
  "lastName": "Smith",
  "address": {
    "streetAddress": "721 Broadway",
    "city": "New York",
    "state": "NY",
    "postalCode": 10003
  },
  "phoneNumbers": [
    "212 555-1234",
    "646 555-4567"
  ]
}

 var p = eval("(" + contact + ")");

Creating JSON Data Using PHP
PHP has a commonly included extension called JSON (oddly enough) that can handle the encoding of a PHP variable into JSON format, and the decoding of JSON text into a PHP variable. Here's some code to encode:

# Sample data structure
$arr = array
(
  "firstName" => "John",
  "lastName" => "Smith",
  "address" => array
  (
    "streetAddress" => "721 Broadway",
    "city" => "New York",
    "state" => "NY",
    "postalCode" => "10003"
  ),
  "phoneNumbers" => array
  (
    "212 555-1234",
    "646 555-4567"
  )
);

# To encode: json_encode($arr)
# To decode: json_decode($json_text)

$json_text = json_encode($arr);

print $json_text . "\n";

jQuery and JSON   [top]
Now let's try using jQuery to retrieve JSON data from our server, instead of AJAX. This will set us up nicely for the next section, web services. But before we tackle that, we can write some client code that will grab some JSON data from a url on our server, and then dynamically format that in the browser.

For the JSON data, we'll use a modified version of our previous script that grabs a twitter feed:

$url = "http://twitter.com/statuses/user_timeline/dens.json";

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$json = curl_exec($ch);
curl_close($ch);

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

For the client-side code, we'll use jQuery's .getJSON() method to retrive this data via its url, and then the .each() method to go through each tweet and append to our main div container:

var url = "http://itp.nyu.edu/~cs220/dwd/class10-json-source.php";

// Get the data from the web service and process
$.getJSON(url,function(data){
  $.each(data, function(i,item){
  
    // Format the HTML for this item
    var text = '<div>' + '<i>' + item.created_at + '</i><br /> ' 
      + '<span class="tweet">' + item.text + '</span></div>';
    
    // Now append to the HTML display
    $(text).appendTo("#tweets");
  });
});

• Serving up JSON data | PHP Source Code
• Parsing JSON Using jQuery | HTML Source Code

Popular Web Services   [top]
Here are some of the more popular sites providing web services and how to interact with them. All of them incorporate the REST metaphor for providing web services, and thus can be accessed using unique URLs that can be called both on the client-side by JavaScript, and on the server-side via PHP.

Note: All of the examples presented in this section deal with the gathering and display of data from a web service, but most providers also have mechanisms for creating and updating their data, given the proper credentials.

Web Services and Flickr
Flickr is a media-sharing site that provides access to its content via web services:

http://api.flickr.com/services/feeds/photos_public.gne?id=[id]&lang=en-us&format=[format]
http://api.flickr.com/services/feeds/photos_public.gne?id=bob&lang=en-us&format=json&jsoncallback=?

http://gdata.youtube.com/feeds/api/users/[id]/uploads?max-results=[num_items]
http://gdata.youtube.com/feeds/api/users/bob/uploads?max-results=10&alt=json-in-script&callback=?

http://twitter.com/statuses/user_timeline/[id].[format]
http://twitter.com/statuses/user_timeline/12345.xml?callback=?
http://twitter.com/statuses/user_timeline/bob.json?callback=?