Was fehlt mir in der XMLHttpRequest?

Question

Ich bin völlig neu in der JavaScript-und Ajax-Welt, aber versuche zu lernen.

Momentan teste ich die XMLHttpRequest und ich kann nicht einmal das einfachste Beispiel arbeiten. Dies ist der Code Ich versuche

<script type="text/javascript"> 
     function test() { 
      xhr = new XMLHttpRequest(); 

      xhr.onreadystatechange = function() { 
       if (xhr.readyState == 4 && xhr.status == 200){ 
        var container = document.getElementById('line'); 
        container.innerHTML = xhr.responseText; 
       } else { 
        alert(xhr.status); 
       } 
      } 

      xhr.open('GET', 'http://www.google.com', true);     
      xhr.send(null); 
     } 
    </script> 

zu laufen und ich bekomme immer die Warnung mit dem Status 0. Ich Tonnen Bahnen darüber gelesen habe, und ich weiß nicht, was ich fehle. Ich werde jede Hilfe zu schätzen wissen, danke!

Answer 1

Sie laufen in die Same Origin Policy.

Sofern Ihr Code nicht auf www.google.com läuft (was unwahrscheinlich ist), wird dies zu einem Fehler.

Auch wenn dies momentan kein Problem ist, ist es eine schlechte Übung und kann zu Wettlaufbedingungen führen. Sie verwenden Globals überall.

Machen Sie die xhr lokale Variable an die Funktion

var xhr = new XMLHttpRequest(); 

Und um es mit this innerhalb des onreadstatechange Methode verweisen.

if (this.readyState == 4 && this.status == 200){ 
// etc etc 

Answer 2

Im Anschluss an David's answer:

Sie haben einen relativen Pfad zu verwenden, innerhalb der gleichen Herkunft Politik zu bleiben. Andernfalls geben die meisten Browser einfach eine leere responseText und status == 0 zurück.

Als eine mögliche Problemumgehung könnten Sie eine sehr einfache reverse proxy (mit mod_proxy, wenn Sie Apache verwenden) einrichten. Dies würde Ihnen erlauben, relative Pfade in Ihrer AJAX-Anfrage zu verwenden, während der HTTP-Server als Proxy für jeden "entfernten" Standort agieren würde.

Die grundlegende Konfigurationsanweisung zum Einrichten eines Reverse-Proxy in mod_proxy ist ProxyPass. Sie würden es in der Regel wie folgt verwenden:

ProxyPass  /ajax/  http://google.com/ 

In diesem Fall würde der Browser /ajax/search?q=stack+overflow anfordert, aber der Server würde dies dienen, indem sie als Proxy http://google.com/search?q=stack+overflow handeln.

Answer 3

+1 zu beiden Daniel und David für die richtigen Antworten, ich möchte in den Kommentar hinzufügen, dass es sehr wenige Fälle gibt (es sei denn, Sie nur JS besser lernen wollen), dass Sie direkt mit xhr Vice verwenden sollten Bibliothek wie jQuery, die von Millionen von Entwicklern auf der ganzen Welt getestet und getestet wurde. Es hat auch viele andere nützliche Funktionen, die Ihnen bei der Entwicklung Ihres Ajax helfen (wie Animationen und DOM-Manipulation).

Paul

Answer 4

Neben dem gleichen Ursprung politischen Frage, Ihr alert ist in einer unlogischen Stelle. Wenn Sie XMLHttpRequest verwenden, wird die xhr.onreadystatechange zugewiesene Funktion aufgerufen, wenn sich readyState ändert. readyState sollte (theoretisch) von 0 (initialisiert) zu 1 (gesendet) zu 2 (laden) zu 3 (interaktiv) zu 4 (fertig) ändern.

Was Ihr Code macht, ist die readyState überprüfen und sehen, ob die Anforderung beendet ist (if (xhr.readyState == 4)), und wenn nicht, alert die HTTP status code. Da die Anfrage noch nicht gesendet wurde (oder gerade gesendet wurde), sollte noch kein HTTP-Status vorliegen.

Idealerweise sollten Sie den alert innerhalb des if Blocks verschieben, damit Sie wissen, wann er fertig ist.