To do : REST
This name has been given to the use of some advanced features of modern browsers (IE6 and FireFox in particular) which allow a more dynamic interaction between a web page and a server. This is accomplished by two techniques:
a) XMLHTTPRequest object: this object perform asynchronous HTTP messaging
b) DOM XML parsing
c) innerHTML allows the displayed page to be arbitrarily updated.
In simple dynamic web pages, the user enters data into a form, the data is submitted, processed by a server script a page and a whole returned. While this is OK for many applications, for others this produces a jerky interface as each page is fetched. For some applications, it would be better to be able to send a request to the server, get the result back and update the page in situ.
Google has been at the forefront of this approach. Examples include Google Suggest and Google Map. Another is Flickr.
XMLHTTPrequest is a class of JavaScript objects which can be created and then used to construct a request, using either GET or POST, to initiate the sending of the request, and then asynchronously, when the reply has been received, process the returned data by updating fields on the page. This results in bot a much smother interface and a reduced payload since only the basic data is interchanged. Returned data is typically XML, (including XHTML) but plain text, perhaps comma separated can also be returned. SOAP can be used but since the coupling between the client side code and the server side is likely to be tight, many applications use a REST protocol.
Returned XML data can be parsed using operations on the DOM.
Finally, the page may be altered by updating form fields or more generally, by updating any element using innerHTML.
Both Mozilla-based Browsers like Firefox and Microsoft Internet Explorer support this approach. The construction of a XMLHTTPRequest object is handled differently in these browsers but is easily generalised. DOM access, including innerHTML, is consistent between FireFox and IE6 at least. Other browsers such as Opera and Safari have not yet been tested by me.
The basis for this example is http://www.webpasties.com/xmlHttpRequest/ by Bill Bercik.
1. Use the zipcode converter – you
will need to find some valid zipcodes to test with –
there is one with most
http://stocks.cems.uwe.ac.uk/~cjwallac/apps/ajax/zip/find.html
Note the server name is stocks because it uses a database on shares, just as you will when you install the application yourself.
2. Read through the zipcode example PHP and HTML code.
http://www.cems.uwe.ac.uk/~cjwallac/apps/ajax/zip/find.phps
http://www.cems.uwe.ac.uk/~cjwallac/apps/ajax/zip/getCityState.phps
You may also find it helpful to read through the online tutorial http://www.webpasties.com/xmlHttpRequest/ on which this example is based.
3. Install the application on your own workspace.
Install the zipcode table on your own MySQL database, put the code in a suitable directory in public_html, alter the connection parameters in the zipconnect.inc file, and the location of this file in the PHP script. Check that the application is working.
4. Modifications
4.1 Expand State Abbreviations: Add a new table for the States containing the two-letter abbreviation and the full state name. Alter the select statement to use this table to return the state name. Alter the returned XML to include the full name. Alter the Javascript to format the full state name in the update to the page.
4.2 City to Zipcode decoder. A more difficult task is to search for a city and perhaps a state code to determine the Zipcode. Write a new PHP script to generate a table which lists all the matches to the supplied City and State code. Allow only the first letters of the city to be used in the search. Write an HTML page which uses this script.
Here we face the problem of designing the interface between the client-side HTML + Javascript and the server-side PHP. Since these are developed together, one argument says that re-use is not a consideration, so it is OK to optimise this interface – so the PHP script may generate just the HTML required to be inserted into the HTML page directly, relieving the JavaScript of the task of formatting it. Other argue that this is poor practice and the server should deliver pure data.
To simply insert the returned XML without any parsing on the client, change:
var xmlDocument = http.responseXML
to
var xmlDocument = http.responseText
The whole text can now be inserted into the DOM using innerHTML. If the XML contains HTML tags these will be rendered normally. If it contains non-HTML tags, rendering must be defined in a CSS file.