1. Einführung in Ajax
Ajax wird als Abkürzung von (asynchronem JavaScript und XML) angesehen, und die Technologie, mit der der Browser mit dem Server kommunizieren kann, ohne die aktuelle Seite zu aktualisieren, heißt AJAX.
ZB: Baidu-Suche, Echtzeitkarte usw. Im AJAX-Modell werden Daten unabhängig zwischen dem Client und dem Server übertragen. Der Server kann die Daten aktualisieren, ohne die gesamte Seite zu aktualisieren.
2. Ajax -Arbeitsprinzip -Diagramm
3. Die entsprechenden Methoden zum Senden und Empfangen von Ajax
1. Die entsprechende Methode zum Senden einer Anfrage
1) ONREadyStatEchange -Ereignishandhabungsfunktion: Diese Funktion wird eher vom Server als vom Benutzer ausgelöst. Jedes Mal, wenn sich die ReadyState -Eigenschaft ändert, wird das OnReadyStatechange -Ereignis ausgelöst.
2) Öffnen (Methode, URL, Asynchronisiert): Mit dem Open () des XMLHTTPREquest -Objekts kann das Programm Anforderungen mit einem AJAX -Call -Server senden. Der Methodenanforderungstyp kann "get" oder "post" sein, und die URL ist eine Pfadzeichenfolge. Sysnchronisiert gibt an, ob die Anfrage asynchron übertragen werden soll.
3) Senden (Daten): Daten sind eine Zeichenfolge, die auch an den Server übergeben wird. Wenn die Anforderung "GET" ausgewählt ist, sind die Daten null.
2. Empfangen Sie die entsprechende Methode
1) ReadyState: Repräsentiert den aktuellen Status von AJAX, der durch einen numerischen Wert dargestellt wird, 0 repräsentiert die Initialisierung, 1 repräsentiert das Laden, 2 repräsentiert das Laden, 3 repräsentiert, dass der Server eine Antwort sendet, 4 repräsentiert die Antwort, und wenn die Anforderung abgeschlossen ist, setzt jeder Browser den Wert von ReadyState auf 4.
2) Status: Wie in Javaweb hat 404 nicht festgestellt, dass die Seite 403 Zugriff verbietet, 500 interner Serverfehler, 200 alles ist normal, 304 wurde im XMLHTTPREquest -Objekt nicht geändert. Der vom Server gesendete Statuscode wird im Statusattribut gespeichert. Durch diesen Wert können wir sicherstellen, dass der Server eine erfolgreiche Antwort gesendet hat.
3) Responsext: Enthält die vom Server gesendeten Daten, die im Allgemeinen HTML, XML oder normaler Text sind. Wenn der Wert von ReadyState 4 und Status 200 beträgt, kann das Responsext -Attribut nur verwendet werden. An der Oberfläche ist die AJAX -Anfrage beendet. Wenn der Server XML zurückgibt, werden die Daten als Antwortxml gespeichert.
4. Codedemonstration (Baidu -Suchfeld imitieren)
1. Erstellen Sie ein Javaweb -Projekt (die Projektverzeichnisstruktur lautet wie folgt).
2. SearchServlet.java
Paket cn.jon.ajax; importieren java.io.ioException; importieren java.util.list; importieren javax.servlet.servletException; import Javax.servlet.http.httpServlet; importieren javax.servlet.http.httpServletRequest; importieren javax.servlet.http.httpServletResponse; import net.sf.json.jsonArray; import cn.jon.ajax.data.datautils; Public Class SearchServlet erweitert httpServlet {private statische endgültige lange Serialversionuid = 1L; public void dodget (httpServletRequest request, httpServletResponse-Antwort) löst ServletException aus, IOException {// Setzen Sie das Ausgabeformat der Anforderung und Antwort auf die UTF-8-Anforderung. response.setcharactercoding ("utf-8"); String keyword = request.getParameter ("Schlüsselwort"); if (keyword! Liste <String> list = datAresource.findDatalist (Schlüsselwort); //System.out.println (jsonArray.fromObject (Liste) .ToString ()); response.getWriter (). Schreiben (jsonArray.fromObject (Liste) .ToString ()); }} public void dopost (httpServletRequest -Anforderung, httpServletResponse -Antwort) löst ServletException aus, IOException {dodget (request, response); }} 3.. Datautils.java, Daten unter Ressourcendatei lesen
Paket cn.jon.ajax.data; Import Java.io.BufferedReader; importieren java.io.ioException; importieren java.io.inputstream; importieren java.io.inputStreamReader; Import Java.util.ArrayList; importieren java.util.list; öffentliche Klasse DataUtils {private statische Liste <string> datalist = new ArrayList <string> (); public static final String url = "/test.txt"; static {ReadResource (URL); // datalist.add ("aa"); // datalist.add ("ajax"); // datalist.add ("afinal"); // datalist.add ("bb"); } // public static void ReadResource (String url) {InputStream is = null; InputStreamReader isr = null; BufferedReader BR = NULL; String line = null; try {is = datautils.class.getClassloader (). getResourceAsStream (URL); ISR = neuer InputStreamReader (IS); BR = neuer BufferedReader (ISR); line = br.readline (); while (null! = line) {if (! line } line = br.readline (); } // während} catch (ioException e) {e.printstacktrace (); } endlich {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) {}}}} publiclist <string> findDatalist (string str) {list <string> data = new ArrayList <string> (); für (string sdata: datalist) {if (sdata.contains (str)) {data.add (sdata); }} // für Rückgabedaten; }} 4. Index.jsp, Seitenanzeige
<%@ page Language = "java" import = "java.util. <img src="img/baidu.png" > <!-- Input box--> <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="getMoreContents()"/> <input id="button" type="button" value="Baidu"/> <!-- The following is the content display Bereich-> <divd = "popdiv"> <table id = "content-table" bgcolor = "#fffafa" cellpacing = "0" cellpadding = "0"> <tbody id = "content_table_body"> <!
5. my.js, der Kernteil von Ajax
var xmlhttp; // 1. Funktionsfunktion, um die zugehörigen Informationen der Funktion "Benutzereingabeinhalt) GetMoreContents () {// zuerst den Benutzereingang var content = document.getElementById (" Schlüsselwort ") abzurufen. if (content.Value == "") {// Wenn das Eingabefeld leer ist, löschen Sie die vorherigen Daten löschen (); zurückkehren; } //alert(content.Value); // 2. Anschließend möchten Sie den Inhalt der Benutzereingabe an den Server senden, da wir AJAX verwenden, um Daten asynchron zu senden. Daher müssen wir das XMLHTTP -Objekt // xmlhttp = XMLHTTP -Objekt verwenden. xmlhttp = createxmlHttp (); // alarm (xmlhttp); // 3. Um Daten an den Server zu senden, definieren Sie zuerst die Adresse eines Servers, var url = "such? Keyword ="+Escape (content.Value); // True bedeutet, dass das JavaScript -Skript weiter nach der Send () -Methode ausgeführt wird, ohne auf eine Antwort vom Server zu warten. xmlhttp.open ("get", url, true); // xmlhttp bindet eine Rückrufmethode. Diese Rückrufmethode wird aufgerufen, wenn sich der XMLHTTP-Status ändert // XMLHTTP-Status: 0-4, wir kümmern uns nur um 4 (vollständig). Daher ist es nur aussagekräftig, die Rückruffunktion nach Fertigstellung aufzurufen. xmlhttp.onReadyStatechange = callback; // Die Parameter befinden sich bereits in der URL, sodass Sie den Parameter xmlhttp.send (null) nicht hinzufügen müssen. } // xmlhttp -Objektfunktion createxmlhttp () {// var xmlhttp, das für die meisten Browser geeignet ist; if (window.xmlhttprequest) {xmlhttp = new XmlHttpRequest (); } // Betrachten Sie die Browserkompatibilität if (window.activeXObject) {xmlhttp = new ActiveXObject ("microsoft.xmlhttp"); // Wenn der Browser ein ActiveXObject -Objekt hat, aber nicht microsoft.xmlhttp -Parameter if (! Xmlhttp) {xmlhttp = new ActiveXObject ("msxml2.xmlhttp") hat; }} return xmlhttp; } // Rückruffunktionsfunktion Callback () {// 4 bedeutet Fertigstellung if (xmlhttp.readystate == 4) {// 200 bedeutet erfolgreiche Serverantwort, 404 bedeutet nicht gefunden, 500 bedeutet interner Fehler des Servers. var result = xmlhttp.responsetext; // Analyse der erhaltenen Daten var json = eval ("("+result+")"); // Nach dem Erhalt dieser Daten können Sie die Daten dynamisch anzeigen. Zeigen Sie diese Daten unter dem Eingabefeld an. // alarm (JSON); setContent (JSON); }}} // Legen Sie die Anzeige der zugehörigen Daten fest. Die Parameter repräsentieren die zugehörige Datenfunktionssatzkontent (Inhalt) {// Löschen Sie die vorherigen Daten clearContent (); // Setzen Sie die Position SetLocalion (); // Erhalten Sie zuerst die Länge der zugehörigen Daten, um zu bestimmen, wie viele <tr> </tr> var size = contents.length; // Setzen Sie den Inhalt für (var i = 0; i <size; i ++) {var nextNode = contents [i]; // repräsentiert das i-te Element von json data var tr = document.createelement ("tr"); var td = document.createelement ("td"); td.setattribute ("borde", "0"); td.setattribute ("gbcolor", "#fffafa"); // Binden Sie zwei Stile für TD (Ereignisse, wenn die Maus eintritt und sich auszieht) td.onmouseover = function () {this.className = 'mausover'; }; td.onmouseout = function () {this.className = 'mausout'; }; td.onclick = function () {// Diese Methode implementiert, dass bei Klicken mit der Maus mit der Maus automatisch in das Eingabefeld ausgefüllt wird. }; td.onmouseDown = function () {// Wenn die Maus auf eine zugehörige Daten klickt, werden die Daten automatisch zum Eingabefeld -Dokument hinzugefügt. }; // Wenn die Maus an den zugehörigen Daten suspendiert wird, wird sie automatisch zum Eingabefeld hinzugefügt/* td.onmouseover = function () {this.className = 'mausover'; if (td.InNeText! } */// Erstellen Sie einen Textknoten var text = document.createTextNode (NextNode); td.Appendchild (Text); Tr.Appendchild (TD); document.getElementById ("content_table_body"). appendChild (tr); }} // Löschen Sie die vorherige Datenfunktion clearContent () {var contentTableBody = document.getElementById ("content_table_body"); var size = contentTableBody.childnodes.length; // beim Löschen von unten nach oben für (var i = size-1; i> = 0; i-) {// Löschung des I-ten Knoten-ContentTableBody.removechild (contentTableBody.childnodes [i]) angeben; } // den äußeren Rand der zugehörigen Daten löschen var popdiv = document.getElementById ("popdiv"). Style.border = "Keine"; } // Wenn das Eingabefeld den Fokus verliert, löschen Sie die vorherige Datenfunktionsfunktion von KeywordBlur () {ClearContent (); } // Legen Sie die Position des Anzeigens der zugehörigen Informationsfunktion SetLocalt () {// Die Anzeigeposition der zugehörigen Informationen muss mit dem Eingabefeld var content = document.getElementById ("Keyword") übereinstimmen. var width = content popdiv.style.border = "Gray 1px solide"; popdiv.style.left = links+"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, Kontrollstil
#mydiv {Position: absolut; Links: 50%; Top: 50%; Rand -Links: -200px; Rand: -120px; } #Button {Hintergrundfarbe: #5566ee; } .Mouseover {Hintergrund: #708090; Farbe: #fffafa; } .Mouseout {Hintergrund: #fffafa; Farbe: #000000; }Hinweis: Dieser Code stammt aus der Untersuchung von MOOC.com und hat selbst Verbesserungen vorgenommen. Ich hoffe, diejenigen, die interessiert sind, können gemeinsam kommunizieren und lernen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.