1. Introduction à Ajax
AJAX est considéré comme l'abréviation de (Asynchronous JavaScript et XML), et la technologie qui permet au navigateur de communiquer avec le serveur sans rafraîchir la page actuelle est appelée AJAX.
Par exemple: recherche Baidu, carte en temps réel, etc. Dans le modèle AJAX, les données sont transmises indépendamment entre le client et le serveur. Le serveur peut mettre à jour les données sans rafraîchir la page entière;
2. Ajax Schéma de travail de travail
3. Les méthodes correspondantes d'envoi et de réception de l'Ajax
1. La méthode correspondante pour envoyer une demande
1) Fonction de gestion des événements sur le plan d'événement OnReadyStateChange: Cette fonction est déclenchée par le serveur plutôt que par l'utilisateur. Chaque fois que la propriété ReadyState change, l'événement OnReadyStateChange sera déclenché.
2) Open (méthode, URL, asynchronisé): L'Open () de l'objet XMLHTTPREQUEST permet au programme d'envoyer des demandes avec un serveur d'appel AJAX. Le type de demande de méthode peut être "get" ou "post", et l'URL est une chaîne de chemin. Sysnchronized indique si la demande doit être transmise de manière asynchrone.
3) Envoyer (données): les données sont une chaîne qui sera également transmise au serveur. Si la demande "Get" est sélectionnée, les données sont nuls.
2. Recevez la méthode correspondante
1) ReadyState: représente l'état actuel de l'AJAX, représenté par une valeur numérique, 0 représente l'initialisation, 1 représente le chargement, 2 représente le chargement, 3 représente le serveur envoie une réponse, 4 représente la réponse envoyée, et une fois la demande terminée, chaque navigateur définira la valeur de ReadyState sur 4;
2) Statut: Comme dans Javaweb, 404 n'a pas trouvé la page, 403 interdit l'accès, 500 Erreur du serveur interne, 200 Tout est normal, 304 n'a pas été modifié, dans l'objet XMLHTTPRequest, le code d'état envoyé par le serveur est enregistré dans l'attribut d'état. Grâce à cette valeur, nous pouvons nous assurer que le serveur a envoyé une réponse réussie;
3) ResponseText: contient les données envoyées à partir du serveur, qui est généralement HTML, XML ou texte ordinaire. Lorsque la valeur de ReadyState est 4 et que le statut est de 200, l'attribut ResponseText ne peut être utilisé que. En surface, la demande Ajax est terminée. Si le serveur renvoie XML, les données seront stockées dans ResponseXML.
4. Démonstration de code (imitez la boîte de recherche Baidu)
1. Créer un projet Javaweb (la structure du répertoire du projet est la suivante)
2. SearchServlet.java
package cn.jon.ajax; Importer java.io.ioException; Importer java.util.list; Importer javax.servlet.servletException; import javax.servlet.http.httpservlet; Importer javax.servlet.http.httpservletRequest; import javax.servlet.http.httpservletResponse; importer net.sf.json.jsonArray; import Cn.jon.ajax.data.datautils; La classe publique SearchServlet étend httpServlet {private static final long SerialVersionUID = 1l; public void doGet (demande httpservletRequest, réponse httpservletResponse) lève ServletException, ioException {// Définissez le format de sortie de la demande et de la réponse à UTF-8 request.SetcharacteRending ("UTF-8"); Response.SetcharAtterencoding ("UTF-8"); String keyword = request.getParameter ("Keyword"); if (mot-clé! = null) {dataUtils dataresource = new DataUtils (); List <string> list = dataresource.findDatalist (mot-clé); //System.out.println (jsonArray.FromObject (list) .toString ()); réponse.getWriter (). Write (jsonArray.FromObject (list) .toString ()); }} public void doPost (httpsservletRequest request, httpservletResponse réponse) lève ServletException, ioException {doGet (request, réponse); }} 3. Datautils.java, lisez les données sous le fichier de ressources
package cn.jon.ajax.data; Importer java.io.bufferedReader; Importer java.io.ioException; Importer java.io.inputStream; Importer java.io.inputStreamReader; import java.util.arraylist; Importer java.util.list; classe publique DataUtils {private static list <string> datalist = new ArrayList <string> (); Url de chaîne finale statique publique = "/ test.txt"; statique {readResource (url); // datalist.add ("aa"); // datalist.add ("ajax"); // datalist.add ("afinal"); // datalist.add ("bb"); } // public static void readResource (URL de chaîne) {inputStream est = null; InputStreamReader ISR = null; BufferedReader br = null; Chaîne line = null; try {is = datautils.class.getClassloadher (). getResourceAsStream (url); ISR = new inputStreamReader (IS); br = new BufferedReader (ISR); line = br.readline (); while (null! = line) {if (! line.isempty ()) {datalist.add (line); } line = br.readline (); } // while} catch (ioException e) {e.printStackTrace (); } enfin {if (null! = br) {try {br.close (); } catch (ioException e) {}} if (null! = isr) {try {isr.close (); } catch (ioException e) {}} if (null! = is) {try {is.close (); } catch (ioException e) {}}}} public list <string> findDatalist (String str) {list <string> data = new ArrayList <string> (); for (String sdata: dataalist) {if (sdata.Contains (str)) {data.add (sdata); }} // pour les données de retour; }} 4. index.jsp, affichage de la page
<% @ page Language = "Java" import = "java.util. *" Pageencoding = "utf-8"%> <html> <ead> <link rel = "Stylesheet" href = "css / my.css"> <script type = "text / javascript" src = "js / my.js"> </ script> <img src = "img / baidu.png"> <! - Input Box -> <input type = "text" size = "50" id = "keyword" onkeyup = "getMoreContents ()" onBlur = "keywordblur ()" onfocus = "getMoreContents ()" /> <Input id = "Button" Button "bouton" value "value =" baidU " zone -> <div id = "popDiv"> <table id = "content-table" bgcolor = "# fffafa" cellpacing = "0" cellpadding = "0"> <tbody id = "contenu_table_body"> <! - Les données qui sont demandes dynamiquement sont affichées ici -> </tbody> </ table> </v> </ / body> </ html>
5. My.js, la partie centrale de l'Ajax
var xmlhttp; // 1. Fonction Fonction Pour obtenir les informations associées de la fonction de contenu de l'entrée utilisateur getMoreContents () {// Obtenez d'abord le contenu Var Inverse Var = Document.GetElementById ("Mot-clé"); if (content.value == "") {// Lorsque la zone d'entrée est vide, effacez les données précédentes clearContent (); retour; } //alert(Content.Value); // 2. Ensuite, vous souhaitez envoyer le contenu d'entrée de l'utilisateur au serveur, car nous utilisons AJAX pour envoyer des données de manière asynchrone, nous devons donc utiliser l'objet XMLHTTP // xmlhttp = obtenir l'objet XMLHTTP; xmlHttp = createExmlHttp (); // alerte (xmlHTTP); // 3. Pour envoyer des données sur le serveur, définissez d'abord l'adresse d'un serveur, varrl = "search? Keyword =" + Escape (content.value); // Vrai signifie que le script JavaScript continuera d'être exécuté après la méthode Send (), sans attendre de réponse du serveur. xmlhttp.open ("get", url, true); // xmlhttp lie une méthode de rappel. Cette méthode de rappel sera appelée lorsque l'état XMLHTTP modifie // État XMLHTTP: 0-4, nous ne nous soucions que de 4 (complet), il est donc significatif d'appeler la fonction de rappel après la fin. xmlhttp.onreadystateChange = callback; // Les paramètres sont déjà dans l'URL, vous n'avez donc pas besoin d'ajouter le paramètre xmlhttp.send (null); } // Obtenez la fonction d'objet XMLHTTP CreateExmlHttp () {// var xmlhttp qui convient à la plupart des navigateurs; if (window.xmlhttpRequest) {xmlhttp = new xmlHttpRequest (); } // Considérons la compatibilité du navigateur if (window.activexObject) {xmlhttp = new activeXObject ("Microsoft.xmlhttp"); // Si le navigateur a un objet ActiveXObject, mais n'a pas de paramètre Microsoft.xmlhttp if (! Xmlhttp) {xmlhttp = new activeXObject ("msxml2.xmlhttp"); }} return xmlhttp; } // Fonction de rappel Fonction callback () {// 4 signifie complétion if (xmlhttp.readystate == 4) {// 200 signifie la réponse du serveur réussie, 404 signifie non trouvé, 500 signifie l'erreur interne du serveur if (xmlhttp.status == 200) {// L'interaction est réussie, et les données correspondantes sont obtenues, ce qui est dans le format de texte. var result = xmlhttp.ResponSeText; // Analyse des données obtenues var JSON = evalent ("(" + résultat + ")"); // Après avoir obtenu ces données, vous pouvez afficher les données dynamiquement. Affichez ces données sous la zone d'entrée. // alerte (JSON); SetContent (JSON); }}} // Définissez l'affichage des données associées. Les paramètres représentent la fonction de données associée setContent (contenu) {// effacer les données précédentes clearContent (); // définit la position setLocaltion (); // Obtenez d'abord la longueur des données associées pour déterminer le nombre de <tr> </tr> var size = contente.length; // Définit le contenu pour (var i = 0; i <size; i ++) {var nextNode = contenu [i]; // représente le i-th element de JSON Data var Tr = document.CreateElement ("tr"); var td = document.CreateElement ("TD"); td.setAttribute ("Borde", "0"); td.setAttribute ("gbcolor", "# fffafa"); // lier deux styles pour TD (événements lorsque la souris entre et se déplace) td.onMouseOver = function () {this.classname = 'MouseOver'; }; td.onmouseout = function () {this.classname = 'muouseout'; }; td.onclick = function () {// Cette méthode implémente que lorsque des données connexes sont cliquées avec la souris, les données associées sont automatiquement remplies dans la zone d'entrée. }; td.onmousedown = function () {// Lorsque la souris clique sur une donnée associée, les données seront automatiquement ajoutées au document de boîte d'entrée.getElementById ("mot-clé"). Value = this.InnerText; }; // Lorsque la souris est suspendue sur les données associées, elle sera automatiquement ajoutée à la boîte d'entrée / * td.onmouseOver = function () {this.classname = 'MouseOver'; if (td.InnerText! = null) document.getElementById ("Keyword"). Value = this.InnerText; } * / // Créer un nœud de texte var text = document.createTextNode (nextNode); td.appendChild (texte); Tr.ApendChild (TD); document.getElementById ("Content_Table_Body"). APPENDCHILD (TR); }} // Effacer la fonction de données précédente clearContent () {var tentTableBody = document.getElementById ("contenu_table_body"); var size = contentTableBody.ChildNodes.length; // Lors de la suppression, supprimez du bas en haut pour (var i = size-1; i> = 0; i -) {// spécifiez la suppression du nœud enfant i -th contenu contenuTablebody.removechild (contenuTableBody.ChildNodes [i]); } // effacer le bord extérieur des données associées var popdiv = document.getElementById ("popdiv"). Style.border = "Aucun"; } // Lorsque la zone d'entrée perd le focus, effacez la fonction de données précédente keywordblur () {clearContent (); } // Définissez la position d'affichage de la fonction d'information associée setLocaltion () {// La position d'affichage des informations associées doit être cohérente avec la boîte d'entrée var contenu = document.getElementById ("mot-clé"); var width = content.offsetwidth; // la longueur de la boîte d'entrée var gauche = contenu ["offsetLeft"]; // la distance à la bordure gauche var top = contenu ["offsetop"] + contenu.offsetheight; // la distance à la partie supérieure (plus la hauteur de la zone d'entrée elle-même) // obtenir la div de l'affichage var popdiv = document.getetelementById ("PopDiv"); popdiv.style.border = "Gray 1px solide"; popdiv.style.left = gauche + "px"; popdiv.style.top = top + "px"; popdiv.style.width = width + "px"; popdiv.style.top = top + "px"; popdiv.style.width = width + "px"; document.getElementById ("Content-Table"). style.width = width + "px"; } 6. My.css, style de contrôle
#MyDiv {position: Absolute; Gauche: 50%; en haut: 50%; marge-gauche: -200px; marge: -120px; } #Button {Background-Color: # 5566EE; } .mouseOver {background: # 708090; Couleur: #fffafa; } .mouseout {background: #fffafa; Couleur: # 000000; }Remarque: Ce code vient de l'étude de MOOC.com et a moi-même apporté des améliorations. J'espère que ceux qui sont intéressés peuvent communiquer et apprendre ensemble.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.