CODEWITHSUNDEEP
javascriptjqueryajax
sdf asdfad
sdf asdfad

Reputation: 21

difference from using ajax from jquery and javascript

i cant find an answer to this

i have been learning ajax lately but i learned how to do it all in javascript now i go swiming around ajax question here and almost all are using jquery

so i end up confused. should i use normal javascript or do it through jquery?

so what are the differences?

this is my normal approach

var xmlHttp = createXmlHttpRequestObject();  //you first create the object to this function global

function createXmlHttpRequestObject() //here you instruct the function
{
    var xmlHttp; //here you tell it to use the local variable not the global version of it because this returns to the global with the propper values

    if (window.XMLHttpRequest) //if the "window" or browser is aware of this Object 90% of browsers
    {
        xmlHttp = new XMLHttpRequest(); // if true then the variable is now equal to the heart of ajax

    }
    else //for internet explorer
    {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlHttp; //we return it back to daddy the global variable this objects does everything
    //this object is everything in ajax for the most part


}

function process() //function that gets called on load of the body
{
    if(xmlHttp) //if its not void or if you can run ajax
    {
        try //try catch statement are sort of required for the heart of things like ajax and server communication
        {
                xmlHttp.open("GET", "bacon.txt", true); //here 1st type of call 2nd from where 3rd 
                //is it true assyscronly or at the same time
                //it does not start the connection to the server, its only sets up settings for the connection

                xmlHttp.onreadystatechange = handleServerResponse; //anytime something changes[propertie]
                //i want to call that function handleserverresponse

                //begin communication
                xmlHttp.send(null); //this is what communicates to the server makesure on ready statechane before this
                //if the server responds you want to make sure everything is taking care of like what function onready state change is it going to call
                //or what to do like open a text file in this case
        } catch(e)
        {
            alert( e.toString() ); //alert the error message as a string on a popup
        }
    }   
}

//handling the server response


function handleServerResponse()
{
    theD = document.getElementById('theD'); //get the div in a var
    if(xmlHttp.readyState==1) //if the connection to the server is established
    { //google crhome may not show this one, some browsers ignore some states
        theD.innerHTML += "Status 1: server connection established<br>";
    }
    else if(xmlHttp.readyState==2) //request received, hey client i am the server and i received your request
    {
        theD.innerHTML += "Status 2: request reveived <br>";
    }
    else if(xmlHttp.readyState==3) //while is doing its thing
    {
        theD.innerHTML += "Status 3: processing request <br>";
    }
    else if(xmlHttp.readyState==4) //your request is finished and ready
    { //it means your response is ready but doesnt guaranteed no trouble

        if(xmlHttp.status==200) //if the status is 200 then is succesufll
        {
            //IF everthing finally good THE GOOD PART
            try //put all your calls on a try statement REMEMBER
            {
                //get the txt file as a string
                text = xmlHttp.responseText; //response text n a normal string
                theD.innerHTML += "Status 4: request is finished and response is finished";
                theD.innerHTML += text;
            }catch (e)
            {
                alert( e.toString() );
            }


        } else //for the other statuses like 404 else somehting went wrong
        {
            alert( xmlHttp.statusText ); //this will give you a status report on the wrong
        }
    }

}

Upvotes: 0

Views: 96

Answers (3)

Daryl
Daryl

Reputation: 195

Using jQuery is just for ease of use. If you prefer doing it the javascript way then carry on doing that.

jQuery ajax calls do exactly the same as what you are doing but jQuery is a javascript framework which simplifies what you write.

Upvotes: 1

Ron
Ron

Reputation: 514

jQuery is a javascript framework which contains library of simplified functions compared to the Native Javascript. One of the functions is the XMLHttpRequest.

This way we just need to implement functions that is needed to implement without needed to write the traditional codes to setup the AJAX system to work

You may learn more about jQuery ajax here:

http://api.jquery.com/jQuery.ajax/

Upvotes: 0

John Koerner
John Koerner

Reputation: 38087

jQuery simply wraps all of the XmlHttpRequest calls into a simple to use library. In the guts of jQuery you will see code that creates the XmlHttpRequest objects.

You can see the code that does this here:

https://github.com/jquery/jquery/blob/master/src/ajax/xhr.js

The nice thing about using a framework like jQuery is that they handle a lot of the browser idiosyncrasies for you. They also handle a lot of the edge cases you might not think about when writing your code.

Upvotes: 2

Related Questions