将Ajax与JSF命令按钮或表单一起使用

Question

I might not even be tackling this issue correctly, but here is what is going on. I have a few RESTful webservices that I want to call. The code to call them is in JavaScript. It is called like so:

<h:body onload="smaInit();">
    <h:form onsubmit="smaSignUp();">

Whenever the page loads, I make 2 Ajax calls. These calls succeed. I want to make 2 more Ajax calls whenever the form is submitted. However, these calls fail. I do not see any errors from Firebug, so I am stuck as to what is happening.

To elaborate on what I mean when I say they fail, in Netbeans, I have breakpoints for the Rest calls. I hit the breakpoints when the onload event is triggered. I do not however hit the breakpoints when the onsubmit event is triggered.

My only theory right now is that Ajax calls dont work on a page submit. Is this correct? Does the page changing cause the Ajax calls to be killed before they can finish?

Anyway, any insight would be good. Here is the JavaScript that is being called:

function getUrlVars() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) { vars[key] = value; }); return vars; }

function post(req, json, url)
{
    req.open("POST", url, true);
    req.setRequestHeader("Content-Type",
            "application/json");
    req.send(json);
}

function createRequest() {
    var result = null;
    if (window.XMLHttpRequest) {
        // FireFox, Safari, etc.
        result = new XMLHttpRequest();
        if (typeof result.overrideMimeType !== 'undefined') {
            result.overrideMimeType('text/xml'); // Or anything else
        }
    }
    else if (window.ActiveXObject) {
        // MSIE
        result = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else {
        // No known mechanism -- consider aborting the application
    }
    return result;
}

function createClientRecord(ip)
{
    //get users id from url
    var id = getUrlVars()["said"];
    //get time
    var timeStamp = new Date().getTime();
    var url = [location.protocol, '//', location.host, location.pathname].join('');
    var map = {"userId": id, "ip": ip, "timeStamp": timeStamp, "url": url};

    return JSON.stringify(map);
}

function signUp(clientInfo)
{
    var req = createRequest(); // defined above
    // Create the callback:
    req.onreadystatechange = function() {
        if (req.readyState !== 4)
            return; // Not there yet
        if (req.status !== 200) {
            // Handle request failure here...
            return;
        }
        // Request successful, read the response
        var resp = req.responseText;
        // ... and use it as needed by your app.

    };

    var url = '/ui/webresources/signup';
    post(req, clientInfo, url);
}

function mark(clientInfo)
{
    var req = createRequest(); // defined above
    // Create the callback:
    req.onreadystatechange = function() {
        if (req.readyState !== 4)
            return; // Not there yet
        if (req.status !== 200) {
            // Handle request failure here...
            return;
        }
        // Request successful, read the response
        var resp = req.responseText;
        // ... and use it as needed by your app.

    };

    var url = '/ui/webresources/mark';
    post(req, clientInfo, url);
}


function smaInitGetIp()
{
    var req = createRequest(); // defined above
    // Create the callback:
    req.onreadystatechange = function() {
        if (req.readyState !== 4) {
            return; // Not there yet
        }
        if (req.status !== 200) {
            // Handle request failure here...
            return;
        }
        // Request successful, read the response
        var resp = req.responseText;
        // ... and use it as needed by your app.
        var clientInfo = createClientRecord(resp);
        mark(clientInfo);
    };

    var url = '/ui/webresources/ip';
    req.open("GET", url, true);
    req.send();
}

function smaSignUpGetIp()
{
    var req = createRequest(); // defined above
    // Create the callback:
    req.onreadystatechange = function() {
        if (req.readyState !== 4) {
            return; // Not there yet
        }
        if (req.status !== 200) {
            // Handle request failure here...
            return;
        }
        // Request successful, read the response
        var resp = req.responseText;
        // ... and use it as needed by your app.
        var clientInfo = createClientRecord(resp);
        signUp(clientInfo);
    };

    var url = '/ui/webresources/ip';
    req.open("GET", url, true);
    req.send();
}

function smaInit()
{
    var temp = getUrlVars()["said"];
    if (temp === null || temp === 'undefined')
    {
        //a social advertiser did not send them here
        return;
    }
    smaInitGetIp();
}


function smaSignUp()
{
    //get the id, if id isnt present, send null
    var temp = getUrlVars()["said"];
    if (temp === null || temp === 'undefined')
    {
        temp = null;
    }
    smaSignUpGetIp();
}

Answer 1

You need to stop the default event to be fired (in our case the submit event) with return false; in the onsubmit method.

With this you are preventing synchronous postback to occurring.

function smaSignUp() {
    //get the id, if id isnt present, send null
    var temp = getUrlVars()["said"];
    if (temp === null || temp === 'undefined')
    {
        temp = null;
    }
    smaSignUpGetIp();
    //to prevent the default event to be fired
    return false;
}