My First Ajax Application
 

 

Well, I thought of writing this post long back but didn’t get mood. Here we go.

 

This article discusses my first (or may be second) Ajax application (very little), which can be useful for those who haven't created their first Ajax application.

 

Before I start, let me mention that I will keep it as short as possible so that it should contain just Ajax.

 

This application has 3 JSPs: main.jsp, first.jsp and second.jsp. main.jsp displays two buttons to user: 'Send First Request' and 'Send Second Request'. ‘Send First Request’ sends first Ajax request that is handled by first.jsp. This first.jsp responds after 5 seconds for this request but still browser is not hanged/unavailable, user can still perform some other action during this period or to be more specific can click on 'Send Second Request'. This is one of the advantages of Ajax: Browser can send the request and let the user work on rest of the page at the same time.

 

Here is the code, copy and try to play with the buttons:

 

main.jsp:

--------

 

 

<html>

 

<head>

            <script>

                        function createRequest() {

                                    var request = null;

                                    try {

                                                request = new XMLHttpRequest();

                                                return request;

                                    } catch(trymicrosoft) {

                                                try {

                                                            request = new ActiveXObject("Msxml12.XMLHTTP");                                  

                                                            return request;

                                                } catch(othermicrosoft) {

                                                            try {

                                                                        request = new ActiveXObject("Microsoft.XMLHTTP");

                                                                        return request;

                                                            } catch(failed) {

                                                                        alert("can't create");

                                                            }

                                                }

                                    }

                        }

 

                        var firstRequest = null;

                        var secondRequest = null;

 

                        function sendFirstRequest() {

                                    firstRequest = createRequest();

                                    var url = "first.jsp";

                                   

                                    firstRequest.open("GET", url, true);

                                    firstRequest.onreadystatechange = doFirst;

                                    firstRequest.send(null);

 

                                    //alert(firstRequest);

                        }

                        function sendSecondRequest() {

                                    secondRequest = createRequest();

                                    var url = "second.jsp";

                                   

                                    secondRequest.open("GET", url, true);

                                    secondRequest.onreadystatechange = doSecond;

                                    secondRequest.send(null);

 

                                    //alert(secondRequest);

                        }

 

                        function doFirst() {

                                    if(firstRequest.readyState == 4) {

                                                var response = firstRequest.responseText;

                                                alert("get first response --> " + response);

                                    }

                        }

 

                        function doSecond() {

                                    if(secondRequest.readyState == 4) {

                                                var response = secondRequest.responseText;

                                                alert("get second response --> " + response);

                                    }

                        }

 

            </script>

</head>

 

<body>

            <input type="button" value="Send First Request" onClick="sendFirstRequest()"/>

            <input type="button" value="Send Second Request" onClick="sendSecondRequest()"/>

</body>

 

</html>

 

first.jsp:

-------

 

<%

Thread.sleep(5000);

out.println("first response");

%>

 

 

second.jsp:

----------

 

<%

out.println("second response");

%>

 

I hope it should work for you. The code is pretty simple but still I will try to manage to explain it in some other post.