JavaScript Internet Explorer 10 und XMLHttpRequest

[Zephyro]

Hallo CB'ler,

ich hänge gerade an einem Problem mit AJAX. Ich habe das Problem nur im Internet Explorer(10). Mit dem unten stehenden Code möchte ich nur testen, ob die Kommunikation zwischen Client u. Server funktioniert.
Beim bisherigen googlen habe ich leider keine funktionierende Lösung, speziell für IE10, gefunden.

Für alle IE versionen <IE9, ist es für mich nicht wichtig, ob es funktioniert. In den neueren allerdings schon.

Hier mein Code in abgespeckter Form:

var xhr = new XMLHttpRequest();
xhr.open("POST", "myPhpFile.php");
xhr.onreadystatechange = function()
{
    if (xhr.readyState == 4)
    { 
        alert("Response: " + xhr.responseText);
    } 
};
xhr.send();

Im IE10 erhalte ich keine Antwort, obwohl er XMLHttpRequest unterstützt.
Weiß jemand eine Lösung für dieses Problem?

Danke im Voraus!

MfG Zephyro

 

[Speedy.]

Oftmals kann es sein, das die Sicherheitseinstellungen des Internet Explorer Cross-Site-Scripting verhindern. Um dies herauszufinden, öffne die Konsole (F12 und dann auf Console), aktualisiere die Seite und löse das Skript aus. Wahrscheinlich wird in der Konsole dann ein Fehler in rot erscheinen. Dieser hilft hier dann bei der Fehleranalyse weiter.

 

[Zephyro]

Das habe ich auch schon versucht. Es erscheint (leider) keine Fehlermeldung in der Konsole.
Es war nur eine Warnung wegen meinem Doctype angezeigt. Daran lag das Problem aber auch nicht.

 

[ice-breaker]

1. Wird der Request überhaupt ausgeführt? (schau in den Netwerk-Tab der Developer-Tools)
2. Wird die onreadystate-Funktion überhaupt irgendwann mal aufgerufen? (logge die Argumente)

 

[Daaron]

Was passiert, wenn du auf eine der üblichen Bibliotheken wie jQuery oder Mootools verwendest?

 

[Zephyro]

@Daaron

Die jQuery Bib. hab ich eingebunden. Ändert aber leider auch nichts daran, dass es nicht funktioniert im IE10.

@ice-breaker

zu 1.) Hier stimmt was nicht:

URL | Methode | Ergebnis | Typ | Empfangen | Benötigte Zeit | Initiator | Warten‎‎ | Start‎‎ | Anforderung‎‎ | Antwort‎‎ | Cachelesezugriff‎‎ | Zeitspanne‎‎
/uploadImg.php | (Ausstehend...) | (Ausstehend...) | (Ausstehend...) | (Ausstehend...) | (Ausstehend...) | (Ausstehend...) | 10764 | 0 | 0 | 0 | 0 | -34967468

zu 2.)

var xhr = new XMLHttpRequest();
xhr.open("POST", "uploadImg.php");
console.log("open: OK");
xhr.onreadystatechange = function()
{
    console.log("onreadystatechange: OK");
    if (xhr.readyState == 4)
    {
        console.log("readyState: OK");
    }
};
xhr.send();
console.log("send: OK");

ergibt in der Konsole:

open: OK 
onreadystatechange: OK 
send: OK

Ich möchte Bilder uploaden und füge diese an ein erzeugtes FormData-Objekt. Das FormData Objekt wird dann via xhr.send(formData) gesendet.
Keine Ahnung ob das daran liegt, in anderen Browsern funktioniert es.

Danke für die bisherigen Antworten

 

[Speedy.]

Ich glaube Daroon wollte, dass du den AJAX-Aufruf über jQuery oder Mootools machst. Versuch es mal per jQuery, da ist das recht unkompliziert: http://api.jquery.com/jQuery.ajax/

Ich denke aber dennoch, dass der Internet Explorer da etwas blockt. Hatte auf Arbeit auch mal mit dem selben Problem zu tun, im Internet Explorer 9 und abwärts hat es funktioniert, im 10er nicht. Schau dir mal die Intranet-Einstellungen an und stelle diese ggf. auf die geringste Stufe.

 

[Daaron]

Jep, du sollst den Request über die externe Lib laufen lassen. http://mootools.net/docs/core/Request/Request ist z.B. n verdammter Nobrainer. Der Vorteil an diesen Bibliotheken ist, dass sie eingebaute Crossbrowser-Frickellösungen haben. Dasselbe Fitzelchen Code läuft von IE6 bis IE10, in FF, Chrome, den ganzen Mobilebrowsern,...

Was anderes: Der Request geht an ein PHP-Script auf DEINER Domain, oder? Du versuchst hier nicht, eine fremde Domain anzusprechen, oder? Das klappt nicht.

 

[Zephyro]

Ich habe es inzwischen mit jQuery versucht. Hier ist der Code:

    $.ajax({
        url:            './uploadImg.php',
        data:           formData,
        processData:    false,
        contentType:    false,//'multipart/form-data',
        beforeSend:     function(){
                            // some code...
                        },
        type:           'POST',
        /*success:        function(data){
                            alert(data);
                        }*/
    }).done(function(respond){
        alert(respond);
    });

