Schwierigkeit, die Bereitstellung von AJAX-requests in einer cordova/Ratsche mobile Anwendung

Ich hatte Schwierigkeiten, meine AJAX-request in meine cordova-Projekt, um korrekt zu arbeiten.

$.ajax({
    url: "https://mydevserver/REST.php?method=mobileGetData",
    success: function(result){
        alert("successful ajax");
    },
    error: function(xhr, ajaxOptions, thrownError){
        alert("error");
        alert("xhr.status");
        alert(thrownError);
    }
});

Den status-code printed in the alert mit diesem code 0 mit einer leeren Fehlermeldung. Ich dachte, dass das seltsam war und habe einige der Forschung zeigt, dass die Antwort wurde Einschränkungen auf Cross-Site-Scripting-die könnte gelöst werden, mit CORS. Ich habe versucht, die erste Antwort hier und platziert die folgenden in meinem head tag.

<script src="js/jquery-2.1.1.min.js"></script>
<script>
    $(document).bind("mobileinit", function(){
        $.support.cors = true;
        $.mobile.allowCrossDomainPages = true;
    });
</script>
<script type="text/javascript" src="cordova.js"></script>

Aber dies hatte keine Auswirkungen auf die Ergebnisse der code ausgeführt wird. Weiter unten im gleichen Antwort es wird empfohlen, hinzufügen cache: false dem ajax-Optionen sowie async: false und so fügte ich diese zu meinem code. Das Ergebnis war, dass statt einer status-code 0 an, ich bekam den status code 404 für meine Anfrage. An dieser Stelle habe ich überprüft, dass ich noch nicht mispelled die URL irgendwie und versucht, die änderung der URL zu example.com gab ein status-code 404.

Danach habe ich versucht, die Antwort der Dritte Vorschlag, das war einfach javascript das XMLHttpRequest-Objekt.

var req = new XMLHttpRequest();
req.open("POST", "https://mydevserver/REST.php?method=mobileGetData", true);

req.onreadystatechange = function() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            alert("successful ajax");
        }else{
            alert("Error: " + req.status);
        }
    }
};
req.send(null);

Dieser Ansatz auch ergab sich ein status-code von 0. Schließlich sind einige mehr Forschung ergab, dass die Antwort vielleicht JSONP, einen workaround für das Cross-Site-Scripting Einschränkungen eingebaut in Browser. Gemäß seinem tutorial, ich habe meinen REST-Funktion und den AJAX-Aufruf in meiner Handy-app.

REST.php

if($_GET['method'] == "mobileGetData"){
    $output = array(array("Name" => "Jesse", "NumEntries" => "1")); //the end result of my actual code. I can't really put in the actual SQL queries and whatnot for security reasons
    $output = $_GET['jsonp_callback'] . "(" . json_encode($output) . ");";
    echo $output
}

AJAX

$.ajax({
    dataType: 'jsonp',
    data: 'method=mobileGetData',
    jsonp: 'jsonp_callback',
    url: "https://mydevserver/REST.php",
    success: function(result){
        alert("successful ajax");
    },
    error: function(xhr, ajaxOptions, thrownError){
        alert("error");
        alert(xhr.status);
        alert(thrownError);
    }
});

Leider ist dieser Versuch hat nicht funktioniert entweder, woraus sich ein status-code von 0 (obwohl dieser Versuch hatte einen Fehler mit der Meldung "Fehler", wo jeder andere versucht hatte, eine leere Fehlermeldung). Ich bin mir nicht sicher, was anderes zu versuchen, oder ob vielleicht schraubte ich eine der anderen Methoden, die ich versuchte. Kann mir jemand sagen, wo ich vielleicht schief gegangen? Für die Zusammenfassung und Kontext hier ist der komplette head tag-Inhalte derzeit:

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />

    <!-- Set the viewport settings to prevent scaling -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title>RealtyShout: Subscriptions</title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" href="css/ratchet.css">
    <meta name="msapplication-tap-highlight" content="no" />
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(document).bind("mobileinit", function(){
            $.support.cors = true;
            $.mobile.allowCrossDomainPages = true;
        });
    </script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script src="js/ratchet.js"></script>
    <script type="text/javascript">
        app.initialize();
        $(function(){
            alert("https://mydevserver/REST.php?method=mobileGetData"));
            $.ajax({
                dataType: 'jsonp',
                data: 'method=mobileGetSubscriptionsByNotifier',
                jsonp: 'jsonp_callback',
                url: "https://mydevserver/REST.php",
                success: function(result){
                    alert("successful request");
                },
                error: function(xhr, ajaxOptions, thrownError){
                    alert("error");
                    alert(xhr.status);
                    alert(thrownError);
                }
            });
        });
    </script>
    <style>
        /*Stops the text from being in all caps*/
        body * {
            text-transform: none;    
        }
    </style>
</head>

Zum kompilieren meines Codes bin ich mit dem cordova-CLI wie folgt:

