Ajax (asynchronousjavascriptandxml) javascript et xml asynchrones.
Il s'agit de résoudre les lacunes du modèle « envoyer la demande et attendre la réponse » dans les applications Web traditionnelles. (Après l'envoi de la demande, le navigateur ne peut qu'attendre la réponse du serveur. L'utilisateur ne peut pas effectuer d'autres opérations. Une fois que le navigateur a envoyé la demande, le navigateur ne peut qu'attendre la réponse du serveur. demande, supprimera la page entière et attendra que le serveur en renvoie une nouvelle page, c'est-à-dire que la quantité de données interagies entre le navigateur et le serveur est très importante et que les données ne peuvent pas être obtenues à la demande). L'essence de cette technologie est la suivante : de manière asynchrone via un objet (XmlHttpRequest) intégré au navigateur. Envoyez une requête au serveur.
Ce qu'on appelle asynchrone signifie que le navigateur n'abandonne pas la page entière, c'est-à-dire qu'il n'envoie pas de données au serveur via la soumission du formulaire. Une fois que le serveur a traité la demande, il renvoie les données à l'objet XmlHttpRequest et les données. dans le XmlHttpRequest peut être obtenu via javascript. Ensuite, utilisez ces données pour mettre à jour la page pendant tout le processus, l'utilisateur n'a pas à attendre une réponse du serveur.
Description : Technologie de transmission asynchrone de pages Web. Une méthode pour communiquer avec le serveur sans actualiser la page entière. En attendant la transmission de la page Web, l'utilisateur peut toujours interagir avec le système et la page peut mettre à jour le contenu sans actualiser. . Une utilisation raisonnable peut permettre de se sentir mieux et plus pratique pour les utilisateurs, mais n'en abusez pas.
Synchrone et asynchrone
La synchronisation fait référence à la méthode de communication dans laquelle l'expéditeur envoie des données et attend que le destinataire renvoie une réponse avant d'envoyer le prochain paquet de données.
Par exemple, synchronisation : soumettre la demande -> attendre le traitement du serveur -> revenir après le traitement. Pendant cette période, le navigateur client ne peut rien faire : une fois que l'expéditeur a envoyé les données, il n'attend pas que le destinataire renvoie un message. réponse, puis envoie le paquet de données suivant.
Ex. Asynchrone : la requête est déclenchée par un événement -> traitée par le serveur (le navigateur peut encore faire autre chose à ce moment) -> traitée
Objet important d'AjaxXMLHttpRequest
Objet Javascript important, à travers lequel les requêtes peuvent être effectuées via Javascript. Si plusieurs requêtes doivent être effectuées, plusieurs objets XHR sont requis. Le résultat de la requête est traité par une méthode prédéfinie.
Comment créer un objet XmlHttpRequest
fonction getXmlHttpRequest(){
var xmlHttpRequest = null ;
if ((typeof XMLHttpRequest) != 'indéfini') {
//navigateur non-ie
xmlHttpRequest = new XMLHttpRequest();
}autre {
//c'est-à-dire le navigateur
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
renvoyer xmlHttpRequest ;
}
ou
fonction createXmlHttpRequest(){
var xmlHttpRequest = null ;
si(window.ActiveXObject){
xmlHttpRequest = new AvtiveXObject("Microsoft.XMLHTTP");
}sinon si(window.XMLHttpRequest){
xmlHttpRequest = new XMLHttpRequest();
}
}
Propriétés importantes de l'objet xmlHttpRequest.
ResponseXml : récupère les données XML de la réponse du serveur
status : récupère le code d'état renvoyé par le serveur (par exemple 200)
readyState : Obtenez l'état de la communication entre xmlHttpRequest et le serveur (0, 1, 2, 3, 4, décrivant respectivement les différents états).
(Non initialisé) : L'objet a été créé, mais n'a pas été initialisé (la méthode open n'a pas encore été appelée)
(Initialisation) : L'objet a été créé et la méthode d'envoi n'a pas encore été appelée.
(Envoyer des données) : la méthode d'envoi a été appelée, mais l'état actuel et l'en-tête http sont inconnus
(Transmission de données en cours) : Des données partielles ont été acceptées.
(Fin de la réponse) : À ce stade, les données peuvent être obtenues via ResponseText/responseXml.
Un exemple d'application implémenté par une personne utilisant Ajax
Capture d'écran du système
Description du système :
Diagramme de structure du système
Afficher la première page register.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<tête>
<title>Enregistrement de l'utilisateur</title>
<link href="css/regist.css" rel="stylesheet" type="text/css" />
<script src="js/regist_ajax.js" type="text/javascript"></script>
</tête>
<body onload="getRegistRuleTxt(),getCheckcode()">
<form action="regist.do" onsubmit="return check(this);">
<table bordercolor="gray" cellpadding="6" align="center">
<tr>
<td colspan="2">
>> <font color="red">Enregistrement des utilisateurs</font>
<font color="gray">[Description du module : vérification du nom d'utilisateur, conditions d'utilisation du traitement asynchrone Ajax, génération du serveur de code de vérification]</font>
</td>
</tr>
<tr>
<td align="right">
nom d'utilisateur:
</td>
<td>
<input type="text" name="username" id="username" onblur="postValidate()"/>
<span style="color:orange" id="checkMsg" > * Le nom d'utilisateur est composé de lettres, de chiffres et de traits de soulignement.</span>
</td>
</tr>
<tr>
<td align="right">
mot de passe:
</td>
<td>
<input type="password" name="password" id="password">
<span style="color:orange" id="pwdMsg" > * La longueur du mot de passe est de 6 à 8 caractères. Pour des raisons de sécurité, les formats uniques doivent être évités.</span>
</td>
</tr>
<tr>
<td align="right">
Confirmez le mot de passe:
</td>
<td>
<input type="password" name="repassword" id="repassword">
<span style="color:orange" id="repwdMsg" > * Confirmez le mot de passe pour vous assurer que vous n'avez commis aucune erreur lors de la définition du mot de passe</span>
</td>
</tr>
<tr>
<td align="right">
Mail:
</td>
<td>
<input type="text" id="email" name="email">
<span style="color:orange" id="emailMsg" > * Saisissez votre adresse email habituelle afin que nous puissions vous contacter.</span>
</td>
</tr>
<tr>
<td align="right">
Le code de vérification:
</td>
<td>
<input type="text" id="checkcode">
<img id="ckcodeimage" src="imgsrc" style="border:solid #92CEDB 1px "> <!-- Code de vérification-->
<a href="javascript:;" onclick="getCheckcode()">Je ne vois pas clairement, changez-en un autre</a>
<span style="color:orange" id="ckcodeMsg" > </span>
</td>
</tr>
<tr>
<td align="right">
Conditions d'utilisation :
</td>
<td>
<textarea rows="5" cols="48" style="margin-bottom:6px;margin-left:5px; color:gray" readonly="readonly" id="item" >
</textarea>
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
<input type="submit" value="Acceptez les conditions et inscrivez-vous"/>
</td>
</tr>
</table>
<div align="centre">
Copyright (c) 2013 Su Ruonian ( <a href="mailto:[email protected]">Contactez-nous :[email protected]</a> )
société Tous droits réservés.
</div>
</form>
</corps>
</html>
/*
Créer une méthode pour obtenir l'objet xmlHttpRequest
*/
fonction getXmlHttpRequest(){
var xmlHttpRequest = null ;
if((typeof XMLHttpRequest) != 'indéfini'){
/*Les navigateurs non-IE créent des objets XMLHttpRequest*/
xmlHttpRequest = new XMLHttpRequest();
}autre{
/*Le navigateur IE crée un objet XMLHttpRequest*/
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
renvoyer xmlHttpRequest ;
}
/*
Événement de réponse au code de vérification
*/
fonction getCheckcode(){
var codeimage = document.getElementById("ckcodeimage");
var url = "checkcode.do";
codeimage.src=addTimestamp(url);
}
/*
Utiliser Ajax pour obtenir les conditions de service
*/
fonction getRegistRuleTxt(){
var item = document.getElementById("item");
var url = "rulesText.do";
// Résolvez le problème d'encodage chinois lors de la soumission en mode get. Utilisez encodeURI(url).true pour indiquer que la demande est envoyée de manière asynchrone et addTimestamp(url) empêche la mise en cache du navigateur.
xmlHttpRequest.open("post",encodeURI(url),true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=fonction(){
si(xmlHttpRequest.readyState == 4){
si(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
item.value=respText;
}autre{
//Erreur système.
item.value="Erreur système" ;
}
}autre{
// Vérification de l'affichage...
item.value="chargement...";
}
} ;
xmlHttpRequest.send(null);
}
/*
Utilisez la méthode get pour vérifier
*/
fonction getValidate(){
var nom d'utilisateur = document.getElementById("nom d'utilisateur");
var url = "validatename.do?username=" + username.value;
// Résolvez le problème d'encodage chinois lors de la soumission en mode get. Utilisez encodeURI(url).true pour indiquer que la demande est envoyée de manière asynchrone et addTimestamp(url) empêche la mise en cache du navigateur.
xmlHttpRequest.open("get",encodeURI(addTimestamp(url)),true);
//Appelle la méthode pour vérifier l'état du retour
xmlHttpRequest.onreadystatechange=rappel ;
xmlHttpRequest.send(null);
}
/*
Utilisez la méthode post pour vérifier
*/
fonction postValidate(){
var nom d'utilisateur = document.getElementById("nom d'utilisateur");
var url = "validatename.do";
//true signifie utiliser une méthode asynchrone pour envoyer la requête. La valeur par défaut est true et la méthode de requête peut être get, post, put, delete.
xmlHttpRequest.open('post',url,true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=rappel ;
//S'il y a plusieurs paramètres, utilisez le symbole & pour lier les paires clé-valeur, et l'échappement est utilisé pour résoudre les problèmes chinois
xmlHttpRequest.send('username=' + escape(username.value));
}
/*
Méthode de retour de l'état de surveillance
*/
rappel de fonction(){
si(xmlHttpRequest.readyState == 4){
si(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
innerHtmlMsg(respText);
}autre{
//Erreur système.
innerHtmlMsg("erreur");
}
}autre{
// Vérification de l'affichage...
innerHtmlMsg("vérification");
}
}
/*
Ajoutez un horodatage pour empêcher la mise en cache du navigateur. La mise en cache du navigateur met uniquement en cache la méthode get.
*/
fonction addTimestamp(url){
if(url.indexOf("?")!=-1){
//S'il y a des paramètres
return url+"×tamp=" + new Date().valueOf();
}autre{
//aucun paramètre
return url+"?timestamp=" + new Date().valueOf();
}
}
fonction innerHtmlMsg(message){
var checkMsg = document.getElementById("checkMsg");
if(message=='existe'){
//Le nom d'utilisateur existe
checkMsg.innerHTML= "<font color='red'>* Désolé, le nom d'utilisateur existe déjà.</font>";
}
if(message=='noexists'){
//Le nom d'utilisateur peut être utilisé
checkMsg.innerHTML= "<font color='green'>* Félicitations, le nom d'utilisateur est disponible.</font>";
}
if(message=='vérification'){
//Vérification du système
checkMsg.innerHTML= "<font color='#0099aa'>* Le système vérifie les données...</font>";
}
si(message=='erreur'){
//Erreur système
checkMsg.innerHTML= "<font color='red'>Panne du système, veuillez vérifier le réseau ou <a href='#'>Contactez-nous</a></font>";
}
}
} /* Définit la largeur globale et le style de bordure du tableau, ainsi que le style de tout le texte du tableau */
.gauche{
poids de la police : 500 ;
couleur : #708899 ;
remplissage à droite : 20 px ;
couleur d'arrière-plan : #D6ECF5 ;
}
.entrée {
bordure : solide #92CEDB 1px ;
largeur : 210 px ;
hauteur : 22px ;
marge gauche : 10 px ;
}
.rghts{
marge supérieure : 20 px ;
couleur : #708899 ;
taille de police : 12 px ;
}
<servlet>
<servlet-name>UserServlet</servlet-name>
<servlet-class>com.webapp.servlet.UserServlet</servlet-class>
<param-init>
<param-name>chemin du fichier de règles</param-name>
<param-value>/txt/item.txt</param-value>
</init-param>
</servlet>
<mappage-servlet>
<servlet-name>UserServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<liste-de-fichiers-de-bienvenue>
<fichier-bienvenue>regist.jsp</fichier-bienvenue>
</welcome-file-list>
</application-web>
importer java.awt.Color ;
importer java.awt.Font ;
importer java.awt.Graphics ;
importer java.awt.image.BufferedImage ;
importer java.util.HashMap ;
importer java.util.Map ;
importer java.util.Random ;
/**
*
* @version : 1.1
*
* @auteur : Su Ruonian<a href="mailto:[email protected]">Envoyer un e-mail</a>
*
* @depuis : 1.0 Heure de création : 20/01/2013 16:26:52
*
* @fonction : À FAIRE
*
*/
classe publique CheckCodeImageUtil {
private static final String[] chars = { "0", "1", "2", "3", "4", "5", "6",
"7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I" } ;
private static final int SIZE = 4; //Le nombre de caractères dans le code de vérification
private static final int LINES = 4; //nombre de lignes d'interférence
private static final int WIDTH = 110 ; //Largeur de l'image du code de vérification
private static final int HEIGHT = 40 ; //Hauteur de l'image du code de vérification
private static final int FONT_SIZE = 21; //Taille de la police sur le code de vérification
/**
* Générer un code de vérification
*
* @return Map<valeur du code de vérification, image du code de vérification>
*
*/
public static Map<String,BufferedImage> creatCheckImage(){
//Enregistre la chaîne qui génère la vraie valeur du code de vérification
Tampon StringBuffer = new StringBuffer();
//Objet image personnalisé
Image BufferedImage = new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);
Map<String,BufferedImage> map = new HashMap<String,BufferedImage>();
Graphiques graphiques = image.getGraphics();
graphiques.setColor(Color.WHITE);
graphiques.fillRect(0, 0, LARGEUR, HAUTEUR);
Aléatoire aléatoire = nouveau Aléatoire();
//Dessine des personnages aléatoires
pour(int i=0; i<TAILLE; i++){
//Obtenir un élément du jeu de caractères défini
int rand = random.nextInt(chars.length);
graphiques.setColor(randomColor());
graphiques.setFont(nouvelle police(null,Font.BOLD+Font.ITALIC,FONT_SIZE));
graphiques.drawString(chars[rand],(i)*WIDTH/SIZE+8, HEIGHT/2+10);
buffer.append(chars[rand]); //Enregistrez la chaîne générée dans le tampon et utilisez-la pour comparer avec la valeur saisie par l'utilisateur lors de son obtention ultérieure.
}
//Dessiner des lignes d'interférence
pour(int i=1;i<=LINES;i++){
graphiques.setColor(randomColor());
graphiques.drawLine(random.nextInt(WIDTH), random.nextInt(HEIGHT), random.nextInt(WIDTH),random.nextInt(HEIGHT));
si(i==LIGNES){
graphiques.setFont(nouvelle police(null,Font.ITALIC,13));
graphiques.setColor(Couleur.GRAY);
graphiques.drawString("Su Ruonian Studio", 5,15);
}
}
map.put(buffer.toString(), image);
carte de retour ;
}
/**
* La couleur sera générée immédiatement
* @retour
*/
couleur statique publique randomColor(){
Aléatoire aléatoire = nouveau Aléatoire();
Couleur couleur = nouvelle couleur(random.nextInt(256),random.nextInt(256),random.nextInt(256));
renvoyer la couleur ;
}
}
importer java.awt.image.BufferedImage ;
importer java.io.BufferedReader ;
importer java.io.ByteArrayInputStream ;
importer java.io.ByteArrayOutputStream ;
importer java.io.File ;
importer java.io.FileReader ;
importer java.io.FileWriter ;
importer java.io.IOException ;
importer java.io.InputStream ;
importer java.io.PrintWriter ;
importer java.util.List ;
importer java.util.Map ;
importer java.util.Vector ;
importer javax.imageio.ImageIO ;
importer javax.servlet.ServletException ;
importer javax.servlet.ServletOutputStream ;
importer javax.servlet.http.HttpServlet ;
importer javax.servlet.http.HttpServletRequest ;
importer javax.servlet.http.HttpServletResponse ;
importer com.sun.image.codec.jpeg.JPEGCodec ;
importer com.sun.image.codec.jpeg.JPEGImageEncoder ;
importer com.sun.imageio.plugins.common.ImageUtil ;
importer com.webapp.util.CheckCodeImageUtil ;
la classe publique UserServlet étend HttpServlet {
liste privée<String> userList ;
chaîne privée txtFilePath = null ;
public void init() lance ServletException {
txtFilePath = this.getInitParameter("rulesfilepath");
//Simuler la base de données
userList = new Vector<String>();
userList.add("zhangsan");
userList.add("lisi");
userList.add("wangwu");
userList.add("zhaoliu");
}
public void doGet (demande HttpServletRequest, réponse HttpServletResponse)
lance ServletException, IOException {
doPost (demande, réponse);
}
public void doPost (demande HttpServletRequest, réponse HttpServletResponse)
lance ServletException, IOException {
Chaîne uri = request.getRequestURI();
Chemin de chaîne = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(path.equals("/validatename")){
request.setCharacterEncoding("utf-8");
réponse.setContentType("text/html;charset=utf-8");
essayer {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//Le système de simulation génère un test d'exception
/*si(1==2){
throw new ServletException("une erreur");
}*/
String nom d'utilisateur = request.getParameter("nom d'utilisateur");
System.out.println("nom d'utilisateur :" + nom d'utilisateur);
// Simuler la requête de données utilisateur
boolean exist = userList.contains(username);
si (existe) {
réponse.getWriter().print("existe");
}autre{
réponse.getWriter().print("noexists");
}
}
if(path.equals("/rulesText")){
request.setCharacterEncoding("utf-8");
réponse.setContentType("text/html;charset=utf-8");
String filePath = this.getServletContext().getRealPath(txtFilePath);
Fichier fichier = nouveau fichier (filePath);
Tampon StringBuffer = new StringBuffer();
essayer {
Lecteur BufferedReader = nouveau BufferedReader (nouveau FileReader (fichier));
Chaîne tmp = "" ;
while((tmp = reader.readLine())!=null){
buffer.append(new String(tmp.getBytes("gbk"),"utf8").append("/n");
}
lecteur.close();
} attraper (Exception e) {
e.printStackTrace();
}
if(buffer.toString().trim()!=null){
réponse.getWriter().print(buffer.toString());
}
}
if(path.equals("/checkcode")){
réponse.setContentType("image/jpeg");
Map<String, BufferedImage> map = CheckCodeImageUtil.creatCheckImage();
Clé de chaîne = (String)map.keySet().iterator().next();
request.getSession().setAttribute("code",key);
System.out.println("checkcode = " + request.getSession().getAttribute("code"));
Image BufferedImage = map.get(clé);
ImageIO.write(image, "jpeg", réponse.getOutputStream());
}
}
}