Es funktioniert damit immer noch nicht im IE. Im Netzwerk-Tab wird der Request als Ausstehend (wie oben bereits gepostet) angezeigt.
Mootools habe ich noch nicht versucht, aber ich glaube das ändert auch nichts. Der Fehler muss wo anders liegen...

@Speedy
Ich habe in den Intranet-Einstellungen etwas rumgespielt, aber bisher auch ohne Erfolg.

@Daaron
Meinst du Mootools würde daran etwas ändern, wenn das mit jQuery auch nichts geholfen hat? Um alles probiert zu haben würde ich es auch noch damit versuchen, aber ich glaube nicht das es hilft. Ich teste die Skripte lokal mit xampp. Kann es daran liegen, dass es im IE nicht geht?

Also ich weiß langsam nicht mehr weiter. Dieser Browser treibt mich noch in den Wahnsinn!
Wenn noch jemand eine Idee hat, dann bitte posten

 

[carom]

• Funktioniert es im IE10, wenn er sich im IE9 Kompatibilitätsmodus befindet?
• Hast du zufällig Plugins wie FDM oder Download Accelerator installiert?

 

[ice-breaker]

mach in deinem alten Code mal aus dem:

 console.log("onreadystatechange: OK");

ein:

 console.log("onreadystatechange", arguments);

Denn nur weil du ein OK ausgibst, muss nicht alles ok sein. Ich vermute, dass die Funktion mit einem Errorcode aufgerufen wird, deswegen solltest du auch die Argumente loggen.

 

[Zephyro]

@carom

Ich habe keine Plugins installiert.
Wenn ich meinen IE10 mit:

<meta http-equiv="X-UA-Compatible" content="IE=9">

zwinge die Seite im IE9 Standard zu verarbeiten, dann geht zwar das Ajax aber dafür funktioniert dann das Drag&Drop nicht mehr bzw. das entgegen nehmen des Bildes, welches ich rein ziehe. Hier steht:
Partial support in IE refers to no support for the dataTransfer.files or .types objects and limited supported formats for dataTransfer.setData/getData.
Das brauche ich dafür.

@ice-breaker

Als Argument erhalte ich: [object Event]

 

[Daaron]

Meinst du Mootools würde daran etwas ändern, wenn das mit jQuery auch nichts geholfen hat?

Nö, die nehmen sich nix. Rein theoretisch hätte es ja auch mit deiner handgeschriebenen Lösung gehen sollen.

Ich teste die Skripte lokal mit xampp. Kann es daran liegen, dass es im IE nicht geht?

Durchaus.
Teste das Ganze doch mal unter realistischen Bedingungen, sprich: richte dir eine Domain ein, bring deinem Apache bei, deine Seite als VHost zu verwenden,...
Du wirst dafür die Hosts-Datei etwas umschreiben müssen, das geht unter Windows zwar um einiges ekliger als unter Linux, aber es geht.

 

[ice-breaker]

Als Argument erhalte ich: [object Event]

und wenn du da draufklickst, wird dir der Inhalt des Objektes angezeigt...

 

[Zephyro]

Kann man das anders auslesen? Draufklicken zeigt mir nix an.

@Daaron
Danke für den Tipp. Ich lads mal hoch und teste es dann.

 

[QXARE]

Solltest du localhost verwenden, könnte es auch funktionieren, stattdessen die IP zu verwenden.

Hast du schon überprüft, ob die Requests am Server ankommen?
Eventuell könnte es auch ein Problem mit der Server Konfiguration geben, Stichwort Sicherheit und Connection/Content-Types.

 

[Speedy.]

Wäre es die Allow-Control-Access-Origin, würde es aber auch in den anderen Browsern nicht funktionieren. Stattdessen müsste in der Konsole eine Fehlermeldung dazu erscheinen. Das es also am Server liegt, denke ich weniger, hier wird der IE10 die Ursache sein. Weiß aber aktuell auch nicht, wieso das nicht klappt.

 

[Zephyro]

Ich werde erstmal an einer anderen Stelle des Projektes weiter arbeiten. Aus dem Problem mit dem IE10, werde ich nicht schlau... da komme ich momentan einfach nicht weiter.

Also falls noch jemand von euch was einfällt, woran es liegen kann, dann schreibt es bitte.
Vielen Dank für eure bisherige Hilfe!

 

[Zephyro]

Ich weiß jetzt woran es liegt, dass bei mir die AJAX requests im IE nicht funktionieren. Sobald ich ein Bild an das FormData-Objekt angehänge, geht es nicht mehr. Das frisst der IE nicht.

dropzone.addEventListener("drop", function (e) {
    file = e.dataTransfer.files[0];

    uploadFile(file);
    e.preventDefault();
}, false);

function uploadFile(file)
{
    var xhr = new XMLHttpRequest();
    var fData = new FormData();

    fData.append("datei", file);

    xhr.open("POST", "uploadImg.php");
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState == 4)
        {
             alert(xhr.responseText);
        }
    };
    xhr.send(fData);
}

Strings kann ich dran hängen, da geht es.
Gibts es eine andere Möglichkeit das Bild an meine PHP-Datei zu übergeben ohne den Weg über:

<input type="file" />

zu gehen?

 

[ice-breaker]

http://caniuse.com/#feat=xhr2