Using Ajax To Communicate With a Remote Server


This program makes a request to the server for employee info using the XMLHttpRequest object of the client browser.

The server responds with a comma-separated String of data. This data is used to create a Javascript object. Once an object is
created, functions can be added to it using its Prototype ojbect so further processing occurs on the client. In this case, we
have added a function which calculates the difference between the current salary and the starting salary.

The client page can have multiple submission form areas. Each one can use a single method designed to handle both the request
to the server and the response for the form. A call to this method is generated dynamically by the the XMLHttpRequest callback
method by the server when sending its response to the client.

The first token in the comma-separated server response must be the name of the utility method associated with the user input form.
This allows the single method associated with the form submission to also handle the server response. By sending the function name
to the client in the server response, we are able to call the same client-side function that handled the submission to also handle
the response.

Description of Program Flow

View the scripting here:
The user enters the id of an employee in the text input and clicks the button.
This calls the getPersonData() function with a parameter (which is the employee id number).
The getPersonData function recognizes that this is a form submission and calls makeRequest() method to communicate with the server.
    Note that the getPersonData function has two purposes: 1) process the form submittal, 2) process the server's response.

The request is made and then (onreadystatechange) the execution is passed to processRequestResults() function.
processRequestResults() checks if the response was received and then determines which utility function to call.
The function called is determined by the data recieved from the server (the function name is in the server response).
In this example, it is the function named getPersonData. getPersonData recognizes this is the server's response
and displays the information on the client.

Enter a valid employee id number (ex.: 001, 002, 003, etc.):