|
Tutorial
Video : Show to add Street Address AJAX List
(Sound
Required)
[View
demo of Full Address Lookup]
 The above functionality can be installed in minutes....in 5 easy
steps.....
The
above Postcode Lookup for thoroughfare (Street Level) Address search functionality can be added to a
PHP capable web server in minutes, by simply dropping the supplied files into your
Web project.
Advantages
-
Uses AJAX to
populate web page, for a smooth customer experience
-
"Out of the box"
Street Postcode Address Search solution
-
Very little
programming required.
-
Your Simply Postcode
Lookup account codes are hidden from client
-
Quick
to install, Simply add two files in to your Web site
-
Will
run on most Web servers
-
Not
blocked by Pop-up blockers
-
No Data
Administration Cost for you
[More
information on AJAX]
[More
information on AJAX Programming]
[How
does it work?] Requirements
Web
server capable of running PHP code, which is most web servers.
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.
[Click
here to download the Examples]
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.
Referance the JavaScript file
<script type="text/javascript" src="SPL_AJAX_Street.js"></script>
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 pop-up:
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:
<input
type=button value="Lookup Address"
onClick=
"javascript:SPLGetAddressData(document.getElementById('postcode').value)">
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";
[Open
your account]
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
[More
information on AJAX]
[More
information on AJAX Programming]
This
example could easily be converted to any other server side language,
since the PHP pages are simply used to relay XML data from our
server. The clients side JavaScript would remain the same.
|
AJAX PHP Thoroughfare (Street Level) Address Lookup
