Quick Contact

    jQuery Ajax

    What is Ajax?

    Asynchronous Javascript And XML is referred to as Ajax. Ajax is only a way for the web browser to receive data from the server without having to reload the entire page.

    In essence, Ajax uses the JavaScript-based XMLHttpRequest object to transmit and receive data asynchronously, in the background, and without interfering with the user’s experience, to and from a web server.

    Nowadays, it’s difficult to find an application that doesn’t employ Ajax in some capacity. Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr, and other popular large-scale Ajax-driven internet services are a few examples.

    Note:
    Ajax is not a recent innovation; in fact, it is not even strictly speaking a technology. The process of transmitting data from a web server through JavaScript asynchronously without refreshing the page is known as Ajax.

    Ajax with jQuery

    Ajax is implemented differently by each browser, so if you want to use the standard JavaScript approach, you will need to create specific code for each browser in order for Ajax to function across all browsers.

    Fortunately, jQuery takes care of those browser variations to make the process of implementing Ajax simpler. It gives straightforward methods to create Ajax that functions flawlessly in all browsers, including load(), $.get(), $.post(), and others.

    jQuery Ajax Load

    jQuery load() Method

    The selected element receives the returned HTML from the server using the jQueryload() method. This technique offers a quick and easy approach to asynchronously load data from a web server. This method’s fundamental syntax can be provided with:

    $(selector).load(URL, data, complete);

    The following definition applies to the parameters of the load() method:

    • The URL of the file you want to load is specified by the necessary URL argument.
    • A series of query strings, or key/value pairs, are specified by the optional data argument and are transmitted with the request to the web server.
    • The callback function that is executed when the request is finished is represented by the optional complete parameter. For each element that is selected, the callback is fired once.

    Let’s use this approach in practice. Create the “test-content.html” HTML file from scratch and save it somewhere on your web server. Now add the subsequent HTML code to this document:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Loading Data from External File using Ajax in jQuery< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#box").load("/examples/html/test-content.html");
        });
    });
    < /script>
    < /head>
    < body>
    < div id="box">
    < h2>Click button to load new content inside DIV box< /h2>
    < /div>
    < button type="button">Load Content< /button>
    < /body>
    < /html>
    

    Create another HTML file called “load-demo.html” and store it in the same folder as the first one. Put the subsequent HTML code inside it now:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Loading Data from External File using Ajax in jQuery< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#box").load("/examples/html/test-content.html");
        });
    });
    < /script>
    < /head>
    < body>
    < div id="box">
    < h2>Click button to load new content inside DIV box< /h2>
    < /div>
    < button type="button">Load Content< /button>
    < /body>
    < /html>
    

    Finally, click the “Load Content” button after opening this page in your browser. You’ll notice that the HTML content from the “test-content.html” file has taken the place of the DIV box’s content.

    Note:

    For security reasons, Ajax requests cannot be sent to external or remote servers; instead, they can only be sent to files that are hosted on the same web server as the page being requested. The term “same-origin policy” describes this.

    The callback function can also take one of three possible inputs:

    • responseTxt —

      if the request is successful, contains the outcome content.

    • statusTxt —

      Contains the request’s status, including any errors or successes.

    • jqXHR —

      Contains the object of XMLHttpRequest.

    Here is an updated version of the earlier example that will inform the user of the request’s status by displaying either a success or an error message.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Showing Ajax Load Request Status in jQuery< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#box").load("/examples/html/test-content.html", function(responseTxt, statusTxt, jqXHR){
    if(statusTxt == "success"){
    alert("New content loaded successfully!");
                }
    if(statusTxt == "error"){
    alert("Error: " + jqXHR.status + " " + jqXHR.statusText);
                }
            });
        });
    });
    < /script>
    < /head>
    < body>
    < div id="box">
    < h2>Click button to load new content inside DIV box< /h2>
    < /div>
    < button type="button">Load Content< /button>
    < /body>
    < /html>
    

    Loading Page Fragments

    We may also fetch a piece of the document using the jQueryload() method. For greater clarity, let’s look at the sample below. To accomplish this, simply append the url parameter with a space and a jQuery selection.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Loading a Portion of External Page using Ajax in jQuery< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#box").load("/examples/html/test-content.html #hint");
        });
    });
    < /script>
    < /head>
    < body>
    < div id="box">
    < h2>Click button to load new content inside DIV box< /h2>
    < /div>
    < button type="button">Load Content< /button>
    < /body>
    < /html>
    

    FAQS

    Q1. Why AJAX is used in jQuery?

    An AJAX (asynchronous HTTP) request is made using the ajax() function. The ajax() method is used by all jQuery AJAX techniques. When the other procedures cannot be employed, this method is typically used.

    Q2. What is difference between AJAX and jQuery AJAX?

    Asynchronous server calls can be made using the web development method known as AJAX. JQuery is a JavaScript library that helps with web design and development. It enables javascript to be used outside of a browser. It functions within the browser as well as outside of it.

    Q3. Is AJAX better than JSON?

    JSON and AJAX vary primarily in that AJAX is a collection of technologies used to send asynchronous HTTP requests to a server using a variety of data formats, including JavaScript, XML, HTML, plain text, and even JSON. JSON is a format that AJAX can utilize to transmit data in.

    Q4. Why AJAX is used in website?

    AJAX enables asynchronous updating of web pages by secretly sharing small amounts of data with the server.Q5. What is replacing AJAX? As a result, it is feasible to alter specific sections of a web page without having to reload the entire page. Traditional web sites that don’t employ AJAX have to reload the entire page if the content changes.

    Q5. What is replacing AJAX?

    The Fetch API is a more recent and practical method of making Ajax calls. Many frameworks already have AJAX code snippets wrapped up in them. AxiosJs would be one illustration. Functions found in JavaScript frameworks and the official Fetch API Standard are gradually displacing Ajax.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.