Stanford CS142 笔记 - Server Communication

Introduction

In software engineering, server comminicates with browser. Controller fetches the model for the View. There are a lot of tools that enable this functionality.

AJAX

AJAX stands for Asynchronous JavaScript and XML. It is a set of web development techniques that allows a web page to communicate with a server asynchronously, meaning that the web page can update parts of itself (such as data in a table or form) without needing to reload the entire page. AJAX uses JavaScript to make HTTP requests to a server, fetch data, and then update parts of the web page.

XMLHttpRequest

One of the early methods for enabling browser-server communication was the XMLHttpRequest (XHR) object. It allows browsers to send asynchronous HTTP requests without refreshing the entire page.

let xhr;
xhr = new XMLHttpRequest();
xhr.onreadystatechange = xhrHandler; // Event handler for state change
xhr.open("GET", url); // Open a connection (GET request in this case)
xhr.send(); // Send the request

function xhrHandler(event) {
    // this === xhr (the XMLHttpRequest object)
    if (this.readyState != 4) {
        return;
    }
    if (this.status != 200) {
        return;
    }
    let text = this.responseText;
    // You can now use 'text' as needed (e.g., display it, process it, etc.)
}

• Create an XMLHttpRequest object, open a connection to the server (GET/POST/other methods), and send the request.

• The onreadystatechange event handler is called every time the readyState of the XMLHttpRequest object changes. The readyState property of the XMLHttpRequest object represents the current state of the request:

  • 0: UNSENT – The request has not been initialized yet.
  • 1: OPENED – The request has been opened but not sent yet.
  • 2: HEADERS_RECEIVED – The request has been sent, and headers have been received.
  • 3: LOADING – The request is in progress, and some response data has been received (but not fully).
  • 4: DONE – The request is complete, and the full response is available.

• In this example, the handler only cares about the final state (i.e., readyState == 4) when the request has been completed:

  • this.readyState != 4: This condition checks whether the request has completed or not. If the state is not 4 (DONE), it returns early and doesn’t proceed.

  • this.status != 200: Once the request is complete, this condition checks whether the HTTP status code is 200 (OK). If the status is not 200, it returns early, meaning it only proceeds if the request was successful.

  • this.responseText: After confirming the request has completed successfully, it retrieves the response text (the raw data returned from the server) and stores it in text. You can then use this text as needed.

• Nowadays, fetch() api is more widely used. The response is usually JSON object nowadays.

REST API

REST API (Representational State Transfer Application Programming Interface) is a set of rules that allows systems to communicate with each other over the internet using HTTP methods.

• Resource: A resource in REST is any data or object that can be accessed and manipulated via the API, such as user profiles, blog posts, comments, products, etc.
• URI: Uniform Resource Identifier, typically a URL, e.g., /books might represent the collection of books.
• HTTP methods: GET, POST, DELETE, PUT.
• e.g., GET /photo/78237489, POST /photo/.
• Clients (web apps, mobile apps) send HTTP requests to specific endpoints, and the server responds with data (often in JSON format)
• REST APIs are platform-independent and can be accessed by any client that can send HTTP requests (e.g., web browsers, mobile apps, or servers). With a REST API, the frontend and backend can be developed independently.
• RESTful APIs are stateless, meaning that the server does not store any information about the client between requests.

In conclusion, RESt API provides Standardization (otherwise, we need to customize how browser interacts with the server), Decoupling of frontend and backend, and Scalability.

Axios

Axios is a JavaScript library that simplifies making HTTP requests. Axios is also promise-based and is widely used for communicating with RESTful APIs. It is a wrapper around XMLHttpRequest but provides a cleaner, more intuitive API, automatic JSON parsing, and better error handling. Axios can be used for making AJAX requests, just like fetch() or XMLHttpRequest. Here is an example usage:

axios.get('/api/user/123')
  .then(response => console.log(response.data)) // Process the JSON response
  .catch(error => console.error('Error:', error));

Promises

For how to use promises, please refer to MIT Weblab笔记 - Asynchronous Control.

Document on promises