AJAX — The Rudiments

What is AJAX?

Ajax (also AJAX; /ˈeɪdʒæks/; or /’aɪ.əs’/ short for Asynchronous JavaScript And XML) is a set of web development techniques using many web technologies on the client-side to create asynchronous Web applications.

With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.

source Wikipedia.

Asynchronous?

Conventional web applications transmit information to and from the server using synchronous requests. what this means basically is, you fill out a form, press submit, and get directed to a new page with new information from the server.

Synchronous calls force the browser to wait for a response from the server before continuing. This leaves the user unable to interact with the browser until the response is complete.

With AJAX, when you press submit, JavaScript will make a request to the server, interpret the results, and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.

Asynchronous requests allow the browser to continue to process code while waiting for a response.

Client — Server interactions (source Wikipedia)

AJAX Technologies

Ajax is not a programming language but a set of web technologies that when used together facilitates data transfer between a client and a server without a page reload on the client side. These sets of technologies includes:

  • HTML (or XHTML) and CSS
  • DOM
  • JSON or XML
  • JavaScript
  • XMLHttpRequest

Ajax uses (X)HTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.

HTML and CSS

HTML is a markup language for defining the structure of a web page, its elements help to define the structure of a web content.

<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

CSS is a style sheet language used for describing the presentation of a document written in a markup language. CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

div p {
background-color: yellow;
}

DOM

The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document. The objects can be manipulated programmatically and any visible changes occurring as a result may then be reflected in the display of the document.

source Wikipedia.

The DOM creates a hierarchy corresponding to the structure of each web document. This hierarchy is made up of nodes. There are several different types of DOM nodes, the most important are ‘Element’, ‘Text’ and ‘Document’.

  • An ‘Element’ node represents an element within a page. So if you have a paragraph element (‘<p>’) then it can be accessed through the DOM as a node.
  • A ‘Text’ node represents all text (within elements) within a page. So if your paragraph has a bit of text in it can be directly accessed through the DOM.
  • The ‘Document’ node represents the entire document. (it’s the root-node of the DOM hierarchy/tree).
  • Also note that element attributes are DOM nodes themselves

Important to note while working with DOM are; Accessing DOM nodes and Traversing the DOM.

Data-interchange formats: JSON and XML

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write, it is easy for machines to parse and generate. source: JSON.org

In computing, Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. source: Wikipedia

Although X in Ajax stands for XML, JSON is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. Both JSON and XML are used for packaging information in Ajax model.

JSON
var myObj = { "name":"John", "age":31, "city":"New York" };
XML
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

JavaScript

JavaScript is a cross-platform, World-Wide Web scripting language, only very vaguely related to Java. JavaScript has a simplified C-like syntax and is tightly integrated with the browser Document Object Model.

Javascript happens to be the de facto standard scripting language for most (if not all) web browsers.

JavaScript and the DOM are usually seen as a single entity since JavaScript is most commonly used for this purpose (interacting with content on the web). The DOM API is used to access, traverse and manipulate HTML and XML documents.

XMLHttpRequest

XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing.

Simple AJAX Request

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}

Ajax Request function to a Weather API Service

function getWeather_1() {
var data;
var searchString = document.getElementById("search_bar").value;
// alert(searchString);
console.log("i got here 1");
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://api.openweathermap.org/data/2.5/weather?q=' + searchString + '&APPID=5a01d61073cf1147b35c30763611501e');
xhr.onreadystatechange = function() {
var DONE = 4;
var OK = 200;
if (xhr.readyState === DONE) {
if (xhr.status === OK) {
data = xhr.responseText
data = JSON.parse(data);
console.log(data);
updateDom(data);
} else if (x.readyState == 3) {
document.getElementById("resultsContainer").innerHTML = "Processing Request";
}
}
}
xhr.send();

AJAX with jQuery

function getWeather_2() {
var data;
var searchString = $("#search_bar").val();
$.getJSON('http://api.openweathermap.org/data/2.5/weather?q=' + searchString + '&APPID=5a01d61073cf1147b35c30763611501e', function(data, status) {
console.log(data);
updateDom(data);
});
}

GitLab Repository to full Code

$ git clone https://gitlab.com/dejibimbolaAyo/ajaxweather.git