Browser - Ajax (Asynchronous JavaScript And XML)

About

Asynchronous Javascript and XML (Ajax) is just a name umbrella to talk about a technology that retrieve data from a server asynchronously.

Every Ajax call is using:

• a XMLHttpRequest (XHR) request
• or a Fetch Request

In 1998, the Microsoft Outlook team invented the XMLHttpRequest and, the year after, snuck it into Internet Explorer 5.0. All the browsers followed and the era of AJAX was born.

Management

See

In the Browser devtool, you can see the request.

Example with Chrome.

Library

Native

Web API Fetch

Browser - Web API - Fetch function

Web Api XHR

Browser - XMLHttpRequest (XHR) API

Non-Native

Jquery

Jquery example. https://api.jquery.com/jQuery.ajax/

• Call a local script on the server /api/getWeather with the query parameter zipcode=2343
• get a result (scalar)
• replace the HTML element content with the id #weather-temp with the returned text.

$.ajax({
  url: "/doc/api/weather",
  data: {
    zipcode: 2343
  },
  success: function( result ) {
    $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );
  }
});

• The HTML

The temperature is <span id="weather-temp"></span>

PJax

See also: Pjax that supports browsing history with Ajax call.

Axios

https://github.com/axios/axios

Super Agent

https://github.com/visionmedia/superagent

React

React Class Component - Fetch (Ajax)

Documentation

• Article on Delicious
• Oracle Technical Article, “Hello Ajax”! How to Do the Ajax Thing with Oracle JDeveloper
• Validating Forms with Ajax