Interface Communication Tech: AJAX, Fetch, WebSocket, GraphQL

💡 Interface communication technologies define how clients and servers interact, and questions comparing the purpose and features of each technology frequently appear on the Information Processing Engineer exam.

🔄 Interface Communication Technologies

These are various technologies used for data exchange between a client and a server. Each technology has a different purpose and characteristics.

1. AJAX (Asynchronous JavaScript and XML)

AJAX is a development technique that allows web pages to update dynamically by exchanging data with a server asynchronously in the background, without reloading the entire page.

• Core Role: Uses the XMLHttpRequest object to send requests to the server and receive responses.
• Features:
  • Enhances user experience (UX) by updating only the necessary parts of the page without a full reload.
  • Although XML is in its name, it now primarily uses the lightweight JSON format for data exchange.
  • AJAX is more of a paradigm that uses several technologies (JavaScript, DOM, Fetch/XHR, etc.) rather than a specific technology.

2. Fetch API

The Fetch API is a modern built-in browser API that replaces the XMLHttpRequest object. It is Promise-based, making the code more concise and readable.

• Features:

  • Can be used without installing any separate libraries.
  • Being Promise-based, it works well with async/await syntax, making asynchronous code easier to manage.
  • It has become the web standard and is now more commonly used than AJAX.

• JavaScript Example (using async/await):

  javascript복사

  async function getUser(id) {
    try {
      // Sends a GET request to the API (using **fetch**)
      const response = await fetch(`https://api.example.com/users/${id}`);
  
      // Throws an error if the response is not successful
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
  
      // Parses the response body as JSON
      const user = await response.json();
      console.log(user);
      return user;
    } catch (error) {
      console.error("Fetch error:", error);
    }
  }
  
  // Function call
  getUser(1);

3. WebSockets

WebSockets is a protocol that supports bidirectional, real-time communication between a client and a server.

• Features:
  • Once a connection is established, it remains open (Persistent Connection), allowing for free data exchange.
  • Enables Server-Push, where the server can send data to the client without a client request.
  • Used for applications requiring very low latency, such as real-time chat, online gaming, and stock tickers.

4. GraphQL

GraphQL is a query language for APIs and a runtime for fulfilling those queries. It emerged as an alternative to the REST architecture.

• Features:
  • Solves Over-fetching/Under-fetching: Clients can request the exact data structure they need, eliminating unnecessary data transfer.
  • Allows flexible data requests for various data types through a single endpoint.
  • Manages API specifications with a strong type system.
• JavaScript Example (using fetch):

async function getProduct(id) {
  // The client defines the required data with a GraphQL query.
  const query = `
    query GetProductById($id: ID!) {
      product(id: $id) {
        id
        name
        price
        description
      }
    }
  `;

  try {
    const response = await fetch("https://api.example.com/graphql", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      // The query and variables are sent in the body.
      body: JSON.stringify({
        query: query,
        variables: { id: id },
      }),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const result = await response.json();
    console.log(result.data.product);
    return result.data.product;
  } catch (error) {
    console.error("GraphQL request error:", error);
  }
}

// Function call
getProduct("prod-123");

📝 Exam Preparation Problems