Cosa mi manca in XMLHttpRequest?

Question

Sono completamente nuovo nel mondo javascript e ajax ma sto cercando di imparare.

In questo momento sto testando XMLHttpRequest e non riesco a rendere il lavoro nemmeno l'esempio più semplice. Questo è il codice che sto cercando di eseguire

<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> 

E ho sempre ottenere l'avviso con lo stato 0. Ho letto tonnellate di ragnatele su questo e non so che cosa mi manca. Apprezzerò qualsiasi aiuto, grazie!

Answer 1

Si sta eseguendo il Same Origin Policy.

A meno che il codice non sia effettivamente in esecuzione su www.google.com (che è improbabile), si tratta di un errore.

Inoltre, e anche se questo non ti sta causando un problema al momento, è una cattiva pratica e può portare a condizioni di gara, stai utilizzando globalmente ovunque.

Fai il XHR variabile locale alla funzione

var xhr = new XMLHttpRequest(); 

e si riferiscono ad esso con this all'interno del metodo onreadstatechange.

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

Answer 2

seguito da David's answer:

Devi usare un percorso relativo a rimanere all'interno della stessa politica di origine. In caso contrario, la maggior parte dei browser restituirà semplicemente un numero vuoto responseText e status == 0.

Come possibile soluzione, è possibile impostare un semplice reverse proxy (con mod_proxy se si utilizza Apache). Ciò consentirebbe di utilizzare percorsi relativi nella richiesta AJAX, mentre il server HTTP agirà come un proxy per qualsiasi posizione "remota".

La direttiva di configurazione fondamentale per impostare un proxy inverso in mod_proxy è ProxyPass. Viene in genere utilizzato come segue:

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

In questo caso, il browser sarebbe chiedendo /ajax/search?q=stack+overflow ma il server potrebbe servire questo, agendo come un proxy per http://google.com/search?q=stack+overflow.

Answer 3

+1 a Daniel e David per le risposte corrette, vorrei aggiungere nel commento che ci sono pochissimi casi (a meno che non vogliate semplicemente imparare JS meglio) che dovreste usare direttamente xhr vice usando un libreria come jQuery che è stata testata e provata da milioni di sviluppatori in tutto il mondo. Ha anche molte altre utili funzionalità che ti aiuteranno con lo sviluppo di ajax (come le animazioni e la manipolazione del DOM).

Paul

Answer 4

Oltre alla stessa questione politica di origine, la vostra alert si trova in un luogo illogica. Quando si utilizza XMLHttpRequest, la funzione assegnata a xhr.onreadystatechange verrà chiamata ogni volta readyState modifiche. readyState dovrebbe cambiare (in teoria) da 0 (inizializzato) a 1 (inviato) a 2 (caricamento) a 3 (interattivo) a 4 (finito).

Che cosa il vostro codice fa è controllare la readyState e vedere se la richiesta è terminata (if (xhr.readyState == 4)), e se non, alert il HTTP status code. Poiché la richiesta non è stata ancora inviata (o è stata appena inviata), non dovrebbe esserci ancora uno stato HTTP.

Idealmente, è necessario spostare lo alert all'interno del blocco if, in modo da sapere quando termina.