Scribd
Upload
6 views5 pages

WB 10 PGM

The document outlines a JavaScript program that demonstrates various Ajax operations using both plain JavaScript and jQuery. It includes sections for performing Ajax requests without jQuery, with jQuery, using the getJSON() method, and parsing JSON data with parseJSON(). The program features a simple HTML interface with buttons to execute each operation and display results in a styled container.

Uploaded by

tejusangolli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views5 pages

WB 10 PGM

The document outlines a JavaScript program that demonstrates various Ajax operations using both plain JavaScript and jQuery. It includes sections for performing Ajax requests without jQuery, with jQuery, using the getJSON() method, and parsing JSON data with parseJSON(). The program features a simple HTML interface with buttons to execute each operation and display results in a styled container.

Uploaded by

tejusangolli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

1.

Develop the 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 Demo Program</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<style>

body {

font-family: Arial, sans-serif;

line-height: 1.6;

margin: 0;

padding: 20px;

background-color: #f4f4f4;

.container {

max-width: 800px;

margin: auto;

background: white;

padding: 20px;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

}
h1 {

color: #333;

h2 {

color: #666;

button {

background-color: #4CAF50;

border: none;

color: white;

padding: 10px 20px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

border-radius: 4px;

pre {

background-color: #f8f8f8;

border: 1px solid #ddd;

border-radius: 4px;

padding: 10px;

white-space: pre-wrap;

word-wrap: break-word;

}
</style>

</head>

<body>

<div class="container">

<h1>Ajax Demo Program</h1>

<h2>a. Ajax-like operation without jQuery</h2>

<button onclick="operationWithoutJQuery()">Perform Operation (without jQuery)</button>

<pre id="result-a"></pre>

<h2>b. Ajax-like operation with jQuery</h2>

<button onclick="operationWithJQuery()">Perform Operation (with jQuery)</button>

<pre id="result-b"></pre>

<h2>c. jQuery-like getJSON() method</h2>

<button onclick="getJSONOperation()">Get JSON</button>

<pre id="result-c"></pre>

<h2>d. jQuery parseJSON() method</h2>

<button onclick="parseJSONExample()">Parse JSON</button>

<pre id="result-d"></pre>

</div>

<script>

// Simulated data

const simulatedData = {

text: "This is a sample text from a simulated server response.",


json: {

name: "John Doe",

age: 30,

city: "New York"

};

// a. Ajax-like operation without jQuery

function operationWithoutJQuery() {

setTimeout(function() {

document.getElementById("result-a").textContent = simulatedData.text;

}, 500);

// b. Ajax-like operation with jQuery

function operationWithJQuery() {

$.Deferred(function(deferred) {

setTimeout(function() {

deferred.resolve(simulatedData.text);

}, 500);

}).done(function(result) {

$("#result-b").text(result);

});

// c. jQuery-like getJSON() method

function getJSONOperation() {
$.Deferred(function(deferred) {

setTimeout(function() {

deferred.resolve(simulatedData.json);

}, 500);

}).done(function(result) {

$("#result-c").text(JSON.stringify(result, null, 2));

});

// d. jQuery parseJSON() method

function parseJSONExample() {

var jsonString = JSON.stringify(simulatedData.json);

var jsonObject = $.parseJSON(jsonString);

$("#result-d").text(JSON.stringify(jsonObject, null, 2));

</script>

</body>

</html>

You might also like