JavaScript/CS Communication

In many cases, the communication between clients and servers is programmed in JavaScript. Those JS-scripts use core and extended aspects of the language, especially its asynchronous features. To realize the communication, there is no need to introduce any special or additional features to the language itself.

But there are some terms, libraries, and APIs that are special to that communication, namely: the term Ajax, the XMLHttpRequest object, libraries like jQuery or Axios, and the Fetch API. Because of their importance, there are separate Wikibooks and Wiki pages that describe their behavior and application. The Wikibook on hand gives only a survey about their significance, short summaries, and links to appropriate pages for further readings.

XMLHttpRequest

The dominating protocol for client/server communication is http(s). It offers commands to read data from a server (GET) and to change the server's data (POST, PUT, PATCH, DELETE). Such commands are transferred within an object called XMLHttpRequest. It also contains the content (data) for both directions: to the server and from the server. Nowadays, the data is formatted chiefly in JSON - despite its name XMLHttpRequest, which stands for its originally used XML format.

How to work with the XMLHttpRequest object is described in:

• MDN: XMLHttpRequest
• Wikipedia: XMLHttpRequest
• W3Schools: XMLHttpRequest

The response (data) returned by XMLHttpRequest may contain HTML fragments or other information that is used to create HTML fragments locally, e.g., data from a database that shall be shown in an HTML table. Therefore it is - among other things - a cornerstone to realize single-page applications (SPA).

Directly working with XMLHttpRequest is not outdated but a legacy technique where you have to consider many details. Libraries based on XMLHttpRequest and other APIs can make your work easier.

Ajax

The asynchronous behavior of the HTTP protocol is so important that it found its way into one of the central terms: "Asynchronous JavaScript and XML, or Ajax, is not a technology in itself, but rather an approach to using a number of existing technologies together, including HTML or XHTML, CSS, JavaScript, DOM, XML, XSLT, and most importantly the XMLHttpRequest object." .

You can find short examples at the following sites:

• MDN: Ajax Introduction
• Wikipedia: Ajax
• Wikibook: Programming Ajax
• W3Schools: Ajax examples

Libraries

jQuery is a JavaScript library that simplifies commonly used activities like DOM traversal and manipulation, event handling, and client/server communication. You can find more information and examples at:

• jQuery Website
• Wikipedia: jQuery
• W3Schools: jQuery

Axios is a JavaScript library. It realizes a client for browsers and for the Webserver node.js. Axios supports promises.

• Axios Website
• Digital Ocean: Axios Tutorial

Fetch API

The fetch API supports the same features as the legacy XMLHttpRequest object and its interface. It is an entirely new implementation (with some minor differences from XMLHttpRequest) and is available in all modern browsers; there is no need for any additional library or framework. It is a member of the Web API family (service worker, DOM API, cache API, ...).

Despite of its name fetch it does not only read data from a server. HTTP commands like PUT, POST, or DELETE are also supported.

You can find more information at:

• MDN: Fetch API
• W3Schools: Fetch API

A complete example is given in the Wikibook on hand. Here is the structure of the script:

fetch('https://jsonplaceholder.typicode.com/users') // an example page
  .then((response) => { return response.json() })   // pick the json part
  .then((users) => { console.log(users) })          // show result
  .catch((err) => console.log('Some error occurred: ' + err.message));

The fetch command requests an example page. This page always returns an array of ten addresses in json format. The first then picks the json-part out of the result, and the second then shows it in the console. If an error occurs (network, typo in URL, ...), the catch-part executes and shows an error message.