1. Introducción a AJAX
Ajax se considera la abreviatura de (JavaScript y XML asíncrono), y la tecnología que permite al navegador comunicarse con el servidor sin actualizar la página actual se llama AJAX.
Por ejemplo: Baidu Search, Mapa en tiempo real, etc. En el modelo AJAX, los datos se transmiten de forma independiente entre el cliente y el servidor. El servidor puede actualizar los datos sin actualizar la página completa;
2. Diagrama de principio de trabajo de Ajax
3. Los métodos correspondientes para enviar y recibir AJAX
1. El método correspondiente para enviar una solicitud
1) Función de manejo de eventos de OnreadyStateChange: esta función es activada por el servidor en lugar del usuario. Cada vez que cambie la propiedad ReadyState, se activará el evento OnreadyStateChange.
2) Abrir (método, URL, asíncronizado): el Open () del objeto xmlhttprequest permite que el programa envíe solicitudes con un servidor de llamadas AJAX. El tipo de solicitud de método puede ser "obtener" o "publicar", y la URL es una cadena de ruta. SysnChronized indica si la solicitud se transmitirá asincrónicamente.
3) Enviar (datos): los datos son una cadena que también se pasará al servidor. Si se selecciona la solicitud "Get", los datos son nulos.
2. Recibe el método correspondiente
1) ReadyState: representa el estado actual de AJAX, representado por un valor numérico, 0 representa la inicialización, 1 representa la carga, 2 representa la carga, 3 representa el servidor está enviando una respuesta, 4 representa la respuesta, y cuando la solicitud se completa, cada navegador establecerá el valor de Readystate a 4;
2) Estado: al igual que en Javaweb, 404 no encontró la página, 403 prohíbe el acceso, 500 error interno del servidor, 200 todo es normal, 304 no se ha modificado, en el objeto xmlhttprequest, el código de estado enviado por el servidor se guarda en el atributo de estado. A través de este valor, podemos asegurarnos de que el servidor haya enviado una respuesta exitosa;
3) ResponseText: contiene los datos enviados desde el servidor, que generalmente es HTML, XML u texto ordinario. Cuando el valor de ReadyState es 4 y el estado es 200, el atributo ResponseText solo se puede usar. En la superficie, la solicitud AJAX ha terminado. Si el servidor devuelve XML, los datos se almacenarán en Responsexml.
4. Demostración del código (imitar el cuadro de búsqueda de Baidu)
1. Cree un proyecto Javaweb (la estructura del directorio del proyecto es la siguiente)
2. Searchservlet.java
Paquete CN.Jon.AJAX; import java.io.ioException; import java.util.list; import javax.servlet.servletException; import javax.servlet.http.httpservlet; import javax.servlet.http.httpservletRequest; import javax.servlet.http.httpservletResponse; importar net.sf.json.jsonarray; import cn.jon.ajax.data.datautils; SearchServlet de clase pública se extiende httpservlet {private static final long serialversionUid = 1l; public void doget (HTTPServletRequest Solicitud, respuesta httpservletResponse) lanza ServletException, ioexception {// Establezca el formato de salida de la solicitud y respuesta a UTF-8 Solicitud. SetcharacterEncoding ("UTF-8"); respuesta.setcharacterEncoding ("UTF-8"); String Keyword = request.getParameter ("Palabra clave"); if (Keyword! = NULL) {dataUtils dataSource = new dataUtils (); List <String> list = dataresource.finddatalist (palabra clave); //System.out.println (jsonArray.FromObject (list) .ToString ()); Response.getWriter (). Write (JSonArray.FromObject (List) .ToString ()); }} public void dopost (httpservletRequest solicitud, respuesta httpservletResponse) arroja servletException, ioexception {doget (solicitud, respuesta); }} 3. DataUtils.java, lea datos en el archivo de recursos
paquete cn.jon.ajax.data; import java.io.bufferedReader; import java.io.ioException; import java.io.inputstream; import java.io.inputstreamreader; import java.util.arrayList; import java.util.list; clase pública DataUtils {Lista estática privada <String> DataList = new ArrayList <String> (); public static final String url = "/test.txt"; estática {readresource (url); // dataList.add ("aa"); // dataList.Add ("AJAX"); // dataList.add ("afinal"); // dataList.add ("BB"); } // public static void readresource (url de cadena) {inputStream is = null; InputStreamReader isr = null; BufferedReader BR = NULL; Línea de cadena = nulo; Prueba {IS = dataUtils.class.getClassLoader (). GetResourceasstream (url); isr = new InputStreamReader (is); Br = nuevo BufferedReader (ISR); línea = br.readline (); while (null! = line) {if (! line.isEmpty ()) {dataList.Add (línea); } línea = br.readline (); } // while} catch (ioException e) {E.PrintStackTrace (); } finalmente {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) {}}}} Lista pública <String> FindDatalist (String Str) {list <String> data = new ArrayList <String> (); for (string sData: dataList) {if (sdata.contains (str)) {data.add (sdata); }} // para datos de retorno; }} 4. Index.jsp, pantalla de página
<%@ page lenguaje = "java" import = "java.util.*" pageEncoding = "utf-8"%> <html> <head> <link rel = "stylesheet" href = "css/my.css"> <script type = "text/javaScript" src = "js/my.js"> </script> </head> <sad </head> <bead> </heal id = "myDiv"> <img src = "img/baidu.png"> <!-Input box-> <input type = "text" size = "50" id = "palabra clave" onkeyup = "getMorecontents ()" onblur = "keyBlur ()" onfocus = "getMoContentent ()"/> <input id = "Botón" Tipo "Tipo" <
5. My.js, la parte central de Ajax
var xmlhttp; // 1. Función función para obtener la información asociada de la función de contenido de entrada del usuario getMorecontents () {// primero obtenga la entrada del usuario var content = document.getElementById ("palabra clave"); if (content.value == "") {// Cuando el cuadro de entrada está vacío, borre los datos anteriores ClearContent (); devolver; } //alert(content.Value); // 2. Luego, desea enviar el contenido de entrada del usuario al servidor, porque usamos AJAX para enviar datos de forma asincrónica, por lo que debemos usar el objeto XMLHTTP // xmlhttp = get xmlhttp object; xmlhttp = createExmlhttp (); // alerta (xmlhttp); // 3. Para enviar datos al servidor, primero defina la dirección de un servidor, var url = "búsqueda? Palabra clave ="+Escape (content.value); // Verdadero significa que el script JavaScript continuará ejecutándose después del método send (), sin esperar una respuesta del servidor. xmlhttp.open ("get", url, verdadero); // xmlhttp une un método de devolución de llamada. Este método de devolución de llamada se llamará cuando el estado XMLHTTP cambia // estado xmlhttp: 0-4, solo nos importa aproximadamente 4 (completos), por lo que solo es significativo llamar a la función de devolución de llamada después de completar. xmlhttp.onreadyStateChange = llamado; // Los parámetros ya están en la URL, por lo que no necesita agregar el parámetro xmlhttp.send (nulo); } // GET XMLHTTP Función del objeto CreateExmlHttp () {// var xmlhttp que es adecuado para la mayoría de los navegadores; if (window.xmlhttprequest) {xmlhttp = new xmlhttprequest (); } // Considere la compatibilidad del navegador if (Window.activexObject) {xmlhttp = new ActiveXObject ("Microsoft.xmlhttp"); // Si el navegador tiene objeto ActiveXObject, pero no tiene parámetro Microsoft.xmlhttp if (! Xmlhttp) {xmlhttp = new ActiveXObject ("msxml2.xmlhttp"); }} return xmlhttp; } // Función de devolución de devolución de llamada Callback () {// 4 significa finalizar si (xmlhttp.readyState == 4) {// 200 significa respuesta de servidor exitosa, 404 significa no encontrado 500 significa error interno de servidor if (xmlhttp.status == 200) {// La interacción es exitosa, y los datos correspondientes se obtienen, que está en el formato de texto. resultado var = xmlhttp.esponsetext; // análisis de los datos obtenidos var json = eval ("("+resultado+")"); // Después de obtener estos datos, puede mostrar los datos dinámicamente. Muestre estos datos debajo del cuadro de entrada. // alerta (JSON); setContent (json); }}} // Establezca la visualización de datos asociados. Los parámetros representan la función de datos asociada setContent (contenido) {// borrar los datos anteriores clearContent (); // establece la posición setLocaltion (); // Primero obtenga la longitud de los datos asociados para determinar cuántos <tr> </tr> var size = contents.length; // Establecer el contenido para (var i = 0; i <size; i ++) {var nextNode = contents [i]; // representa el elemento i-th de los datos json var tr = document.createElement ("tr"); var td = document.createElement ("td"); td.SetAttribute ("Borde", "0"); td.SetAttribute ("gbcolor", "#fffafa"); // unir dos estilos para TD (eventos cuando el mouse entra y se mueve) td.onmouseover = function () {this.classname = 'mouseover'; }; td.onmouseOut = function () {this.classname = 'mouseout'; }; td.OnClick = function () {// Este método implementa que cuando se hace clic en los datos relacionados con el mouse, los datos asociados se llenan automáticamente en el cuadro de entrada. }; td.OnMousEdown = function () {// Cuando el mouse hace clic en un datos asociados, los datos se agregarán automáticamente al cuadro de entrada documento.getElementById ("palabra clave"). valor = this.inntext; }; // Cuando el mouse se suspende en los datos asociados, se agregará automáticamente al cuadro de entrada/* td.onmouseover = function () {this.classname = 'mouseover'; if (td.inntext! = null) document.getElementById ("palabra clave"). valor = this.inntext; } */// crea un nodo de texto var text = document.createTextNode (nextNode); td.appendChild (texto); Tr.AppendChild (TD); document.getElementById ("content_table_body"). appendChild (tr); }} // Borrar la función de datos anterior ClearContent () {var contentTableBody = document.getElementById ("content_table_body"); var size = contentTableBody.childNodes.length; // Al eliminar, elimine de abajo hacia arriba para (var i = size-1; i> = 0; i-) {// Especifique la eliminación del i-th Child Node ContentTableBody.RemoVechild (contentTableBody.childnodes [i]); } // Borrar el borde exterior de los datos asociados var popDiv = document.getElementById ("PopDiv"). Style.border = "Ninguno"; } // Cuando el cuadro de entrada pierde el enfoque, borre la función de datos anterior Keywordblur () {clearContent (); } // Establezca la posición de mostrar la función de información asociada setLocaltion () {// La posición de visualización de la información asociada debe ser consistente con el cuadro de entrada var content = document.getElementById ("palabra clave"); var width = content.offsetWidth; // La longitud del cuadro de entrada var izquierda = content ["offsetleft"]; // La distancia al borde izquierdo var top = content ["offsettop"]+content.offsetheight; // la distancia a la parte superior (más la altura del cuadro de entrada en sí) // Obtener el division de los datos de la pantalla PopDiv = document.getElementByid ("PopDiv"); popDiv.style.border = "Gray 1px Solid"; popDiv.style.left = Left+"Px"; popDiv.style.top = top+"px"; popDiv.style.width = ancho+"px"; popDiv.style.top = top+"px"; popDiv.style.width = ancho+"px"; document.getElementById ("content-table"). style.width = width+"px"; } 6. my.css, estilo de control
#mydiv {posición: absoluto; Izquierda: 50%; arriba: 50%; margen izquierda: -200px; margen -top: -120px; } #Button {Background-Color: #5566ee; }. Mouseover {fondo: #708090; Color: #fffafa; } .MouseOut {fondo: #fffafa; Color: #000000; }Nota: Este código proviene del estudio de MOOC.com y ha realizado mejoras yo mismo. Espero que aquellos que estén interesados puedan comunicarse y aprender juntos.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.