Initiate an Ajax call from a jQueryMobile application

Question

I'm trying to make an Ajax call from a jQuery Mobile application. The call is served properly by the destination server. However, the browser rejects the response.

Firefox says:

x: [object Object], m: error, e: [Exception... "Component returned failure
code: 0x80004005 (NS_ERROR_FAILURE)"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"
location: "JS frame :: file:///path/to/my/page/resources/js/jquery/jquery-1.7.1.min.js
:: <TOP_LEVEL> :: line 4"  data: no]

And Chrome says:

x: [object Object], m: error, e: Error: NETWORK_ERR: XMLHttpRequest Exception 101
Origin null is not allowed by Access-Control-Allow-Origin.

My understanding is this error is linked to a cross domain call issue. I have done all what I have found in jQuery and jQueryMobile documentation with no luck.

My page is

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Main Page</title>

    <link rel="stylesheet" href="./resources/css/jquery/jquery.mobile-1.1.1.min.css" />

    <script src="./resources/js/jquery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    jQuery(document).live("mobileinit", function(){
        jQuery.support.cors = true ;
        jQuery.mobile.allowCrossDomainPages = true ;
    });
    </script>
    <script src="./resources/js/jquery/jquery.mobile-1.1.1.min.js"></script>

    <script type="text/javascript">
    function send() {
        // the request
        jQuery.ajax({
            async:          false,
            contentType:    "application/x-www-form-urlencoded; charset=UTF-8",
            crossDomain:    true,
            data:           {data: "abcd"} ,
            dataType:       "text", 
            error:          function(x, m, e) {
                alert("x: " + x + ", m: " + m + ", e: " + e);
            },
            processData:    true,
            success:        function(data){
                alert("Received: " + data);
            },
            type:           "GET",
            url:            "http://my/servlet/url"
        });
    }
    </script>
</head>

<body>
    <div id="page1" data-role="page">
        <div data-role="header" data-position="fixed">
            <h1>Login</h1>
        </div>

        <div data-role="content">
            <a id="btn1" data-role="button" onclick="send();" >Go!!!</a>
        </div>
    </div>
</body>
</html>

@xiaohao, I didn't get you idea. Can you please provide more details? In the meantime, please pay attention that the page "Main Page" is being loaded from the file system while the servlet is reachable on a server. — Younes, Sep 26 '12 at 01:10
you can read http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin, and maybe the solution is there — xiaohao, Sep 26 '12 at 02:27
Issue solved by asking the server to append the header 'Access-Control-Allow-Origin: *' in the response. — Younes, Sep 26 '12 at 09:05

score 0 · Accepted Answer · answered Mar 07 '14 at 07:00

I have solved the issue by asking the server to append the header 'Access-Control-Allow-Origin: *' to the response. For people using Java EE, the solution is to add this line of code:

response.addHeader("Access-Control-Allow-Origin", "*");

where response is an instance of HttpServletResponse.

Initiate an Ajax call from a jQueryMobile application

1 Answers1