• JQuery and AJAX

    JQuery and AJAX

    Introduction:

    With the jQuery and 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.

    AJAX (Asynchronous JavaScript and XML) is the art of exchanging data with a serve, and updating parts of a web page without reloading the whole page.

    jQuery – AJAX load() Method

    The jQuery load() method is simple, but powerful AJAX method. The load() method loads data from a server and puts the returned data into the selected element.

    Syntax:

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

    URL The required URL parameter specifies the URL you wish to load.
    data Parameter specifies a set of querystring key/value pairs to send along with the request.
    callback Parameter is the name of a function to be executed after the load() completes. 

    The callback function can have different parameters:

    ·       reponseTxt – contains the resulting content if the call succeed.

    ·       statusTXT – contains the status of the call.

    ·       xhr – contains the XMLHttpRequest object

     

    Example:

    jQuery AJAX load() Method Example

    jQuery AJAX load() Method Example

    jQuery AJAX load() Method Program Code

    Here is the content of our example file: “demo.html”.

    <h2>Wel-come to www.4gl-tutorials.com!</h2><p>

    With the jQuery and AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post.

    </p>

    The following code displays an alert box after the load() method completes. If the load() method has succeed, it displays “External Content Loaded Successfully!”, and if it fails it displays an error message.

    <script src=”js/jquery-1.11.3.min.js” type=”text/javascript”></script><script>

    $(document).ready(function(){

    $(“form”).submit(function(event){

    event.preventDefault();

    //Here “demo.html” file has called to load into “div1”.

    $(“#div1”).load(“demo.html”,function(responseTxt,statusTxt,xhr){

    if(statusTxt==”success”)

    alert(“External content loaded successfully!”);

    if(statusTxt==”error”)

    alert(“Error: “+xhr.status+”: “+xhr.statusText);

    });

    });

    });

    </script>

    Appreciate my work :Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on StumbleUponShare on TumblrDigg thisShare on YummlyShare on VKFlattr the authorBuffer this page

Leave a Reply

Your email address will not be published. Required fields are marked *