Ajax Call Updated

Ajax is when:
A web browser event causes a JavaScript program to make a call to the server.
The server returns a response, and the JavaScript program handle the response, for example, by posting the response onto the browser.

In my Web 2.0 course, I updated the Ajax call because a student, Charles Phillips, in Washington, DC, USA, pointed that I need to handle Microsoft's newest browser, I.E.7. Thank you Charles.

Following is a description of Ajax demonstration code, a JavaScript program, an HTML file, and a server side JSP.
Click here, to download the complete files. If you are using NetBeans, unzip the file, and open and run in NetBeans 5.5 or higher.

Below is the updated JavaScript Ajax call.

var http = createRequestObject();
function createRequestObject() {
    var theRequestObject;
    if (window.XMLHttpRequest) { // Firefox, others...
        theRequestObject = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
        try {
            theRequestObject = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                theRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
    if (!theRequestObject) {
        alert('Error: the Request Object is not created.');
        return false;
    }
    return theRequestObject;
}

Below is the JavaScript code which uses the above Ajax object, http.
1. A URL is set in the object, http, using http.open.
2. The function processResponse() is set in the object, http, to process the response from the server, using http.onreadystatechange.
3. An http call is made to the server by the Ajax object, http, using http.send.

The function processResponse() is called when there is a state change in the Ajax call. The first state handled, (http.readyState == 1), is the state where the web browser is waiting for a response from the server. When there is a response, http.readyState == 4, this code handles the HTTP responses 404, 500, and 200, which are the most common responses.

function validateUserId() {
    document.getElementById('msgCall-1').innerHTML = 
       'Called: validateUserId: ' + document.getElementById('userId').value;
    // sample: http://localhost:8080/AjaxValidate1/validateData.jsp?userId=duke
    http.open('get', 'validateData.jsp?userId='+ document.getElementById('userId').value);
    http.onreadystatechange = processResponse;
    http.send(null);
}
function processResponse() {
    var count = 0;
    if(http.readyState == 1) {
        document.getElementById('msgCall-2').innerHTML = 'Waiting for response...';
    }
    if(http.readyState == 4) {
        if (http.status == 404) {
            document.getElementById('msgCall-2').innerHTML = 
                 '\*\*\* Error, URL:' + http.statusText + ' \*\*\*';
        }
        else if (http.status == 500) {
            document.getElementById('msgCall-2').innerHTML = 
                 '\*\*\* Error 500, statusText:' + http.statusText + ' \*\*\*';
        }
        else if (http.status == 200) {
            document.getElementById('msgCall-2').innerHTML = 
                 'Ajax response: '+http.responseText;
        }
    }
}

Below is the HTML code. The event to trigger the Ajax call, is the button Make Ajax Call.

<html>
    <head>
        <title>Ajax:Validate</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src=ajaxCall.js></script>
    </head>
    <body>
        <h1>Ajax call to Validate a User ID</h1>
        User ID: <input type="text" id="userId" value="Duke">
        <br><button onclick="Javascript:showUserId();">
                 Show User ID</button>
        <br><button onclick="Javascript:validateUserId();">
                 Make Ajax Call</button>
        <p>
        <div id=msgCall-1 style="font-size: 25px;">Debug message 1.</div>
        <div id=msgCall-2 style="font-size: 25px;">Debug message 2.</div>
    </body>
</html>

Below is the JSP code to handle the Ajax call.

<%
    ServletContext app = getServletContext();
    RequestDispatcher disp;
    if ( (request.getParameter("userId")==null || 
          request.getParameter("userId")=="" ) )
    {
        out.print("invalid: Requires userid." );
        return;
    }
    if ( request.getParameter("userId").compareTo("Duke")==0 )
    {
        out.print("Invalid" );
        return;
    }
    out.print("valid" );
%>
Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
About

Tech event, training, business, in east and south Asia.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today