This AJAX demo shows a more advanced example of how the AJAX script could be used. In this example the contents of the textarea will be sent to the server. The server then returns a HTML snippet in response to this data which is used to update the page.
To get the AJAX script used in this example go to the AJAX tutorial..
You can see a simpler example at the Simple AJAX Demo page.
To see an example that uses an XML response to update the page check out the XML AJAX Demo.
For this demo to work the first thing we need to do is include the AJAX script.
Because the AJAX script does all the hard work sending the AJAX request and handling the response is incredibly simple. Below you'll see the code for the ajaxTest function.
The ajaxTest function first gets the data from the textarea. The escape function is used to avoid errors caused by reserved characters in the data.
We next define a function that will handle the response. This responseHandler function will be passed the ajaxRequest as it's only parameter. The responseHandler gets the responseText for the request and then sets it as the innerHTML of the output div. This means the contents of the output div will be overwritten after each request.
After defining the responseHandler the test function then sends the request. The parameters used by the ajaxSend function define the following.
The code for the textarea is shown below. The style info isn't required, it just makes it look prettier.
The code for the button that calls ajaxTest is...
The output div is defined as shown below...
Using this method you can send data to the server, have it construct some HTML and then add the HTML to the current page.
Once you've got this technique down the next step is to look at handing back XML documents in response to your requests. This has the advantage of providing a structured way of handling the data, meaning that multiple applications could retrieve the same XML file and handle it in there own way.
Check out the XML Ajax Demo for an example.