Scribd Logo
Upload

Welcome to Scribd!

  • 14 views

    FSD Module5 PPT

    Uploaded by

    Yogita Hulaji
    fullstack vtu 21scheme 5th module

    Copyright:

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

    FSD Module5 PPT

    Uploaded by

    Yogita Hulaji
    14 views32 pages
    fullstack vtu 21scheme 5th module

    Original Title

    FSD_MODULE5_PPT

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    fullstack vtu 21scheme 5th module

    Copyright:

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

    FSD Module5 PPT

    Uploaded by

    Yogita Hulaji
    fullstack vtu 21scheme 5th module

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 32

    Module-5

    Jquery and Ajax integration with Dijango


    Ajax
    Ajax: Asynchronous JavaScript and XML

    AJAX, which stands for asynchronous JavaScript and XML, is a set of technologies used
    on the client-side to send and retrieve data from the server asynchronously.

    • not a programming language; a particular way of using JavaScript

    • downloads data from a server in the background

    • allows dynamically updating a page without making the user wait

    • avoids the "click-wait-refresh" pattern


    Ajax
    • JavaScript includes an XMLHttpRequest object that can fetch
    files from a web server
    • it can do this asynchronously (in the background,
    transparent to user)
    • the contents of the fetched file can be put into current web
    page using the DOM
    Synchronous web communication
    Asynchronous web communication
    Technologies used in Ajax
    HTML/XHTML and CSS

    DOM

    XML or JSON

    Django

    XMLHttpRequest

    Javascript
    Javascript
    JavaScript is a lightweight, cross-platform, single-
    threaded, and interpreted compiled programming language. It is also
    known as the scripting language for webpages. It is well-known for the
    development of web pages, and many non-browser environments also
    use it.

    All popular web browsers support JavaScript as they provide built-in


    execution environments.

    It provides good control to the users over the web browsers.

    JavaScript is a weakly typed language, where certain types are


    implicitly cast (depending on the operation).
    Javascript Events
    Event Description
    onchange An HTML element has been changed

    onclick The user clicks an HTML element

    onmouseover The user moves the mouse over an HTML element

    onmouseout The user moves the mouse away from an HTML element

    onkeydown The user pushes a keyboard key

    onload The browser has finished loading the page


    DOM
    REST API integrated with frontend technology using AJAX and JQuery
    JSON vs XML
    XML
    Features of XML
     XML focuses on data rather than how it
    looks
     Easy and efficient data sharing
     Compatibility with other markup
    language HTML
     Supports platform transition
     Allows validation
     XML supports Unicode
    JSON

    JSON
     JavaScript Object Notation
     JSON is a lightweight format for storing and transporting data
     JSON is often used when data is sent from a server to a web page
     JSON is "self-describing" and easy to understand
    Ajax workflow
    1. user clicks, invoking an event handler
    2. handler's code creates an XMLHttpRequest object
    3. XMLHttpRequest object requests page from server
    4. server retrieves appropriate data, sends it back
    5. XMLHttpRequest fires an event when data arrives
    this is often called a callback
    you can attach a handler function to this event
    6. your callback event handler processes the data and displays it
    XMLHttpRequest Methods
    JQuery
    jQuery is a lightweight, "write less, do more", JavaScript library.

    The purpose of jQuery is to make it much easier to use JavaScript on your


    website.

    jQuery takes a lot of common tasks that require many lines of JavaScript code
    to accomplish, and wraps them into methods that you can call with a single line
    of code.

    jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX
    calls and DOM manipulation.
    The jQuery library contains the following features:
    • HTML/DOM manipulation
    • CSS manipulation
    • HTML event methods
    • Effects and animations
    • AJAX
    • Utilities
    Jquery Syntax
    Jquery Selectors
    Jquery selectors
    Basic
     Pure java script selectors
    $(“*”)
    $(“tag”)
    getElementById()
    $
    JQuery- $()
    (“*.class”)
    $(“#id”)
    Jquery Selectors
    Jquery Selectors
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'example.com/data', true);

    xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
    document.getElementById('result').innerHTML = xhr.responseText; // Update
    element with id 'result'
    } else {
    // Handle errors
    }
    };

    xhr.onerror = function() {
    // Handle errors
    };

    xhr.send();
    $.ajax({
    url: 'example.com/data',
    method: 'GET',
    success: function(response) {
    $('#result').html(response); // Update element with id
    'result'
    },
    error: function(xhr, status, error) {
    // Handle errors
    }
    });
    Jquery Example
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $("p").click(function(){
    $(this).hide();
    });
    });
    </script>
    </head>
    <body>

    <p>If you click on me, I will disappear.</p>


    <p>Click me away!</p>
    <p>Click me too!</p>

    </body>
    </html>
    Jquery Demo
    Jquery

    jQuery provides several methods for AJAX functionality.


    With the jQuery AJAX methods, you can request text, HTML, XML, or JSON
    from a remote server using both HTTP Get and HTTP Post - And you can load
    the external data directly into the selected HTML elements of your web page!
    The load() method loads data from a server and puts the returned data
    into the selected element.
    The $.get() method requests data from the server with an HTTP GET
    request.
    The $.post() method requests data from the server using an HTTP POST
    request.
    Jquery get example
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></
    script>
    <script>
    $(document).ready(function(){
    $("button").click(function(){
    $.get("demo_test.asp", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
    });
    });
    });
    </script>
    </head>
    <body>

    <button>Send an HTTP GET request to a page and get the result back</button>

    </body>
    </html>
    Jquery post example
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $("button").click(function(){
    $.post("demo_test_post.asp",
    {
    name: "Donald Duck",
    city: "Duckburg"
    },
    function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
    });
    });
    });
    </script>
    </head>
    <body>

    <button>Send an HTTP POST request to a page and get the result back</button>

    </body>
    </html>
    REST APIs
    Building Rest API using Dijango
    Lab Program

    Develop a registration page for student enrolment as


    done in Module 2 but without page refresh using AJAX
    Lab Program

    Develop a search application in Django using AJAX that


    displays courses enrolled by a student being searched.

    You might also like