Comment puis-je obtenir de rendre l'exécution de code JavaScript à attendre jusqu'à ce qu'une requête AJAX avec le script est chargé et exécuté?
Dans mon application, j'utilise Ext.Ajax.request
pour charger les scripts qui je l'execute avec eval
.
Le problème est que depuis qu'il prend du temps pour la requête AJAX pour terminer, le code qui est exécuté par la suite qui a besoin de variables qui sont dans le script chargé via AJAX. Dans cet exemple, je montre comment c'est le cas. Comment puis-je modifier ce code afin que l'exécution du JavaScript après l'AJAX attend jusqu'à ce que le script dans l'appel AJAX a été chargé et exécuté?
testEvalIssue_script.htm:
<script type="text/javascript">
console.log('2. inside the ajax-loaded script');
</script>
main.htm:
<html>
<head>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript">
function loadViewViaAjax(url) {
Ext.Ajax.request({
url: url,
success: function(objServerResponse) {
var responseText = objServerResponse.responseText;
var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
while(scripts=scriptsFinder.exec(responseText)) {
eval.call(window,scripts[1]);
}
}
});
}
console.log('1. before loading ajax script');
loadViewViaAjax('testEvalIssue_script.htm');
console.log('3. after loading ajax script');
</script>
</head>
<body>
</body>
</html>
de sortie:
1. before loading ajax script
3. after loading ajax script
2. inside the ajax-loaded script
Comment puis-je obtenir la sortie pour être dans le bon ordre, comme ceci:
1. before loading ajax script
2. inside the ajax-loaded script
3. after loading ajax script
- En mettre 2. 3. est et mettre 3. d'où 2. est?
- Appel d'une fonction après la requête AJAX complète et de montrer un " Chargement..' message pour l'utilisateur?
Vous devez vous connecter pour publier un commentaire.
Ajax est asynchrone, ce qui signifie que l'appel ajax est envoyée, mais votre code continue à fonctionner comme heureux comme avant sans s'arrêter. Ajax ne pas arrêter/mettre en pause l'exécution jusqu'à la réception d'une réponse. Vous aurez à ajouter une fonction de rappel ou quelque chose comme ça.
Depuis l'appel ajax est asynchrone, si vous voulez exécuter quelque chose qui dépend de données chargé via ajax, vous aurez à exécuter dans le succès de la méthode. Mettre le code dans une autre méthode, puis appelez la méthode après l'eval consolidés.
Vous pouvez essayer de faire l'appel AJAX synchrone... bien sûr, vous devez cesser d'utiliser le Poste.La bibliothèque Ajax, mais ça vaut le coup si vous avez besoin d'ajax résultats avant la prochaine ligne de code.
C'est comment mon les pages intranet de communiquer avec ma base de données. Il y a un recul, j'ai découvert, dans le sens que vous ne pouvez pas voir n'importe quelle page des mises à jour jusqu'à ce que le Javascript abandonne le contrôle de retourner à la page, donc les choses comme une barre d'état, une barre de progression ou de superposition sont impossibles avec Ajax synchrone (Pas vrai pour mon firefox, il met à jour à l'intérieur même du code synchrone dans certaines circonstances).
J'utilise ce - que c'est un peu la maison-grandi et désordonné, mais cela a fonctionné parfaitement pendant des années dans mon cercle. Il suffit de créer une nouvelle AJAX(), définissez l'url, ajouter des requêtes (des paires nom/valeur) en tant que de besoin, set asynchrone à faux, et lorsque vous appelez Exécuter à partir d'une fonction, il permet de bloquer jusqu'à ce que l'Ajax retourne.
Ou, si vous voulez l'utiliser de manière asynchrone, il suffit d'écrire une nouvelle "onready" pour la tha AJAX objet que vous créez et modifiez asynchrone à true.
J'ai écrit cela il y a plusieurs années, donc ce n'est pas la plus élégante, et il y a des façons de faire les choses différemment, mais il fonctionne comme une amorce, et que vous pouvez modifier quand vous le souhaitez sans avoir à dépendre d'une autre bibliothèque.
Ceci peut être réalisé par la création d'un
XMLHttpRequest
objet et l'appel de la ouvert fonction avec async paramètre est défini sur false.