Che cosa mi manca in XMLHttpRequest?

Sono completamente nuovo al mondo di javascript e ajax ma cerco di imparare.

Adesso sto testando l'XMLHttpRequest e non posso fare il lavoro anche il più semplice esempio. 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 l'allarme con lo stato 0. Ho letto tonnellate di web su questo e non so cosa mi manchi. Apprezzerò qualsiasi aiuto, grazie!

Si sta eseguendo la stessa politica di origine .

A less che il codice non sia effettivamente in esecuzione su http://www.google.com (che è improbabile), questo è in errore.

Inoltre, e mentre questo non sta causando un problema al momento, è una pratica scarsa e può portre a condizioni di gara, si sta utilizzando globali in tutto il luogo.

Rendere la variabile xhr locale alla function

 var xhr = new XMLHttpRequest(); 

E riferirlo con this all'interno del metodo onreadstatechange .

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

Seguendo la risposta di David :

Devi utilizzare un path relativo per rimanere all'interno della stessa politica di origine. In caso contrario, molti browser restituiranno semplicemente una responseText e uno status == 0 vuoti.

Come una ansible soluzione, è ansible impostare un proxy inverso molto semplice (con mod_proxy se si utilizza Apache). Ciò consentirebbe di utilizzare routes relativi nella tua richiesta AJAX, mentre il server HTTP agirebbe come proxy a qualsiasi posizione remota.

La direttiva di configuration fondamentale per impostare un proxy inverso in mod_proxy è il ProxyPass . Di solito si usa come segue:

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

In questo caso, il browser richiederebbe /ajax/search?q=stack+overflow ma il server lo servirebbe agendo come proxy a http://google.com/search?q=stack+overflow .

Oltre allo stesso problema di origine, il tuo alert è in un luogo illogico. Quando si utilizza XMLHttpRequest, la function assegnata a xhr.onreadystatechange verrà chiamata each volta che readyState cambia. readyState dovrebbe cambiare (in teoria) da 0 (inizializzato) a 1 (inviato) a 2 (carico) a 3 (interattivo) a 4 (finito).

Quello che fa il tuo codice è controllare il readyState e vedere se la richiesta è terminata ( if (xhr.readyState == 4) ) e se no, alert il codice di stato HTTP . Poiché la richiesta non è ancora stata inviata (o è stata appena inviata), non dovrebbe essere ancora uno stato HTTP.

Idealmente, dovresti spostare l' alert all'interno del block if , quindi ti consente di sapere quando finisce.

+1 a Daniel e David per le risposte corrette, vorrei aggiungere nel commento che ci sono pochissimi casi (a less che non si voglia solo imparare meglio JS) che si dovrebbe utilizzare direttamente utilizzando vice xhr utilizzando una libreria come jQuery che è stato testato e dimostrato da milioni di sviluppatori in tutto il mondo. Ha anche molte altre funzioni utili che ti aiuteranno con il tuo sviluppo ajax (come animazioni e manipolazione DOM).

Paolo