Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   AJAX jQuery Tutorial - An Introduction (http://www.go4expert.com/articles/ajax-jquery-tutorial-introduction-t27338/)

pradeep 12Dec2011 18:32

AJAX jQuery Tutorial - An Introduction
 
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.min.js

Microsoft CDN (Also supports SSL via HTTPS)
http://ajax.aspnetcdn.com/ajax/jQuer...y-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: JavaScript

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: JavaScript

$.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.

Code: 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.

Code: 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.


All times are GMT +5.5. The time now is 02:22.