• asynchronous javascript...

Javascript remains the most influential coding language for capturing events that happen when the user (the client) interacts with your web page using a web browser. Many experts will explain that javascript cannot interact with data that lives on your Internet Service Provider (ISP)'s computer (the server), and whilst this is strictly true, it only takes a few extra lines of code in your javascript function to run a script that can grab the information from the database and return it to the same javascript function. These lines of code embedded in your javascript function are part of a development known as AJAX, which stands for Asynchronous Javascript and XML. Yet the type of database is NOT restricted to to XML files as implied by the acronym. Javascript can interact with any database using a number of scripting languages. If your web server computer uses a linux operating system then we recommend using the PHP (Personal Home Page) scripting language and a MySQL database. If your web server computer uses a Windows operating system then we recommend you use ASP.NET (Active Server Pages using the dot net foundation) as your scripting language and a SQL Server database. All these technologies are available free - you just need to know how to install them and code them for your particular web site's requirements.

Of course your website does not *have* to live on webspace provided by an ISP, it can just as easily live on your own computer. For Windows operating systems this means installing Internet Information Services (IIS). Provided your broadband provider has provided you with a router that has a static IP address, then you can host your own web page by allowing traffic to go through a port on your router and find your web page using the external address of the router. In fact, regardless of whether you want to host your own web page, or if you prefer to pay the small monthly fee to have an ISP provide the webspace on their computer instead, you will need to use IIS so that you can develop the website locally on your PC and test it. Then when you have it working to your satisfaction locally, you can transfer the files to the ISP's computer and be content that it will work properly.

PC Home Tuition Ltd recommends UKHost4You for Windows based web hosting but on this occasion we will use UKCheapest, as they provide webspace on a linux server (Microlite) and use of a MySQL database. For database interaction with ASP.NET and SQL Server see the link in the examples page.

In order to allow a visitor to your web page to click a button or a drop down list (creating an event) and retrieve information that lives in the MySQL database you will need to write quite a bit of technical code. We will concentrate on a relatively simple example that will explain the concept and allow you to tailor it to your own requirements. You will need six pieces of the jigsaw to make it work.

1) An identifiable element on the web page where the data will appear. We will use the a span tag but there are a number of alternatives, such as a label or a text box.

2) A web control such as a button or a drop down list that the visitor can click to cause an event (such as an onclick event for a button or an onchange event for elements of a drop down list). If you want the data to be provided automatically whenever the user opens or refreshes the page then you would not need a web control.

3) A javascript function that runs when the event occurs. If there is no web control to cause the event, then you would use the onload event which runs whenever the page is loaded or refreshed.

4) Some AJAX lines of code embedded in the javascript function that causes a PHP script to run.

5) A PHP script that gathers information from the javascript function and uses it to grab data from a database using Structured Query Language (SQL) and returns it to the Javascript function.

6) Final processing of the information returned to the javascript function.

• the span tag...

We are going to make a message box appear, containing data from the database, whenever a user clicks a button on the page. When the user clicks the button, the alert will use whatever information is in the span element. We need to make the SPAN element invisible on the page and we will call the Span 'databaseresponse'.

"<span style="visibility: hidden" id="databaseresponse"></span>"

...of course there is nothing contained in the span element yet.