"I am Saqib Jahangir. A passionate vlogger, software engineer, trainer and avid traveler with a deep love for exploring the hidden gems of our beautiful planet. With a strong foundation in Application Development, Application Architecture & Database Design and Product Management, I bring over a decade of hands-on experience building secure, scalable, and resilient web applications for a diverse range of industries."

Fetch API and AJAX

JavaScript allows you to communicate with servers to fetch or send data without reloading the web page. This technique is called AJAX (Asynchronous JavaScript and XML), and the modern way to do it is with the Fetch API.

Making HTTP Requests

The Fetch API uses the fetch() function to make HTTP requests and retrieve resources such as JSON data.

fetch("https://api.example.com/data")
  .then(response => response.json()) // Parse JSON from response
  .then(data => {
    console.log(data); // Use the fetched data here
  })
  .catch(error => {
    console.error("Error fetching data:", error);
  });

Fetching JSON Data from API

JSON (JavaScript Object Notation) is a lightweight data format used to store and exchange data. It’s easy for humans to read and write, and easy for machines to parse and generate.

Key points about JSON:

·         Format: JSON represents data as key-value pairs, much like a dictionary or map.

·         Data types: It supports strings, numbers, booleans (true/false), arrays (lists), objects (nested key-value pairs), and null.

·         Structure: Data is wrapped inside curly braces {} for objects, and square brackets [] for arrays.

·         Language independent: Although JSON originated from JavaScript, it is language-agnostic and widely used for data exchange between servers and web apps, APIs, databases, etc.

Example:

{
  "name": "Alice",
  "age": 25,
  "isStudent": true,
  "hobbies": ["reading", "music", "hiking"]
}

·         "name" is a key and "Alice" is its string value.

·         "age" has a number value.

·         "isStudent" has a boolean value.

·         "hobbies" is an array containing strings.

The .json() method on the response object converts the raw response into a JavaScript object, making it easy to work with.

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(users => {
    users.forEach(user => {
      console.log(user.name);
    });
  });

.then() Chaining

The Fetch API returns a Promise, which lets you chain multiple .then() calls to handle asynchronous operations in order.

fetch("https://api.example.com/posts")
  .then(response => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then(posts => {
    console.log(posts);
  })
  .catch(error => {
    console.error("Fetch error:", error);
  });

 


Popular Posts

Operators (Arithmetic, Comparison, Logical)

  Operators in PHP are symbols that perform operations on variables and values. They are essential for performing calculations, comparing values, and making logical decisions in your code. PHP supports several types of operators, including arithmetic, comparison, and logical operators. Arithmetic Operators Arithmetic operators are used to perform basic mathematical operations. Example: <?php $a = 10; $b = 3;   echo $a + $b; // 13 echo $a - $b; // 7 echo $a * $b; // 30 echo $a / $b; // 3.3333 echo $a % $b; // 1 (modulus) echo $a ** $b; // 1000 (exponentiation) ?> Comparison Operators Comparison operators are used to compare two values. They return true or false . Example: <?php $x = 5; $y = 10;   var_dump($x == $y);   // false var_dump($x != $y);   // true var_dump($x === $y); // false (checks value and type) var_dump($x !== $y); // true var_dump($x > $y);    // false var_dum...
Read more

Functions (Built-in & User-defined)

  Functions in PHP are blocks of code designed to perform a specific task. They help make code reusable, organized, and easier to maintain. PHP provides built-in functions for common tasks, and also allows you to create your own user-defined functions . Built-in Functions PHP has hundreds of built-in functions that perform predefined operations such as string manipulation, mathematical calculations, and array handling. Example (Built-in Functions): <?php // String length echo strlen("Hello World"); // Outputs: 11   // Find maximum value in an array echo max(10, 20, 30); // Outputs: 30   // Convert string to uppercase echo strtoupper("php is awesome"); // Outputs: PHP IS AWESOME ?> User-defined Functions You can create your own functions to execute code whenever needed. This helps reduce repetition and makes programs easier to read. Syntax: function functionName($parameter1, $parameter2) {     // Code to...
Read more