Scribd Logo
Upload

Welcome to Scribd!

  • 34 views

    Cse2045Y Web Application Development: Ajax (Asynchronous Javascript and XML)

    Uploaded by

    splokbov
    This document discusses AJAX and provides an example of using AJAX with GET and POST requests. It begins with an introduction to AJAX, explaining that it allows for asynchronous data exchange in the background to update parts of a web page without reloading. It then demonstrates how AJAX works through diagrams and examples. It shows code for an AJAX GET request that retrieves and displays data without reloading the page. It also provides an example of an AJAX POST request. Finally, it proposes an activity to add checking for existing module codes to a form using AJAX.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Cse2045Y Web Application Development: Ajax (Asynchronous Javascript and XML)

    Uploaded by

    splokbov
    34 views16 pages
    This document discusses AJAX and provides an example of using AJAX with GET and POST requests. It begins with an introduction to AJAX, explaining that it allows for asynchronous data exchange in the background to update parts of a web page without reloading. It then demonstrates how AJAX works through diagrams and examples. It shows code for an AJAX GET request that retrieves and displays data without reloading the page. It also provides an example of an AJAX POST request. Finally, it proposes an activity to add checking for existing module codes to a form using AJAX.

    Original Description:

    Original Title

    CSE2045Y- Lecture 2 - AJAX

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document discusses AJAX and provides an example of using AJAX with GET and POST requests. It begins with an introduction to AJAX, explaining that it allows for asynchronous data exchange in the background to update parts of a web page without reloading. It then demonstrates how AJAX works through diagrams and examples. It shows code for an AJAX GET request that retrieves and displays data without reloading the page. It also provides an example of an AJAX POST request. Finally, it proposes an activity to add checking for existing module codes to a form using AJAX.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    34 views16 pages

    Cse2045Y Web Application Development: Ajax (Asynchronous Javascript and XML)

    Uploaded by

    splokbov
    This document discusses AJAX and provides an example of using AJAX with GET and POST requests. It begins with an introduction to AJAX, explaining that it allows for asynchronous data exchange in the background to update parts of a web page without reloading. It then demonstrates how AJAX works through diagrams and examples. It shows code for an AJAX GET request that retrieves and displays data without reloading the page. It also provides an example of an AJAX POST request. Finally, it proposes an activity to add checking for existing module codes to a form using AJAX.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 16

    CSE2045Y

    Web Application Development

    Lecture 2
    AJAX (Asynchronous JavaScript And XML)

    Agenda
    • What is AJAX?
    • The AJAX model
    • Why use AJAX
    • How AJAX works?
    • AJAX example using:
    – GET
    – POST

    2
    What is AJAX?
    • AJAX = Asynchronous JavaScript and XML.

    • AJAX is not a new programming language, but


    a new way to use existing standards.

    • AJAX is the art of exchanging data with a


    server, and update parts of a web page -
    without reloading the whole page.

    The AJAX Model

    http://blog.arvixe.com/wp-content/uploads/2013/08/ajax-diagram.png
    4
    Why use AJAX?
    • AJAX is a technique for creating fast and dynamic web
    pages.

    • AJAX allows web pages to be updated asynchronously by


    exchanging small amounts of data with the server behind
    the scenes.
    – This means that it is possible to update parts of a web page,
    without reloading the whole page.

    • Classic web pages, (which do not use AJAX) must reload


    the entire page if the content should change.

    • Examples of applications using AJAX: Google Maps,


    Gmail, Youtube, and Facebook tabs.

    How AJAX Works (1)

    https://www.w3schools.com/php/ajax.gif
    How AJAX Works (2)
    • AJAX is based on internet standards, and uses a
    combination of:
    – XMLHttpRequest object (to exchange data asynchronously
    with a server)
    – JavaScript/DOM (to display/interact with the information)
    – CSS (to style the data)
    – XML (often used as the format for transferring data)

    • AJAX applications are browser and platform


    independent !

    How AJAX Works (3)


    • Google Suggest
    – AJAX was made popular in 2005 by Google, with
    Google Suggest.
    – Google Suggest is using AJAX to create a very
    dynamic web interface: When you start typing in
    Google's search box, a JavaScript sends the letters
    off to a server and the server returns a list of
    suggestions.
    AJAX Example using GET
    AJAX Example
    How it works?

    function ajaxGET()

    get.html

    formGET.php

    get.html
    <html>
    <head>
    <script type="text/javascript" src="ajax_functions.js"></script>
    </head>
    <body>

    <h1>AJAX GET Example</h1>


    <form>
    Your name: <input type="text" id="name" name="name" size="25" /> <br >
    <br>Your age: &nbsp;&nbsp;&nbsp;<input type="text" id="age" name="age" size="25"/>
    <br><br><input type="button" value=“Display message" onClick="ajaxGET();" />
    </form>

    <div id="result"> </div>

    </body></html>
    get.html
    • A Javascript function ajaxGET() is called when the
    submit button is clicked.
    <input type="button" value="submit"
    onClick="ajaxGET();" />

    • ajaxGET() constructs an http request and returns


    the response.

    • The response is displayed in an html <div>


    element.
    <div id="result"> </div>

    function ajaxGET()
    function ajaxGET(){
    var http_request= new XMLHttpRequest();

    var namevalue=document.getElementById("name").value;
    var agevalue=document.getElementById("age").value;
    http_request.open("GET", "formGET.php?name="+namevalue+"&age="+agevalue, true);

    http_request.onreadystatechange=function(){
    if (http_request.readyState==4){
    if (http_request.status==200) {
    document.getElementById("result").innerHTML=http_request.responseText;
    }
    else{
    alert("An error has occured making the request");
    }
    }
    }

    http_request.send(null);
    }//end function ajaxGET()
    function ajaxGET()
    • ajaxGET() builds an http request to
    formGET.php with appropriate
    parameters (name & age).

    var namevalue=document.getElementById("name").value;
    var agevalue=document.getElementById("age").value;

    http_request.open("GET", "formGET.php?
    name="+namevalue+ "&age="+agevalue, true);

    function ajaxGET()
    • The innerHTML property of the <div> is
    used to display the response.
    http_request.onreadystatechange=function(){
    if (http_request.readyState==4){
    if (http_request.status==200) {

    document.getElementById("result").innerHTML=
    http_request.responseText;
    }
    else{
    alert("An error has occured making the request");
    }
    }
    }
    formGET.php
    <?php
    $name=$_GET['name'];
    $age=$_GET['age'];

    echo "<span style='color:red'>Welcome


    <b>$name</b>... So you're <b>$age</b>
    years old?</span>";
    ?>

    formGET.php
    • Name & Age are retrieved using the GET
    method.
    $name=$_GET['name'];
    $age=$_GET['age'];

    • and used within the html response.


    echo "<span style='color:red'>Welcome
    <b>$name</b>... So you're <b>$age</b>
    years old?</span>";
    AJAX Example using POST
    post.html
    <html>
    <head>
    <script type="text/javascript" src="ajax_functions.js"></script>
    </head>
    <body>

    <h1>AJAX POST Example</h1>


    <form>
    Your name: <input type="text" id="name" name="name" size="25" /> <br />
    <br>Your age: &nbsp;&nbsp;&nbsp;<input type="text" id="age" name="age" size="25" />
    <br />
    <br><input type="button" value="Display message" onClick="ajaxPOST();" />
    </form>

    <div id="result"> </div>

    </body></html>

    function ajaxPOST()
    function ajaxPOST(){
    var http_request= new XMLHttpRequest();

    var namevalue=document.getElementById("name").value;
    var agevalue=document.getElementById("age").value;
    var parameters="name="+namevalue+"&age="+agevalue;
    http_request.open("POST", "formPOST.php", true);
    http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    http_request.onreadystatechange=function(){
    if (http_request.readyState==4){
    if (http_request.status==200) {
    document.getElementById("result").innerHTML=http_request.responseText;
    }
    else{
    alert("An error has occured making the request");
    }
    }
    }
    http_request.send(parameters);
    }//end function ajaxpost
    formPOST.html
    <?php
    $name=$_POST['name'];
    $age=$_POST['age'];

    echo "<span style='color:red'>Welcome


    <b>$name</b>...
    So you are <b>$age</b> years old?</span>";
    ?>

    Activity 1
    • Consider the following form addModule.php,
    used for admin section to enter modules into the
    system. addModule.php is submitted to
    addmodule_process.php using the GET
    method.
    Activity 1
    • Requirements:
    – Each time the user types the module code, a request is
    sent to check if this module already exists.

    – Assume that a page, checkModule.php, takes the


    module code and checks the code in the database. If the
    code exists, it returns “Exists”, else it returns “Not
    exists”.

    Activity 1
    • Modify the codes in addModule.php (given in next
    slide) such that if the module code exists, a
    message is displayed next to the module code field
    to inform the user that this module already exists.

    • Make sure in your code that:


    1. You define the function that builds the request
    to the server (using GET).
    2. You call this function .
    3. You add the proper code to display the status
    message.
    addModule.php
    <form name="addmodule" method="get" action="addmodule_process.php">
    <table id=table_modules>
    <tr>
    <td>Module Code:</td>
    <td><input type="text" name="txt_modulecode" id="txt_modulecode">
    </td>
    <td></td></tr>
    <tr>
    <td>Module Description:</td>
    <td><input type="text" name="txt_modulename" id="txt_modulename">
    </td>
    </tr>
    </table>
    <input type=“submit" value="Submit Query">
    </form>

    Database
    • Assume that the following schema has
    been defined for the database,
    implemented in MySQL.
    db_connect.php
    <?php
    $strHost = "localhost";
    $strUser = "root";
    $strPass = "";
    $strDb = "feedbackdatabase";

    // open connection
    $con = mysqli_connect($strHost, $strUser, $strPass, $strDb);

    // Check connection
    if (mysqli_connect_errno()){
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
    ?>

    checkModule.php
    <?php
    // MISSING CODES 1 - Get module code

    require("db_connect.php");

    $sql="SELECT * FROM modules WHERE modulecode = '".$modulecode."'";


    $result = mysqli_query($con,$sql);

    // MISSING CODES 2 – Display status message

    mysqli_close($con);
    ?>

    Hint: The mysqli_num_rows($result) function returns the number of rows in a


    resultset.
    References
    • https://blog.arvixe.com/opencart-create-ajax-
    function/

    31

    You might also like