cordova build ios
cordova emulate iOS

EDIT: Wie pro @frank ' s Vorschlag, ich habe meinen URL ip.jsontest.com um zu sehen, ob es wirklich mein dev-server und habe wieder den status-code 0 wieder. Doch dann habe ich versucht http://ip.jsontest.com und bekam den status-code 200 mit einem Fehlercode Error: jQuery 21107076784837990999_1409318004872 was not called. Meine Forschung zeigt, dass dies wird verursacht, wenn der server nicht so konfiguriert, bauen JSONP Antworten.

Wie testen Sie Ihre cordova-APP? Sie testen mit dem emulator oder tatsächlichen Gerät?. Das Problem könnte im Zusammenhang mit Netzwerk-Einstellungen. Ihre https://mydevserver möglicherweise nicht sichtbar auf der App in Bezug auf die Prüfung Methode, die Sie verwenden. Können Sie öffnen Sie eine Mobile - browser, in das eigentliche Gerät/emulator und machen Sie eine Anfrage https://mydevserver/REST.php?method=mobileGetData? Hat es wieder alle Daten?
Ich bin mit cordova emulate ios was ich denke, verwendet ein Dienstprogramm namens ios-sim obwohl ich bin nicht ganz positiv auf, dass man. Wenn ich mich im browser in der virtuellen iPhone kann ich eine gute Antwort von REST.php ohne Probleme.
Können Sie überprüfen, dass '<access origin="*" />' ist auf * im config.xml Datei. Auch ich habe bemerkt, dass Sie mit https eine sichere Verbindung. Haben Sie versucht, es mit http nur???. Über here Leute diskutiert haben Probleme mit https
Der tag in config.xml ist richtig. Wenn ich wechseln Sie zu http, dann das gleiche passiert, es dauert nur eine minute oder so, die Fehlermeldung ausgedruckt. Ich denke, es ist, weil unser server ist so konfiguriert timeout Anfragen, die nicht sicher aus Gründen der Sicherheit. Angeschaut auf dem link, den Sie gab @frank ich bin mir ziemlich sicher, das Problem ist, dass unsere cert ist nicht korrekt für den dev-server. Ich werde überprüfen Sie mit unserem admin auf, dass zu wissen, für sicher, obwohl.
Sie könnten versuchen, eine öffentliche JSON-api zum testen Ihres Codes. Das würde bestätigen, dass das Problem mit dem DEV-server und nicht den code. Hier ist ein link, um eine öffentliche JSON-service.
immer noch ein status-code 0 von jsontest.
Hinzugefügt einige weitere Informationen zu OP, ip.jsontest.com gibt eine code-200 mit einer Fehlermeldung.
Haben Sie angegeben dataType: 'json'. Was ist die Fehlermeldung? Beachten Sie, dass im Fehler Fall, parameter 2 und 3 enthalten Informationen über den Fehler.
beziehen Sie sich auf die thrownError parameter in der error-Funktion? beim drucken mit Indizes von thrownError Erträge undefined
error: function(xhr, status, thrownError) {console.log(xhr.responseText)}. ich denke auch, thrownError ist vom Typ String. Sie können direkt drucken. Sie können drucken, die letzten beiden. e.g console.log(status) und console.log(thrownError);
console.log(status) Erträge 'error' und console.log(xhr.responseText) Erträge undefined.

InformationsquelleAutor Jesse Green | 2014-08-28

1

Vorausgesetzt, Sie bauen Ihr JSON/JSONP-Antwort richtig, die Sie testen konnte, die von einem web-browser und die gleiche JS-code, stellen Sie sicher, dass die Einstellung der korrekten Header in der Antwort (REST.php):
```
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
```
Access-Control-Allow-Origin lassen, die Sie anfordern, Ihre Daten von außerhalb der Ursprungs-server. Das ist glaube ich das problem, das Sie haben. Auch, mit den falschen Antwort-Codierung führen könnte, die Ihre Ajax-Aufruf fehlschlägt.

Wieder, Sie sollten in der Lage sein zu Debuggen Ihren Fehler (wenn überhaupt) in der browser-Konsole, machen gerade den gleichen Anruf, Ihre app versucht zu starten. Überprüfen Sie, ob die Antwort gültig ist.
- Hinzufügen von zwei header-Zeilen zu meinem REST.php script Fehler beim ändern der Ausgabe. Ich habe versucht, läuft gerade die Seite mit dem AJAX-Aufruf in der es in meinem browser und es funktioniert Prima.
InformationsquelleAutor Eduardo Romero

Auf der Suche nach hier ich habe versucht, mit $.getJSON machen, damit es funktioniert und es geschafft, eine gute Antwort zurück.

$.getJSON("http://devserver/REST.php?callback=?", "method=mobileGetData", function(response, status, xhr){
    for(var key in response[0]){
        alert(key + ": " + response[0][key]);
    }
);

InformationsquelleAutor Jesse Green

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.