Question

Im trying to make a webapplication which gets an image and stores it to my device.
Then it needs to use the picture as an link to another page.

i receive a success if i try it on my local machine (the webservice). but when i put i to my domain (same code+tested with advanced rest client) then it fails.

I tried making an appcache file, and under NETWORK write * or my domain name:

Here is my code for the httprequest (javascript):

var startUrl = "http://localhost:8080";

function getStuff(theUrl){
    startUrl = "http://mobilitycms.lector.dk:9090";
    alert(startUrl+theUrl);
    $(document).ready(function() {
        $.ajax({
            url: startUrl+theUrl,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                alert('success');
                createMainMenu(data);

                alert('new cursor created:' + cursor);
            /* $.each(data.list, function(i, object) {
                    alert(i+"="+object);
                    var array = new Array();
                    for (property in object) {
                        var value = object[property];
                        alert(property + "=" + value); 
                    }
                });*/
            },
            error: function() {
                alert('boo!');
            },
            beforeSend: setHeader
        });
    });
}

function setHeader(xhr) {
    xhr.setRequestHeader('app', '1');
}

html

    <div data-role="header">
            <a href="#" data-rel="back" data-role="button" ><img align="middle"src="images/back.png" alt="beskeder" vspace="2"/></a> 
            <h1><img onclick="getStuff('/product/5')" align="middle"src="images/main_header.png" alt="beskeder" vspace="2"/></h1>
    </div><!-- /header -->

    <div data-role="content" id="firstPageContent"> 
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#second">second</a></p>
        <a href="#second" id="mapLink" name="mapLink"><img id="mapLinkImage" alt="a map which links to the mapPage" src="images/beskeder.png"/></a>
        <Button id="loadButton" onClick="load()"/>

    </div><!-- /content -->

</div><!-- /page -->

Why does it fail?

Ps. If anyone have some good guides/Patterns about this kind of “webapp” then it’s most welcomed as well, since im new to this js/webapp development.

My current RAW(Advanced Rest Client) Response:

{"data":null,"server":null,"list":[{"name":"Herre Briller","parent":-1,"id":1,"fileName":"men","childrenType":"GROUPS","sortOrder":0,"picture":"/content/picture/products/men","grCount":3,"prCount":0},{"name":"Dame Briller","parent":-1,"id":2,"fileName":"women","childrenType":"GROUPS","sortOrder":1,"picture":"/content/picture/products/women","grCount":3,"prCount":0},{"name":"Børne briller","parent":-1,"id":3,"fileName":"children","childrenType":"GROUPS","sortOrder":2,"picture":"/content/picture/products/children","grCount":1,"prCount":0}],"expires":7200000}

Answer 1

If you want to do cross domain requests you will need to use JSONP. Alternatively have a look at CORS

You can also proxy the request through your server if all else fails…

For JSONP and CORS you would need to be in control of the remote server that you fetching the data from as you would need to change the response format for JSONP or the white list of allowed domains in the case of CORS.

JSONP essentially passes an extra parameter to the server typically called “callback” so that the server can wrap the JSON response in this callback function.

e.g

Request: http://somedomain.com/get/user/data/?id=13&callback=someFunction

Response: someFunction({name:joe, lastname: soap});

If you are using jQuery you don’t tell it the name of the callback function that you want to use it will dynamically create a callback function all you need to do is let the $.ajax request know that you want to make the request using JSONP and it will handle the rest quite transparently. Even simpler than using $.ajax (but less configurable) $.getJSON:

Here is an example request:

$.getJSON(baseUrl+'categories?callback=?',{uid:uuid,lat:lat,lng:lng}, function(data){
//do something
});

This request will want to make a normal JSON request but since you have included a callback= in your url it automatically converts it into a JSOP request.

If you have no access to the remote server then I would say you need to proxy your requests through your sever. How to set this up will depend on what web server you are using. If you are using Apache you can look at mod_proxy.

Hope this helps.

😀