Glassfish 3.1.1中的Java EE Web应用程序异步登录

Question

I'm trying to implement asynchronous login to JEE6 webapp using javascript and XMLHttpRequest. I should be able to make an asynchronous call with XMLHttpRequest to /app/j_security_check and parse the response somehow so that I can show the user a dialog with "Login Failed" or "Login success". I am using Glassfish 3.1.1.

Something I tried, but response is always null. I have a login.jsp that holds the login form and the following script:

function submitLogin(formName) {
    var urlAction = "/app/j_security_check";
    var client;
    var dataString;
    if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari
        client = new XMLHttpRequest();
    } else { // IE6, IE5
        client = new ActiveXObject("Microsoft.XMLHTTP");
    }

    client.onreadystatechange = function() {
        var response = client.responseText; // this is always null

                    /* ALERT THE DIALOG HERE ACCORDING TO RESPONSE? */
    };

    var form = document.forms[formName];
    var username = form.elements["j_username"].value;
    var password = form.elements["j_password"].value;
    dataString = "j_username=" + username + "&j_password=" + password;
    client.open("POST", urlAction, true);
    client.setRequestHeader("Content-type",
            "application/x-www-form-urlencoded");
    client.send(dataString);
}

So my question is, is this possible and how should implement it?

Edit: The problem here seems to arise from the redirect Java Security is enforcing after succesful/failed login. It seems to always redirect the page, no matter what I do with javascript. I also tried jQuery's ajax methods with no avail.

Answer 1

I do something similar maybe this will help you :

        //Get a XMLHttpRequest object. 
        //The XMLHttpRequest specification defines an API that provides 
        //scripted client functionality for transferring data between a client and a server. 
        function getXMLObject()  //XML OBJECT
        {
           var xmlHttp = false;
           try {
             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
           }
           catch (e) {
             try {
               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
             }
             catch (e2) {
               xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
             }
           }
           if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
             xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
           }
           return xmlHttp;  // Mandatory Statement returning the ajax object created
        }

        var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax obj

        /*
         * Use this method to send data to server using ajax.
         * Sent attribute name is : attribute
         * Sent attribute value is : attribute:val
         */
        function ajaxFunction(attribute,val, url) {
          if(xmlhttp) {
            var param = attribute+"="+attribute+":"+val;
            param +="&tiers_payant="+document.getElementsByName("tiers_payant")[0].value;  //Add the value to send here
            xmlhttp.open("POST",url,true);
            xmlhttp.onreadystatechange  = handleServerResponse;
            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xmlhttp.send(param);
          }
        }

        /**
         * When client received response from server,
         * set the inner HTML of the page with the one returned by server.
         */
        function handleServerResponse() {
           if (xmlhttp.readyState == 4) {
             if(xmlhttp.status == 200) {
                // DO what you want with : xmlhttp.responseText;

             }
             else {
                 document.getElementById("erreur").innerHTML="Le serveur le répond pas.";
                //alert("Error during AJAX call. Please try again"+xmlhttp.status);
             }
           }
        }