AJAX Demo App

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.

How it works

For this demo to work the first thing we need to do is include the AJAX script.

<script type="text/javascript" src='ajax.js'></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.

function ajaxTest() { // Get the data from the text area. // The escape function is used to prevent errors caused by reserved characters var data = escape(document.getElementById("test").value); // define the responseHandler function responseHandler(ajaxRequest) { var htmlSnippet = ajaxRequest.responseText; var outputDiv = document.getElementById("outputDiv"); outputDiv.innerHTML = htmlSnippet; } // send the request. The post method is used because get restricts the amount of data that can be sent // to around 2000 chars and this app could potentially send more than that. ajaxSend('post', 'demoService.aspx', 'data=' + data, responseHandler); }

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.

  1. The request method ('post').
  2. The url the request will be sent to ('demoService.aspx').
  3. The request parameters ('data=' + data). The parameters should be formated in the same way as query strings in standard urls.
  4. The function that will handle the response (responseHandler).

The code for the textarea is shown below. The style info isn't required, it just makes it look prettier.

<textarea id="test" style='width: 70%; margin: auto; display: block; height: 40px;'>Here's some sample info.</textarea>

The code for the button that calls ajaxTest is...

<button onclick='ajaxTest();'>AJAX Test</button>

The output div is defined as shown below...

<div id='outputDiv'></div>

Using this method you can send data to the server, have it construct some HTML and then add the HTML to the current page.

Using XML

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.

Comments

If you've got any questions or feedback about this article please post them in the Dynamic Tools Javascript Forum.