AJax

• An HTML document to produce an initial screen
  • An HTML document itself may be produced from .html, .php, .java (servlet), or .jsp
• A JS to produce an Ajax request
• A server-side program (i.e., response component) to process the request and produce a response
  • The response component must be on the same server as the original HTML document (for security purpose). Otherwise headers must be set to accept the requests from remote server(s).
  • If the response component must be on a different server, headers must be configured to instruct the server to give the Ajax component the necessary privileges so that the request from the Ajax component can be accepted by the server.

    header('Access-Control-Allow-Origin: http://localhost:4200');
    // header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding');
    header('Access-Control-Max-Age: 1000');  
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT');

    Refer to dealing with CORS for more information on header setting for cross-site request.
• A JS to update the original HTML document based on the response received from the server

• Client communicates to the server with the XMLHttpRequest object

  variable = new XMLHttpRequest(); 

  
  
• The callback must be configured so that the server-side program (i.e., response component) knows which callback function to be invoked. The callback calls the response function. The response function must be registered in onreadystatechange property of the XMLHttpRequest object. Note: Only the code is registered, not the function name.

  xhr.onreadystatechange = receivePlace; 

  
  
• The handler then calls the open() method of the xhr object.
  • Parameters
    • HTTP method (GET or POST)
    • URL of the response component on the server
    • A boolean literal to indicate if the request is asynchronous (true) or synchronous (false)
    • The form data must be attached to the URL if GET is used xhr.open("GET", "zipLookup?zip=" + zip, true)
  
  
• A request is sent with the send method

  xhr.send(); 

• When the response component on the server finishes, it
  • invokes the specified callback function
  • sends the response object to the client
  
  
• Server returns a sequence of notices, or callbacks, to the client

  Value	readyState	Description
  0	Request not initialized	After the XMLHttpRequest object is created but before the open() method has been called, the readyState property of the XMLHttpRequest object is assigned a value of 0.
  1	Server connection established	After the open() method has been invoked successfully, the readyState property of the XMLHttpRequest object is assigned a value of 1.
  2	Request received	After the send() method has been invoked and the HTTP response headers have been received, the readyState property of the XMLHttpRequest object is assigned a value of 2.
  3	Processing request	Once the HTTP response content begins to load, the readyState property of the XMLHttpRequest object is assigned a value of 3.
  4	Request finished and response is ready	Once the HTTP response content has finished loading, the readyState property of the XMLHttpRequest object is assigned a value of 4.

  
  
• HTTP response status

  Category	Status
  Successful 2xx	200 OK
  Redirection 3xx	301 Moved Permanently
  	302 Found
  Client Error 4xx	400 Bad Request
  	401 Unauthorized
  	403 Forbidden
  	404 Not Found
  Server Error 5xx	500 Internal Server Error
  	503 Service Unavailable
  	504 Gateway Timeout

  
  
• Response component returns data in response to the request from the JS
  • Sebesta's example uses PHP.
    • Response data is produced with a print statement
  • In a servlet, we implement the doGet() method and put the response in the usual Response object.
    • We do not need to send an entire HTML page, just a string of the updated content.
    • We do not need to call setContentType().
    • A security rule requires that the response servlet be on the same server as the original document. However, to work around (and host the response component and the original document on different web servers), we need to configure the header.
  
  
• The callback function updates the HTML document.
  
  

Front page (popcornA.html)


Request phase: JS (popcornA.js)

Response component on the server (getCityState.php) processes the request and returns the result.

Receiver phase: (popcornA.js)

  Example (Java Servlet version)