Il mio background è in linguaggi orientati agli oggetti compilati tradizionali come la programmazione C++ e .NET, e ora sto dilettandomi in un po 'di JavaScript per un nuovo progetto. Mi sono dilettato con AJAX e mi sono imbattuto in un aspetto confuso su come gli oggetti sono gestiti dal browser.In che modo gli oggetti xmlhttprequest vengono creati, uniti e distrutti in Javascript
[Modifica # 2] - Variazione script contenuti attivi
Ho una pagina di pratica con tre pulsanti che ogni aggiornamento di un <textarea> utilizzando XMLHttpRequest oggetti:
- Button 1 aggiornamenti TextArea1 con testo contenuto da slowtime.php
- Pulsante 2 aggiornamenti TextArea2 con contenuto di testo da slowtime.php
- Pulsante 3 aggiornamenti TextArea3 con contenuti di testo da fasttime.php
Dove slowtime.php e fasttime.php sono semplici script che restituiscono una pagina di testo/HTML con due timestamp: uno quando la pagina si carica, uno dopo un po 'di tempo è trascorso.
Ciascuno dei pulsanti funziona correttamente se cliccato uno alla volta. Se faccio clic sul pulsante 2 e poi sul pulsante 3 prima che venga completata la prima richiesta, gli aggiornamenti funzionano ancora come previsto.
Se faccio clic sul pulsante 1 e poi sul pulsante 2 prima che la prima richiesta sia completa, TextArea1 e TextArea2 ricevono i valori corretti; tuttavia, le chiamate all'evento onreadystatechange si verificano contemporaneamente, ovvero la prima risposta in ritardo e viene elaborata solo quando arriva la seconda.
codice di esempio
Sito
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url,target)
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(target).value=xmlhttp.responseText;
}
}
xmlhttp.open("POST",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="button" value="Button 1" onClick="loadXMLDoc('slowtime.php','TextArea1')"/>
<input type="button" value="Button 2" onClick="loadXMLDoc('slowtime.php','TextArea2')"/>
<input type="button" value="Button 3" onClick="loadXMLDoc('fasttime.php','TextArea3')"/>
<div><textarea id="TextArea1"></textarea></div>
<div><textarea id="TextArea2"></textarea></div>
<div><textarea id="TextArea3"></textarea></div>
</form>
</body>
</html>
codice PHP (slowtime.php)
<?php
echo date('h:i:s') . "\n";
sleep(5);
echo date('h:i:s') . "\n";
?>
Domande [Revised]
In che modo il browser gestisce gli oggetti XMLHttpRequest? Premendo i pulsanti 2 e 3 si indica che ogni pressione istanzia un nuovo oggetto e ognuno di questi ha gestori di eventi indipendenti. Se gli oggetti vivono oltre la chiamata di funzione iniziale (dal momento che i loro gestori di eventi sopravvivono) quando vengono cancellati dalla memoria/distrutti?
Se il XMLHttpRequests sono oggetti separati, come fa l'invio di una seconda richiesta allo stesso URL influenzare i tempi di risposta del primo? Questo potrebbe essere un problema lato server?
Nella 'funzione xmlhttp.onreadystatechange', si dovrebbe forse usare' this.responseText' invece di 'xmlhttp.responseText'? –
@ JoshuaD.Boyd che non dovrebbe fare altro, come la variabile 'xmlhttp' è in un ambito locale all'interno del' loadXMLDoc'. – Tyilo
cambiare tutti i riferimenti a 'xmlhttp' a' this' nella funzione 'onreadystatechange' funziona anche, e produce anche lo stesso comportamento – nicholas