2

我正在尝试制作一个获取图像并将其存储到我的设备的网络应用程序。然后它需要使用图片作为另一个页面的链接。

如果我在我的本地机器（网络服务）上尝试它，我会成功。但是当我把 i 放到我的域中（相同的代码+使用高级休息客户端测试）时，它失败了。

我尝试制作一个 appcache 文件，并在 NETWORK 下写入 * 或我的域名：

这是我的 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 -->

为什么会失败？

附言。如果有人对这种“webapp”有一些好的指南/模式，那么它也是最受欢迎的，因为我是这个 js/webapp 开发的新手。

我当前的 RAW（高级休息客户端）响应：

{"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}
4

2 回答 2

2

如果你想做跨域请求，你需要使用JSONP。或者看看CORS

如果一切都失败了，您也可以通过您的服务器代理请求......

对于 JSONP 和 CORS，您需要控制从中获取数据的远程服务器，因为您需要更改 JSONP 的响应格式或在 CORS 的情况下允许域的白名单。

JSONP 本质上向服务器传递了一个额外的参数，通常称为“回调”，以便服务器可以将 JSON 响应包装在此回调函数中。

例如

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

回复：someFunction({name:joe, lastname: soap});

如果您使用 jQuery，您不会告诉它您要使用的回调函数的名称，它将动态创建一个回调函数，您需要做的就是让 $.ajax 请求知道您想要使用JSONP，它将非常透明地处理其余部分。甚至比使用 $.ajax（但配置较少）$.getJSON 更简单：

这是一个示例请求：

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

此请求将要发出一个普通的 JSON 请求，但由于您在 url 中包含了一个 callback= ，它会自动将其转换为 JSOP 请求。

如果您无法访问远程服务器，那么我会说您需要通过您的服务器代理您的请求。如何设置取决于您使用的 Web 服务器。如果您使用的是 Apache，您可以查看 mod_proxy。

希望这可以帮助。

:D

于 2012-07-11T09:52:30.453 回答
0

如果您使用的是 appcache 文件，请确保您在 NETWORK 部分明确说明您的 ajax get 的域。我不确定我们那里的 HTML5 浏览器中的实现是否不同，但在我的情况下，需要显式黑名单才能允许我向外部域发出请求。

另外值得注意的是“缓存”的请求，也就是在网络部分中未明确指出域失败并在 chrome develoepr 工具/网络中显示“待处理”状态。Ajax 静默失败，在我的情况下，jQuery 没有触发错误处理程序。

于 2012-07-27T16:03:49.877 回答