Ajax signifie « Asynchronous JavaScript and XML » et fait référence à une technologie de développement Web permettant de créer des applications Web interactives. La technologie Ajax est un ensemble de toutes les technologies actuellement disponibles dans les navigateurs via des scripts JavaScript. Ajax utilise toutes ces technologies d'une nouvelle manière, revitalisant l'ancien style B/S de développement Web.
Parmi les technologies Ajax, la technologie de base est XMLHttpRequest. Son nom original est XMLHTTP. Elle a été lancée pour la première fois par Microsoft dans le navigateur IE5.0 en 1999 afin de répondre aux besoins des développeurs. Plus tard, cette technologie a été nommée XMLHttpRequest par la spécification ci-dessus. C'est ce qui rend la technologie Ajax unique. En bref, XMLHttpRequest permet aux scripts JavaScript exécutés dans le navigateur de communiquer avec le serveur au sein de la page. JavaScript dans la page peut obtenir des données du serveur ou soumettre des données au serveur sans actualiser la page. L'émergence de XMLHttpRequest offre une nouvelle possibilité de développement Web et change même complètement la vision des gens sur ce que sont les applications Web. Cela nous permet de faire du développement Web d'une manière complètement nouvelle et d'offrir aux utilisateurs une meilleure expérience interactive.
Contrairement au développement Web traditionnel, Ajax ne visualise pas les applications Web de manière statique, basée sur des pages. Du point de vue Ajax, une application Web doit être constituée d'un petit nombre de pages, chacune étant en réalité une application Ajax plus petite. Chaque page comprend des composants Ajax développés en utilisant JavaScript. Ces composants utilisent l'objet XMLHttpRequest pour communiquer avec le serveur de manière asynchrone. Après avoir obtenu les données requises du serveur, ils utilisent l'API DOM pour mettre à jour une partie du contenu de la page. Il existe donc trois différences principales entre les applications Ajax et les applications Web traditionnelles :
1. Communiquez avec le serveur au sein de la page sans actualiser la page entière.
2. Utilisez le mode asynchrone pour communiquer avec le serveur, sans interrompre le fonctionnement de l'utilisateur, et bénéficiez de capacités de réponse plus rapides.
3. La candidature ne comprend que quelques pages. La plupart des interactions se terminent au sein de la page et il n'est pas nécessaire de changer de page entière.
On peut voir qu'Ajax rend les applications Web plus dynamiques, apporte une plus grande intelligence et fournit aux composants de l'interface utilisateur Ajax de riches capacités d'expression. Un tel nouveau type d'application Web est appelé application RIA (Rich Internet Application).
La face avant contient quelques informations sur l'introduction d'AJAX que j'ai trouvées sur Internet pour aider les lecteurs qui ne connaissent pas la technologie AJAX à comprendre la technologie AJAX dès que possible. Ensuite, je vais vous présenter quelques technologies et techniques AJAX que j'ai utilisées. le processus de développement proprement dit.
La chose la plus importante lors de l'utilisation de la technologie AJAX est de créer un objet XMLHttpRequest. Il existe de nombreuses informations sur la façon de créer cet objet sur Internet. L'une de mes méthodes les plus couramment utilisées est.
fonction createXMLHttpRequest() {
var xmlhttp;
essayer {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} attraper(e) {
essayer {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} attraper(e) {
essayer {
xmlhttp = nouveau XMLHttpRequest();
} attraper(e) {
alert("Échec de la création de l'objet XMLHttpRequest !");
}
}
}
renvoyer xmlhttp ;
}
Ci-dessous, je vais énumérer quelques exemples et certaines choses qui peuvent être apprises grâce à ces exemples.
Le morceau de code suivant est un exemple de la façon dont je vérifie si l'élément existe déjà dans la base de données lors de l'ajout d'un élément spécifique.
<input type="text" style="width:100%" class="noEmptyInput" name="segment10" value="<%=segment10%>" maxlength="16" onblur="do_verify();">
fonction do_verify() {
var segment10 = document.mainFrm.segment10.value;
var inventaireItemId = document.mainFrm.inventoryItemId.value;
// alerte (segment10)
xmlHttp = createXMLHttpRequest();
var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" + segment10 + "&inventoryItemId=" + inventaireItemId ;
xmlHttp.onreadystatechange = handleReadyStateChange ;
xmlHttp.open("post", url, true); //Il existe également deux méthodes de transmission de données : GET et POST, mais lorsque la méthode est POST, la phrase suivante doit être écrite
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
}
fonction handleReadyStateChange() {
si (xmlHttp.readyState == 4) {
si (xmlHttp.status == 200) {
if (xmlHttp.responseText == 'Y') {
document.mainFrm.isExist.value = 'Y';
document.getElementById("flag").style.display = "bloc"
document.mainFrm.segment10.focus();
} autre {
document.mainFrm.isExist.value = 'N';
document.getElementById("flag").style.display = "aucun"
}
} autre {
alerte(xmlHttp.status);
}
}
}
Le code d'arrière-plan est :
boolean success = itemDAO.doVerifyItem(); //doVerifyItem est la méthode principale pour vérifier si l'élément spécifié existe dans la base de données. Si l'élément existe déjà, cette méthode retournera TRUE.
PrintWriter out = res.getWriter();
si (succès) {
out.print("Y");
}
out.flush();
out.close();
}