AJAX jQuery Tutorial - An Introduction

Discussion in 'JavaScript and AJAX' started by pradeep, Dec 12, 2011.

  1. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,645
    Likes Received:
    87
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    http://blog.pradeep.net.in
    jQuery is a client-side JavaScript library, the goal of the library is to simply the process of writing cross-browser JavaScript code. jQuery was created by John Resig and it was released to the public in 2006, jQuery is free, open-source and is dual-licensed under the MIT license & GNU GPL Version 2.

    jQuery's syntax is designed such that it enables developers to navigate DOM element with ease, assign & handle events easily without writing JavaScript code into HTML, like the onClick attribute. The Ajax functions provided by jQuery makes cross-browser Ajax applications very easy to write & takes off the headache to maintain compatibility with each and every browser. Below we'll look at a few examples of jQuery vs native JavaScript approach.

    Getting jQuery



    jQuery is available on jquery.com in two versions, minified & uncompressed, minified version a has very small size, but you may need the uncompressed version to study & understand, or to make some modifications. It is highly recommended that you use the minified version on production environment.

    In addition to the above some internet companies have hosted jQuery on CDNs for public use, here is a list of the most popular ones:

    Google Ajax API CDN (Also supports SSL via HTTPS)
    http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

    Microsoft CDN (Also supports SSL via HTTPS)
    http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js

    jQuery CDN
    http://code.jquery.com/jquery-1.7.1.min.js Minified version
    http://code.jquery.com/jquery-1.7.1.js Source version

    Native AJAX vs jQuery AJAX



    Here, is a simple demo of both native AJAX code & jQuery AJAX code, you'll see how no-brainer it becomes to write it with jQuery.

    Native:
    Code:
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
    
    jQuery:
    Code:
    $.ajax({
        type: "GET",
        url: "ajax_info.txt",
        success: function (resp) {
            $('#myDiv').html(data)
        }
    });
    

    Selector Magic



    The best thing about jQuery are its rich & fast selector engine, let's see a practical example to demonstrate the easy of accessing DOM elements.

    HTML:
    <script type="text/javascript">
    $(document).ready(function () {
        $('#myList > :first-child').css({
            "color": "#ff0000"
        });
        $('#myForm').submit(function () {
            alert($('#myForm input[name="Name"]').val());
        });
    });
    </script>
    <form id="myForm">
    Name: <input type="text" name="Name">
    <input type="submit"></form>
    
    <ul id="myList">
        <li>Hosts
            <ul>
                <li>google.com</li>
                <li>yahoo.com</li>
            </ul>
        </li>
        <li>Games
            <ul>
                <li>NFS</li>
                <li>Angry Birds</li>
            </ul>
        </li>
    </ul>
    

    Event Handling



    Another beauty of jQuery is in event handling, you can bind and unbind to events & objects, see how easy it is with jQuery.

    HTML:
    <script type="text/javascript">
    $(document).ready(function () {
        $('#sbt').click(function () {
            alert('Wow!!');
        });
    
        $('#ubt').click(function () {
            alert('Now bind button will not work!');
            $('#sbt').unbind('click');
        });
    });
    </script>
    <input type="button" id="sbt" value="Bind"> <input type="button" id="ubt" value="Unbind">
    
    There are many more types of events that can be handled this way, please go through the jQuery documentation for an exhaustive list.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice