Scribd Logo
Upload

Welcome to Scribd!

  • Iwp Lab 19bce1148

    Uploaded by

    Muskan Dhingra
    26 views8 pages
    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.

    Original Description:

    Original Title

    IWP LAB 19BCE1148 (1)

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    26 views8 pages

    Iwp Lab 19bce1148

    Uploaded by

    Muskan Dhingra
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 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