Scribd
Upload
58 views8 pages

Iwp Lab 19bce1148

This document contains code for a web page that uses JavaScript and XMLHttpRequest to make an AJAX call to fetch data from a PHP file and display it on the page. The code defines an XMLHttpRequest object, and a getData function that takes the data source and target div ID as parameters. The function opens a GET request, defines an onreadystatechange callback to insert the response text into the target div when complete, and sends the request. Buttons on the page call the getData function to display message content fetched from data.php.

Uploaded by

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

Iwp Lab 19bce1148

This document contains code for a web page that uses JavaScript and XMLHttpRequest to make an AJAX call to fetch data from a PHP file and display it on the page. The code defines an XMLHttpRequest object, and a getData function that takes the data source and target div ID as parameters. The function opens a GET request, defines an onreadystatechange callback to insert the response text into the target div when complete, and sends the request. Buttons on the page call the getData function to display message content fetched from data.php.

Uploaded by

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

MUSKAN DHINGRA

19BCE1148
INTERNET AND WEB PROGRAMMING
LAB
QUES1:
CODE:
<DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>DOM_Manipulation</title>

<style>

body

background-color: aquamarine;

font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

font-size: 40px;

.democlass

color:blue;

</style>

</head>

<body>

<div id="div1">

<p id="p1" style="color:blue;">My name is Muskan.</p>


<p id="p2" style="color:red;">IWP LAB.</p>

<input value="Fall semester"><br>

</div>

<div>

<p id="p3" style="color:darkred;" >Hey,this is a JavaScript program!</p>

</div>

<div>

<details ontoggle="DOM_mouse_events()">

<summary style="font-size: 20px;">Written in summary tag!!</summary>

<p style="font-size: 20px;"> - by Refsnes Data. All Rights Reserved.</p>

<p style="font-size: 20px;">All content and graphics on this web site are the property of the
company Reference Data.</p>

</details>

</div>

<div>

<p style="font-size: 20px;" >Press any key on the keyboard :</p>

<input type="text" size="40" onkeydown="DOM_keyboard_event(event)">

<p id="p4" style="color: lightcoral;font-size: 30px;"></p>

</div>

<button type="button" id="b1" onclick="change_html()">ChangeHTML</button>

<button type="button" onclick="change_css()">ChangeCSS</button>

<button onclick="change_HTML_attribute()">ChangeATTRIBUTE</button>

<button onclick="create_HTML_element()">CreateELEMENT</button>

<button onclick="delete_ELEMENT()">DeleteHTML</button>

<script>

function change_html()

document.getElementById("p1").innerHTML="September!!";

}
function change_css()

document.getElementById("p2").style.color = "red";

function change_HTML_attribute()

document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");

function create_HTML_element()

var para = document.createElement("p");

var node = document.createTextNode("HEY!");

para.appendChild(node);

var element = document.getElementById("div1");

element.appendChild(para);

function delete_ELEMENT()

var elmnt = document.getElementById("p3");

elmnt.remove();

function DOM_mouse_events()

alert("The ontoggle event occured!")

function DOM_keyboard_event(event)

var x = event.key;

document.getElementById("p4").innerHTML = "The pressed key was: " + x;


}

</script>

</body>

OUTPUT:
ON PRESSING CHANGE HTML:

ON PRESSING CREATE-ELEMENT & CHANGE ATTRIBUTE:


ON PRESSING DELETE HTML:

QUES2:
CODE:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>QUESTION-2</title>

</head>

<body>

<script language = "javascript">

varXMLHttpRequestObject = false;

if(window.varXMLHttpRequest) {

varXMLHttpRequestObject = new XMLHttpRequest();

}
else if(window.ActiveXObject) {

varXMLHttpRequestObject = new ActiveXObject('Microsoft.XMLHTTP');

function getData(dataSource, divID) {

if(varXMLHttpRequestObject) {

var obj = document.getElementById(divID);

varXMLHttpRequestObject.open("GET", dataSource);

varXMLHttpRequestObject.onreadystatechange = function(){

if(varXMLHttpRequestObject.readyState == 4 &&

varXMLHttpRequestObject.status == 200) {

obj.innerHTML = varXMLHttpRequestObject.responseText;

varXMLHttpRequestObject.send(null);

</script>

<h1>Fetching data with Ajax and PHP</h1>

<form action="">

<input type="button" value="Display Message" onclick = "getData('data.php', 'targetDiv')">

</form>

<div id="targetDit">

<p>The fetched data will go here.</p>

</div>

</body>

</html>
OUTPUT:

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy