PHP : AJAX Street Level

The AJAX Postcode Lookup for Street Address search functionality can be added to a Classic ASP capable web site in minutes, by simply dropping the supplied files into your Web project.

Download code:

Click her to download code

All code examples on the web site are subject to copyright ComTek Accounts Ltd 2007

Requirements:

Web server capable of running PHP code, which is most web servers.

Integration in 5 easy steps:

Step1: Download the Example Code

Simply download the example code. The code is in the "AJAX PHP Thoroughfare" directory of our example downloads. Simply copy, into the same directory as your web page which requires Postcode Address Lookup, "SPL_AJAX_Street.js" and "SPLGetStreetAddress.php" files.

Step 2 : Add reference to our JavaScript file to your page

Then on your own web page header, add the following reference to the JavaScript file your copied.

This line is show in the "index.html" file included in the example download, as is the rest of the code.

Reference the JavaScript file

Step 3 : Add a Link, button or image to activate Postcode Lookup

Then add either a link, using the following code to activate the Postcode Lookup Web address selection list:

Example link to activate Postcode Lookup Window:

<a href= "javascript:SPLGetAddressData(document.getElementById('postcode').value)"
>Lookup Address from link</a>

Example Button to activate Postcode Lookup Window:

This could easily be changed to use a image button.

Note: In the above example the Postcode Text field must have an ID of "postcode"

Step 4 : Map your Address fields

Now edit the JavaScript at the end of file "SPL_AJAX_Street.js", to write the correct address lines, which result from the Postcode Lookup. Back to your target web page, address fields:

Example address field mappings:

document.getElementById("line1").value=LINE1;
document.getElementById("line2").value=LINE2;
document.getElementById("line3").value=LINE3;
document.getElementById("town").value=TOWN;
document.getElementById("county").value=COUNTY;
document.getElementById("country").value=COUNTRY;

Step 5 : Specify the Data Key

Open an account with us. Within seconds you will then receive a data key, by e-mail, which should be entered at the top of the "SPLGetStreetAddress.php" file. This key will enable your account, for a 30 day evaluation period, for one postcode area.

Identify your account:

$datakey = "PUT YOUR DATA KEY HERE";

Enter Postcode "ZZ99" to use test data

How it Works

When the customer presses the [Find] button, then the function SPLGetAddressData is called, passing the Postcode entered in your Postcode field. This then calls the SPLGetStreetAddress.php page with the Postcode in the parameters, using the xmlHttp object created when the page was opened on the browser. This xmlHttp object provides AJAX (Asynchronous JavaScript and XML) to perform a Asynchronous call the SPLGetStreetAddress.php page, without a complete page refresh.

The SPLGetStreetAddress.php code on your web server then calls our Postcode lookup web server for the address information, adding your account information, etc. This means the client browser never sees your account information.

When the SPLGetStreetAddress.php page receives address information from our server it simply relays it back to the web page (your page with address fields on the customers computer) on the client computer.

The result of SPLGetStreetAddress.php is then handled by the JavaScript function SPLhandleRequestStateChange which calls SPLhandleServerResponse when fully complete.

Function SPLhandleServerResponse then reads the XML, if it contains tag "<line1>" and writes the address information to your address fields on your web page. If the response does not contain "<line1>", because of invalid postcode entered, then it is not processed.

Why do you have to have extra pages on your server?

Reason 1

Some browsers, especially if the client has turned up the security settings, may stop the client web page talking to a server from different domain. So by adding a page into your web domain, to relay the query to our Postcode address lookup server, removes this security problem.

Reason 2

Hides your account information from the Client Web Browser

This example could easily be converted to any other server side language, since the ASP pages are simply used to relay XML data from our server. The clients side JavaScript would remain the same.