Qu'est-ce qu'AJAX?

• AJAX (Asynchronous JavaScript and XML)
• A web programming concept based on several technologies.
• Technologies include Javascript, XML, and JSON.

Traditional Process

• After sending a request from the navigator.
• The server responds by sending the HTML code of the page, as well as everything associated with it (scripts, images, media, etc).
• The server response is much more voluminous than the navigator's request

AJAX Process

• After sending a request from the navigator.
• The server sends back the requested data in a lightweight format (XML or JSON).
• Using Javascript (DOM), the navigator updates a small part of the page with the data received from the server.

History of AJAX

• Term introduced by Jesse James Garrett on February 18, 2005, in an article on the Web Adaptive Path site.
• Javascript uses a non-standard XMLHttpRequest object to communicate with scripts located on the server.
• The XMLHttpRequest object allows exchanging data in different formats such as XML, JSON, HTML and Text.
• Initially, XMLHttpRequest was an ActiveX component created in 1998 by Microsoft for their web application.
• The component was added to the ECMAScript standard for the JavaScript language and implemented in most browsers between 2002 and 2005.

XMLHttpRequest Properties

• Properties include readyState, onreadystatechange, status, statusText, responseText, and responseXML.
• readyState stores the status of the XMLHttpRequest object, where:
  • 0: Request not initialized.
  • 1: Connection to server established.
  • 2: Request received.
  • 3: Request in progress.
  • 4: Request completed and response ready.
• onreadystatechange is an event triggered when the readyState value changes, associated with a function.
• status holds the HTTP request status code.
• statusText contains the textual message corresponding to the HTTP request status.
• responseText contains the response in text format.
• responseXML contains the response in XML format.

XMLHttpRequest Methods

• Methods include XMLHttpRequest(), send(), open(), setRequestHeader(), getResponseHeader(), getAllResponseHeaders(), and abort().
• XMLHttpRequest() is the constructor for the XMLHttpRequest class.
• send() sends a GET request to the server.
• send(string) sends a POST request to the server.
• open(method, url, async, user, psw) constructs a request:
  • method: GET or POST.
  • url: file location.
  • async: asynchronous (true) or synchronous (false) mode.
  • user: optional username.
  • psw: optional password.
• setRequestHeader() adds a key-value pair to the HTTP header of the request to be sent.
• getResponseHeader() retrieves a value of a parameter from the HTTP response.
• getAllResponseHeaders() retrieves all the parameters of the HTTP response.
• abort() cancels the current request.

Example 1: Retrieving Content from a JSON File

• Code snippet shows how to retrieve content from a JSON file.

Example 2: Retrieving the Result of Executing a PHP Script

• Code snippet shows how to retrieve the result of executing a PHP script using a POST request.

jQuery and AJAX

• jQuery provides functions to facilitate manipulation of HTTP requests with AJAX, including load(), $.get(), $.post(), and $.ajax().
• load() function loads data from a server and inserts the result into a selected element.
• $.get() function retrieves data from a server using the HTTP GET method.
• $.post() function sends data to a server using the HTTP POST method.
• $.ajax() function sends an HTTP request with customizable parameters.

The load() Function

• Function used to load data from a server and place the result in a selected element.

The $.get() Function

• Function used to retrieve data from a server using the HTTP GET method.

The $.post() Function

• Function to load data from a server using the HTTP POST method.

The $.ajax() Function

• Function to send an HTTP request with customizable parameters.
• Parameters include contentType, data, dataType, method, statusCode, error, success, url, headers.
• contentType is the type of data sent to the server.
• data is the data to be sent to the server.
• dataType is the type of data to receive from the server.
• method is the HTTP method to use.
• statusCode is a JSON object containing HTTP code listings with callback function to manage all HTTP return codes from the server.
• error is a callback function that executes in case of an error from the server.
• success is a callback function that executes in case of a favorable response from the server.
• url is the link to which the HTTP request is sent.
• headers is a JSON object containing a set of key-value pairs of HTTP headers.