DEV Community

Cover image for Do you know AJAX?
Milan Mohapatra
Milan Mohapatra

Posted on

Do you know AJAX?

What AJAX(Asynchronous JavaScript and XML)?

It is a set of web development techniques, that help the web page to update data asynchronously by establishing communication with the server without loading the webpage(Dats exchange asynchronous behind the sean).

Why AJAX?

In general, if you want to send data to the server, the page has to reload, which is a bad user experience. But in the case of AJAX, it allows certain parts of the page to update asynchronously without reloading the page.

Stapes of AJAX

  1. Event occurs on page.
  2. Send a request to the server.
  3. Receive the response data.
  4. Update data and UI of the page.

In AJAX communication is happening asynchronously with the help of HTTP protocol and the medium is not only XML objects but JSON objects too.

How AJAX?

To implement AJAX I am creating a "Random joke" website. To send a request to the server I am using the XHR (XMLHttpRequest) object, which is provided by the browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Jokes</title>

    <style>
      body {
        height: 100vh;
        background-color: rgb(69, 68, 68);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .btn button {
        background-color: #828181;
        color: white;
        text-align: center;
        border-radius: 10px;
        border: none;
        padding: 10px;
        margin: 10px;
        font-size: 14px;
      }

      .display {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 300px;
        width: 500px;
        border-radius: 10px;
        background-color: white;
        padding: 10px;
      }

      #joke {
        text-wrap: wrap;
        font-size: large;
        text-align: center;
      }
    </style>
  </head>
  <body>

    <div class="btn">
      <button onclick="getAJoke()">Tell me a joke</button>
    </div>

    <div class="display">
      <div id="joke">Click button to laugh!!</div>
    </div>

    <script>
      const jokeDiv = document.getElementById("joke");

      const getAJoke = () => {
        const xhr = new XMLHttpRequest();

        xhr.open("GET", "https://v2.jokeapi.dev/joke/Any?type=single");
        xhr.send();

        xhr.onload = () => {
          if (xhr.status == 200) {
            const data = JSON.parse(xhr.responseText);
            jokeDiv.innerText = data.joke;
          }
        };

        xhr.onerror = () => {
          console.log("Error");
        };
      };
    </script>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode
  • I attached onclick event to the button, which is calling getAJoke () after getting clicked.
  • Creating a new XHR object and using xhr.open() which is taking arguments 'GET'(HTTP method) and URL. Then send a request by xhr.send()
  • After the request-response cycle the onload method is called.
  • As server response in JSON(JavaScript Object Notation) which is a string. To update the data I am using Object.parse() to convert into objects.

Image description

Correct me if I am wrong!!!
Linkedin | Twitter

Top comments (0)