2

画像を取得してデバイスに保存するWebアプリケーションを作成しようとしています。次に、画像を別のページへのリンクとして使用する必要があります。

ローカルマシン（Webサービス）で試してみると成功します。しかし、私を自分のドメインに配置すると（同じコード+高度なRESTクライアントでテスト済み）、失敗します。

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（Advanced Rest Client）の応答：

{"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ファイルを使用している場合は、ネットワークセクションにajaxgetのドメインを明示的に指定してください。そこにあるHTML5ブラウザで実装が異なるかどうかはわかりませんが、私の場合、外部ドメインへのリクエストを許可するために明示的なブラックリストが必要でした。

さらに注目すべきは、ドメインに明示されていない「キャッシュ」のリクエストが失敗し、chromedeveloeprツール/ネットワークで「保留中」の状態が表示されたことです。Ajaxはサイレントに失敗し、私の場合、jQueryはエラーハンドラーをトリガーしませんでした。

于 2012-07-27T16:03:49.877 に答える