Web Technology lab

Program 10

Develop a JavaScript program with Ajax (with HTML/CSS) for:

a. Use ajax() method (without Jquery) to add the text content from the text file by sending ajax request.

b. Use ajax() method (with Jquery) to add the text content from the text file by sending ajax request.

c. Illustrate the use of getJSON() method in jQuery

d. Illustrate the use of parseJSON() method to display JSON values. 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX and JSON Examples</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .container {
      margin: 20px;
    }
    button {
      margin: 10px 0;
      padding: 10px 15px;
      cursor: pointer;
      border: none;
      color: #f9f9f9;
      background-color: rgb(26, 190, 73);
    }
    #content, #jsonContent {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      background-color: #f9f9f9;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>AJAX and JSON Examples</h1>

    <!-- Buttons -->
    <button id="loadTextJS">Operation without jQuery</button>
    <button id="loadTextJQ">Operation with jQuery</button>
    <button id="loadJSON">getJSON</button>
    <button id="parseJSON">Parse JSON</button>

    <!-- Content -->
    <div id="content"></div>
    <div id="jsonContent"></div>
  </div>
  


<script>

// without jQuery ajax Method

document.getElementById("loadTextJS").addEventListener("click", function () {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "example.txt", true); // Assuming "example.txt" is in the same directory
  xhr.onload = function () {
    if (xhr.status === 200) {
      document.getElementById("content").innerText = xhr.responseText;
    }
  };
  xhr.onerror = function () {
    console.error("An error occurred while processing the request.");
  };
  xhr.send();
});

// with jQuery's ajax method

$("#loadTextJQ").click(function () {
  $.ajax({
    url: "example.txt", // Assuming "example.txt" is in the same directory
    method: "GET",
    success: function (data) {
      $("#content").text(data);
    },
    error: function () {
      console.error("Error loading the text file.");
    },
  });
});

// jQuery's getJSON method

$("#loadJSON").click(function () {
  $.getJSON("example.json", function (data) {
    let output = "
JSON Data:
    ";
    $.each(data, function (key, value) {
      output += `
  • ${key}: ${value}
    • `;
    });
    output += "
";
    $("#jsonContent").html(output);
  });
});

//  jQuery's parseJSON method

$("#parseJSON").click(function () {
  const jsonString = '{"name": "John Doe", "age": 30, "city": "New York"}';
  const jsonObj = $.parseJSON(jsonString);

  let output = "
Parsed JSON:
    ";
  for (let key in jsonObj) {
    output += `
  • ${key}: ${jsonObj[key]}
    • `;
  }
  output += "
";
  $("#jsonContent").html(output);
});


</script>

</body>
</html>

Output :-

Output1 :- output




Output2 :- output




Output3 :- output
Comments

Replay !

0 Comments

Share Your Thoughts

Please enter your name
Please enter a valid email
Password must be at least 6 characters
Please enter your comment
0/500 characters
Email Verification Required
We've sent a 6-digit verification code to . Please enter the code below to verify your email address.
Email Verified Successfully!
Your email has been verified. Would you like to proceed with posting your comment?

Type "YES" to confirm and post your comment, or click Cancel to skip posting.