HTML5 request response webservice

Question

I am pretty new to html5 web development

I have created a page with login and password on it and have a submit button. On submit , I send a rest request to the server which has a url

THE RRQUEST IS SOMETHING LIKE THIS

<USERNAME>
abc
</USERNAME>
<PASSWORD>loooik
</PASSWORD>

which is in js file as var data...

This request is set as

var parameters=JSON.stringify(data);

I use the following code for establishing connection

xmlHttp.open("post",url,true);
XmlHttp.setRequestHeader("Content-type","application/json);
xmlHttp.send(parameters);
xmlHttp.onreadystatechange=function X()
{
if(xmlHttp.readyState==4)
{
alert(xmlHttp.responseText);
}
}
return true;
}

I need to add a loading element and want to display the next screen between request and the response. How can I achieve it?

In tag I have used submit input type where onClick attribute calls return sendPost() method which has the request to be called

How should I proceed for the same... having loading screen and getting the response ... suppose just the name to be displayed on next html screen

Answer 1

First of all see basic jQuery example. This will guide you through how jQuery works and help a lot in the solution I'm going to suggest.

http://learn.jquery.com/about-jquery/how-jquery-works/

jQuery has it's own AJAX method and further shorthand called $.post

Now you can write something like this -

function requestNetwork() {
    // Code for loading screen
    $.ajax({
        url: "yourURL",
        data: "yourData"
    }).done(function(data) {
        alert(xmlHttp.responseText);
        // Code for dismissing loading screen
    }).fail(function(data) {
        // Code when call fails
    }).always(function() {
        // This code will always run
    });
}