Slide 13.17: AJAX XML: The JavaScript file

AJAX XML: The JavaScript File

Course information will be listed here.

When a user selects a course in the dropdown list above, a function called showCourse as below is executed. The showCourse function does the following:

Check if a course is selected.

Create an XMLHttpRequest object.

Create the function to be executed when the server response is ready.

Send the request off to a file on the server.

A parameter (q) with the content of the dropdown list is added to the URL.

01function showCourse( str ) {
02  if ( str == "" ) {
03    document.getElementById("txtHint").innerHTML = "";
04    return;
05  }
06  if ( window.XMLHttpRequest ) {
07    // code for IE7+, Firefox, Chrome, Opera, Safari
08    xmlhttp = new XMLHttpRequest( );
09  }
10  else {
11    // code for IE6, IE5
12    xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );
13  }
14  xmlhttp.onreadystatechange = function( ) {
15    if ( ( xmlhttp.readyState == 4 ) && 
16         ( xmlhttp.status     == 200 ) ) { 
17      document.getElementById("txtHint").innerHTML = 
18        xmlhttp.responseText;
19    }
20  }
21  xmlhttp.open( "GET", "GetCourse.php?q="+str, true );
22  xmlhttp.send( );
23}