Introduction to AJAX: What is AJAX and How it Works

XMLHttpRequest Object

• Syntax for creating an XMLHttpRequest object: variable = new XMLHttpRequest()

XMLHttpRequest Object Methods

• abort(): Cancels the current request
• getAllResponseHeaders(): Returns header information
• getResponseHeader(): Returns specific header information
• open(method, url, async, user, psw): Specifies the request
  • method: the request type (GET or POST)
  • url: the file location
  • async: true (asynchronous) or false (synchronous)
  • user: optional user name
  • psw: optional password
• send(): Sends the request to the server (used for GET requests)
• send(string): Sends the request to the server (used for POST requests)
• setRequestHeader(): Adds a label/value pair to the header to be sent

XMLHttpRequest Object Properties

• onreadystatechange: Defines a function to be called when the readyState property changes
• readyState: Holds the status of the XMLHttpRequest
  • 0: request not initialized
  • 1: server connection established
  • 2: request received
  • 3: processing request
  • 4: request finished and response is ready
• responseText: Returns the response data as a string
• responseXML: Returns the response data as XML data
• status: Returns the status-number of a request
  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"
• statusText: Returns the status-text (e.g. "OK" or "Not Found")

Introduction to AJAX

• AJAX stands for Asynchronous JavaScript and XML
• AJAX is not a programming language, but a combination of:
  • Browser built-in XMLHttpRequest object
  • JavaScript and HTML DOM
• AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes

History of AJAX

• Jesse James Garrett introduced AJAX to the world on 18th February 2005
• W3C released the first draft of XMLHttpRequest object specifications on 5th April 2006

How AJAX Works

• Uses the XMLHttpRequest object to exchange data with a server behind the scenes
• Steps to send a request to a server:
  • Use the open() and send() methods of the XMLHttpRequest object
  • Example: xhttp.open("GET", "ajax_info.txt", true); xhttp.send();