Ajax (asynchronousjavascriptandxml) javascript y xml asincrónicos.
Es para resolver las deficiencias del modelo "enviar solicitud-esperar respuesta" en las aplicaciones web tradicionales (después de enviar la solicitud, el navegador solo puede esperar la respuesta del servidor. El usuario no puede realizar otras operaciones. Después de que el navegador envía la respuesta). solicitud, abandonará toda la página y esperará a que el servidor devuelva una nueva página. En otras palabras, la cantidad de datos que interactúan entre el navegador y el servidor es muy grande y los datos no se pueden obtener a pedido. es: a través de un Un objeto (XmlHttpRequest) integrado en el navegador envía una solicitud al servidor de forma asincrónica.
El llamado asíncrono significa que el navegador no abandona toda la página, es decir, no envía datos al servidor mediante el envío del formulario. Después de que el servidor procesa la solicitud, devuelve los datos al objeto XmlHttpRequest y los datos. en XmlHttpRequest se puede obtener a través de javascript. Luego, use estos datos para actualizar la página Durante todo el proceso, el usuario no tiene que esperar una respuesta del servidor.
Descripción: Tecnología de transmisión asincrónica de páginas web. Un método para comunicarse con el servidor sin actualizar toda la página. Mientras espera la transmisión de la página web, el usuario aún puede interactuar con el sistema y la página puede actualizar el contenido sin actualizar. El uso razonable puede permitir que se sienta mejor y más conveniente para los usuarios, pero no abuse de él.
Sincrónico y asincrónico
La sincronización se refiere al método de comunicación en el que el remitente envía datos y espera a que el receptor envíe una respuesta antes de enviar el siguiente paquete de datos.
Por ejemplo, sincronización: enviar solicitud -> esperar el procesamiento del servidor -> regresar después del procesamiento. Durante este período, el navegador del cliente no puede hacer nada. Asincrónico significa: después de que el remitente envía los datos, no espera a que el receptor envíe un mensaje. respuesta y luego envía el siguiente paquete de datos.
Por ejemplo, asíncrono: la solicitud es activada por un evento -> procesada por el servidor (el navegador aún puede hacer otras cosas en este momento) -> procesada.
Objeto importante de AjaxXMLHttpRequest
Objeto importante de Javascript, a través del cual se pueden realizar solicitudes al servidor. Las solicitudes se pueden realizar a través de Javascript. Si se van a realizar varias solicitudes, se requieren varios objetos XHR. El resultado de la solicitud se procesa mediante un método predefinido.
Cómo crear un objeto XmlHttpRequest
función getXmlHttpRequest(){
var xmlHttpRequest = nulo;
if ((tipo de XMLHttpRequest)! = 'indefinido') {
//navegador no ie
xmlHttpRequest = nuevo XMLHttpRequest();
}demás {
//es decir, navegador
xmlHttpRequest = nuevo ActiveXObject('Microsoft.XMLHttp');
}
devolver xmlHttpRequest;
}
o
función crearXmlHttpRequest(){
var xmlHttpRequest = nulo;
si(ventana.ActiveXObject){
xmlHttpRequest = nuevo AvtiveXObject("Microsoft.XMLHTTP");
}si no (ventana.XMLHttpRequest){
xmlHttpRequest = nuevo XMLHttpRequest();
}
}
Propiedades importantes del objeto xmlHttpRequest.
ResponseXml: obtiene los datos xml de la respuesta del servidor.
estado: obtiene el código de estado devuelto por el servidor (como 200)
readyState: obtiene el estado de comunicación entre xmlHttpRequest y el servidor (0, 1, 2, 3, 4, que describen diferentes estados respectivamente).
(Sin inicializar): el objeto se ha creado, pero no se ha inicializado (aún no se ha llamado al método abierto)
(Inicialización): el objeto ha sido creado y aún no se ha llamado al método de envío.
(Enviar datos): se ha llamado al método de envío, pero se desconocen el estado actual y el encabezado http
(Transmisión de datos en curso): Se han aceptado datos parciales.
(Fin de la respuesta): En este punto, los datos se pueden obtener a través de ResponseText/ResponseXml.
Un ejemplo de aplicación implementada por una persona que usa Ajax
Captura de pantalla del sistema
Descripción del sistema:
Diagrama de estructura del sistema
Mostrar la página principal Register.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transicional//ES">
<html>
<cabeza>
<title>Registro de usuario</title>
<enlace href="css/regist.css" rel="hoja de estilo" tipo="texto/css" />
<script src="js/regist_ajax.js" tipo="text/javascript"></script>
</cabeza>
<cuerpo onload="getRegistRuleTxt(),getCheckcode()">
<formulario action="regist.do" onsubmit="devolver cheque(esto);">
<table bordercolor="gris" cellpadding="6" align="center">
<tr>
<tdcolspan="2">
>> <font color="red">Registro de usuario</font>
<font color="gray">[Descripción del módulo: verificación de nombre de usuario, uso de términos de servicio, procesamiento asincrónico Ajax, generación de servidor de código de verificación]</font>
</td>
</tr>
<tr>
<td align="derecha">
nombre de usuario:
</td>
<td>
<tipo de entrada="texto" nombre="nombre de usuario" id="nombre de usuario" onblur="postValidate()"/>
<span style="color:orange" id="checkMsg" > * El nombre de usuario consta de letras, números y guiones bajos.</span>
</td>
</tr>
<tr>
<td align="derecha">
contraseña:
</td>
<td>
<tipo de entrada="contraseña" nombre="contraseña" id="contraseña">
<span style="color:orange" id="pwdMsg" > * La longitud de la contraseña es de 6 a 8 caracteres, se deben evitar los formatos únicos.</span>
</td>
</tr>
<tr>
<td align="derecha">
Confirmar Contraseña:
</td>
<td>
<tipo de entrada="contraseña" nombre="contraseña" id="contraseña">
<span style="color:orange" id="repwdMsg" > * Confirma la contraseña para asegurarte de que no cometiste ningún error al configurarla</span>
</td>
</tr>
<tr>
<td align="derecha">
Correo:
</td>
<td>
<tipo de entrada="texto" id="correo electrónico" nombre="correo electrónico">
<span style="color:orange" id="emailMsg" > * Introduce tu dirección de correo electrónico habitual para que podamos contactar contigo.</span>
</td>
</tr>
<tr>
<td align="derecha">
Código de verificación:
</td>
<td>
<tipo de entrada="texto" id="código de verificación">
<img id="ckcodeimage" src="imgsrc" style="border:solid #92CEDB 1px "> <!-- Código de verificación-->
<a href="javascript:;" onclick="getCheckcode()">No puedo ver con claridad, cambie otro</a>
<span estilo="color:naranja" id="ckcodeMsg" > </span>
</td>
</tr>
<tr>
<td align="derecha">
Términos de servicio:
</td>
<td>
<textarea rows="5" cols="48" style="margin-bottom:6px;margin-left:5px; color:gris" readonly="readonly" id="item" >
</textarea>
</td>
</tr>
<tr>
<td align="derecha">
</td>
<td>
<input type="submit" value="Acepta los términos y regístrate"/>
</td>
</tr>
</tabla>
<div align="centro">
Copyright (c) 2013 Su Ruonian ( <a href="mailto:[email protected]">Contáctenos:[email protected]</a> )
corporación Todos los derechos reservados.
</div>
</formulario>
</cuerpo>
</html>
/*
Cree un método para obtener el objeto xmlHttpRequest
*/
función getXmlHttpRequest(){
var xmlHttpRequest = nulo;
if((tipo de XMLHttpRequest) != 'indefinido'){
/*Los navegadores que no son IE crean objetos XMLHttpRequest*/
xmlHttpRequest = nuevo XMLHttpRequest();
}demás{
/*El navegador IE crea un objeto XMLHttpRequest*/
xmlHttpRequest = nuevo ActiveXObject('Microsoft.XMLHttp');
}
devolver xmlHttpRequest;
}
/*
Evento de respuesta del código de verificación
*/
función getCheckcode(){
var codeimage = document.getElementById("ckcodeimage");
var url = "checkcode.do";
codeimage.src=addTimestamp(url);
}
/*
Usando Ajax para obtener términos de servicio
*/
función getRegistRuleTxt(){
var elemento = document.getElementById("elemento");
var url = "rulesText.do";
// Resuelva el problema de codificación china al enviar en modo de obtención. Utilice encodeURI(url).true para indicar que la solicitud se envía de forma asincrónica y addTimestamp(url) evita el almacenamiento en caché del navegador.
xmlHttpRequest.open("publicación",encodeURI(url),true);
xmlHttpRequest.setRequestHeader("Tipo de contenido","aplicación/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=función(){
si(xmlHttpRequest.readyState == 4){
si(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
item.value=respTexto;
}demás{
//Error del sistema.
item.value="error del sistema";
}
}demás{
//Mostrar comprobando...
item.value="cargando...";
}
};
xmlHttpRequest.send(nulo);
}
/*
Utilice el método get para verificar
*/
función obtenerValidar(){
var nombre de usuario = document.getElementById("nombre de usuario");
var url = "validatename.do?username=" + nombre de usuario.valor;
// Resuelva el problema de codificación china al enviar en modo de obtención. Utilice encodeURI(url).true para indicar que la solicitud se envía de forma asincrónica y addTimestamp(url) evita el almacenamiento en caché del navegador.
xmlHttpRequest.open("obtener",encodeURI(addTimestamp(url)),true);
//Llama al método para comprobar el estado de la devolución.
xmlHttpRequest.onreadystatechange=devolución de llamada;
xmlHttpRequest.send(nulo);
}
/*
Utilice el método de publicación para verificar
*/
función postValidar(){
var nombre de usuario = document.getElementById("nombre de usuario");
var url = "validarnombre.do";
// verdadero significa usar un método asincrónico para enviar la solicitud. El valor predeterminado es verdadero y el método de solicitud puede ser obtener, publicar, colocar y eliminar.
xmlHttpRequest.open('publicación',url,verdadero);
xmlHttpRequest.setRequestHeader("Tipo de contenido","aplicación/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=devolución de llamada;
// Si hay varios parámetros, use el símbolo & para vincular pares clave-valor y escape para resolver problemas chinos
xmlHttpRequest.send('nombre de usuario=' + escape(nombre de usuario.valor));
}
/*
Método de devolución del estado de monitoreo
*/
devolución de llamada de función(){
si(xmlHttpRequest.readyState == 4){
si(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
internalHtmlMsg(respText);
}demás{
//Error del sistema.
internalHtmlMsg("error");
}
}demás{
//Mostrar comprobando...
internalHtmlMsg("comprobando");
}
}
/*
Agregue una marca de tiempo para evitar el almacenamiento en caché del navegador. El almacenamiento en caché del navegador solo almacena en caché el método get.
*/
función agregarMarca de hora(url){
si(url.indexOf("?")!=-1){
//Si hay parámetros
return url+"×tamp=" + nueva Fecha().valueOf();
}demás{
//sin parámetros
return url+"?timestamp=" + nueva fecha().valueOf();
}
}
función internalHtmlMsg(mensaje){
var checkMsg = document.getElementById("checkMsg");
si(mensaje=='existe'){
//El nombre de usuario existe
checkMsg.innerHTML= "<font color='red'>* Lo sentimos, el nombre de usuario ya existe.</font>";
}
si(mensaje=='noexiste'){
//Se puede utilizar el nombre de usuario
checkMsg.innerHTML= "<font color='green'>* Felicitaciones, el nombre de usuario está disponible.</font>";
}
if(mensaje=='comprobando'){
//Comprobación del sistema
checkMsg.innerHTML= "<font color='#0099aa'>* El sistema está comprobando datos...</font>";
}
si(mensaje=='error'){
//Error del sistema
checkMsg.innerHTML= "<font color='red'>Fallo del sistema, verifique la red o <a href='#'>Contáctenos</a></font>";
}
}
} /* Defina el ancho general y el estilo del borde de la tabla, y defina el estilo de todo el texto de la tabla */
.izquierda{
peso de fuente: 500;
color:#708899;
relleno-derecha: 20px;
color de fondo: #D6ECF5;
}
.inpt {
borde: sólido #92CEDB 1px;
ancho: 210 píxeles;
altura: 22 píxeles;
margen izquierdo: 10px;
}
.derechos{
margen superior: 20px;
color:#708899;
tamaño de fuente: 12px;
}
<servlet>
<nombre-servlet>ServletUsuario</nombre-servlet>
<servlet-clase>com.webapp.servlet.UserServlet</servlet-clase>
<parámetro-inicio>
<param-name>ruta del archivo de reglas</param-name>
<valor-param>/txt/item.txt</valor-param>
</init-param>
</servlet>
<mapeo-servlet>
<nombre-servlet>ServletUsuario</nombre-servlet>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<lista-de-archivos-de-bienvenida>
<archivo-de-bienvenida>regist.jsp</archivo-de-bienvenida>
</lista-de-archivos-de-bienvenida>
</aplicación web>
importar java.awt.Color;
importar java.awt.Font;
importar java.awt.Graphics;
importar java.awt.image.BufferedImage;
importar java.util.HashMap;
importar java.util.Map;
importar java.util.Random;
/**
*
* @versión: 1.1
*
* @autor: Su Ruonian<a href="mailto:[email protected]">Enviar correo electrónico</a>
*
* @since: 1.0 Hora de creación: 2013-1-20 04:26:52 pm
*
* @función: TODO
*
*/
clase pública CheckCodeImageUtil {
cadena final estática privada [] caracteres = { "0", "1", "2", "3", "4", "5", "6",
"7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I" };
private static final int TAMAÑO = 4 // El número de caracteres en el código de verificación.
private static final int LINES = 4 //número de líneas de interferencia
private static final int WIDTH = 110 // Ancho de la imagen del código de verificación
private static final int HEIGHT = 40 // Altura de la imagen del código de verificación
private static final int FONT_SIZE = 21 //Tamaño de fuente en el código de verificación
/**
* Generar código de verificación
*
* @return Map<valor del código de verificación, imagen del código de verificación>
*
*/
Mapa estático público<String,BufferedImage> creatCheckImage(){
//Guarda la cadena que genera el valor verdadero del código de verificación
Búfer StringBuffer = nuevo StringBuffer();
//Objeto de imagen personalizado
Imagen BufferedImage = nueva Imagen Buffered(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);
Mapa<String,BufferedImage> mapa = nuevo HashMap<String,BufferedImage>();
Gráficos gráficos = image.getGraphics();
gráficos.setColor(Color.BLANCO);
gráficos.fillRect(0, 0, ANCHO, ALTO);
Aleatorio aleatorio = nuevo Aleatorio();
//Dibujar personajes aleatorios
para(int i=0; i<TAMAÑO; i++){
//Obtener un elemento del juego de caracteres definido
int rand = random.nextInt(chars.length);
gráficos.setColor(randomColor());
gráficos.setFont(nueva fuente(null,Font.BOLD+Font.ITALIC,FONT_SIZE));
gráficos.drawString(caracteres[rand],(i)*ANCHO/TAMAÑO+8, ALTO/2+10);
buffer.append(chars[rand]); //Guarde la cadena generada en el búfer y úsela para compararla con el valor ingresado por el usuario cuando lo obtenga en el futuro.
}
//Dibujar líneas de interferencia
for(int i=1;i<=LINEAS;i++){
gráficos.setColor(randomColor());
gráficos.drawLine(random.nextInt(ANCHO), random.nextInt(ALTO), random.nextInt(ANCHO),random.nextInt(ALTO));
si(i==LINEAS){
gráficos.setFont(nueva fuente(null,Font.ITALIC,13));
gráficos.setColor(Color.GRIS);
gráficos.drawString("Su Ruonian Studio", 5,15);
}
}
map.put(buffer.toString(), imagen);
mapa de regreso;
}
/**
* El color se generará inmediatamente.
* @devolver
*/
Color estático público color aleatorio(){
Aleatorio aleatorio = nuevo Aleatorio();
Color color = nuevo Color(random.nextInt(256),random.nextInt(256),random.nextInt(256));
color de retorno;
}
}
importar java.awt.image.BufferedImage;
importar java.io.BufferedReader;
importar java.io.ByteArrayInputStream;
importar java.io.ByteArrayOutputStream;
importar java.io.File;
importar java.io.FileReader;
importar java.io.FileWriter;
importar java.io.IOException;
importar java.io.InputStream;
importar java.io.PrintWriter;
importar java.util.List;
importar java.util.Map;
importar java.util.Vector;
importar javax.imageio.ImageIO;
importar javax.servlet.ServletException;
importar javax.servlet.ServletOutputStream;
importar javax.servlet.http.HttpServlet;
importar javax.servlet.http.HttpServletRequest;
importar javax.servlet.http.HttpServletResponse;
importar com.sun.image.codec.jpeg.JPEGCodec;
importar com.sun.image.codec.jpeg.JPEGImageEncoder;
importar com.sun.imageio.plugins.common.ImageUtil;
importar com.webapp.util.CheckCodeImageUtil;
UserServlet de clase pública extiende HttpServlet {
Lista privada<Cadena> Lista de usuarios;
Cadena privada txtFilePath = nulo;
public void init() lanza ServletException {
txtFilePath = this.getInitParameter("rulesfilepath");
// Simular base de datos
lista de usuarios = nuevo Vector<String>();
lista de usuarios.add("zhangsan");
lista de usuarios.add("lisi");
lista de usuarios.add("wangwu");
lista de usuarios.add("zhaoliu");
}
public void doGet (solicitud HttpServletRequest, respuesta HttpServletResponse)
lanza ServletException, IOException {
hacerPublicar(solicitud, respuesta);
}
public void doPost (solicitud HttpServletRequest, respuesta HttpServletResponse)
lanza ServletException, IOException {
Cadena uri = request.getRequestURI();
Ruta de cadena = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(ruta.equals("/validarnombre")){
request.setCharacterEncoding("utf-8");
respuesta.setContentType("text/html;charset=utf-8");
intentar {
Hilo.dormir(3000);
} captura (Excepción interrumpida e) {
e.printStackTrace();
}
//El sistema de simulación genera una prueba de excepción.
/*si(1==2){
lanzar una nueva ServletException ("algún error");
}*/
Cadena nombre de usuario = request.getParameter("nombre de usuario");
System.out.println("nombre de usuario:" + nombre de usuario);
// Simular consulta de datos del usuario
booleano existe = lista de usuarios.contiene (nombre de usuario);
si(existe){
respuesta.getWriter().print("existe");
}demás{
respuesta.getWriter().print("noexiste");
}
}
if(ruta.equals("/rulesText")){
request.setCharacterEncoding("utf-8");
respuesta.setContentType("text/html;charset=utf-8");
Cadena filePath = this.getServletContext().getRealPath(txtFilePath);
Archivo archivo = nuevo Archivo (filePath);
Búfer StringBuffer = nuevo StringBuffer();
intentar {
Lector BufferedReader = nuevo BufferedReader (nuevo FileReader (archivo));
Cadena tmp = "";
mientras((tmp = lector.readLine())!=null){
buffer.append(new String(tmp.getBytes("gbk"),"utf8")).append("/n");
}
lector.close();
} captura (Excepción e) {
e.printStackTrace();
}
si(buffer.toString().trim()!=null){
respuesta.getWriter().print(buffer.toString());
}
}
if(ruta.equals("/código de verificación")){
respuesta.setContentType("imagen/jpeg");
Mapa<Cadena, Imagen Buffered> mapa = CheckCodeImageUtil.creatCheckImage();
Clave de cadena = (Cadena)map.keySet().iterator().next();
request.getSession().setAttribute("código",clave);
System.out.println("checkcode = " + request.getSession().getAttribute("código"));
Imagen BufferedImage = map.get(clave);
ImageIO.write(imagen, "jpeg", respuesta.getOutputStream());
}
}
}