Cómo funciona WEB2.0

Recientemente, el tema más candente en Internet es, por supuesto, la aplicación WEB2.0, y AJAX es uno de los núcleos de WEB2.0. AJAX significa JavaScript y XML asincrónicos. No es un lenguaje o tecnología nueva, en realidad es una combinación de varias tecnologías de alguna manera, desempeñando sus respectivos roles en colaboración con ***, incluido el uso de XHTML y CSS. Representación estandarizada;

Uso DOM para lograr visualización e interacción dinámicas;

Utilice XML y XSLT para el intercambio y procesamiento de datos;

Utilice XMLHttpRequest para lectura de datos asíncrona.

Finalmente, JavaScript es; se utiliza para vincular y procesar todos los datos;

El principio de funcionamiento de Ajax es equivalente a agregar una capa intermedia entre el usuario y el servidor, lo que permite las operaciones del usuario y la respuesta del servidor de forma asincrónica. Esto transfiere parte de la carga del servidor anterior al cliente, lo que facilita que el cliente procese la potencia de procesamiento inactiva, reduce la carga sobre el servidor y el ancho de banda, ahorrando así el espacio del ISP y los costos de alquiler de ancho de banda.

Utilizamos dos ejemplos para verificar la existencia del bono de apertura de cuenta de pase y pago por teléfono móvil, y hablamos de la aplicación de AJAX en la práctica:

(1) Método usando cadenas de texto devuelve la respuesta del servidor para verificar la existencia de la cuenta eBay Pass;

(2) Devuelve la respuesta en forma de objeto XMLDocument para verificar la existencia de la cuenta Gold Pass;

Primero, debemos regresar al cliente para reducir la carga sobre el servidor y el ancho de banda, ahorrando así el espacio del ISP y las tarifas de alquiler de ancho de banda. p>

Primero, necesitamos usar JavaScript para crear una clase XMLHttpRequest para enviar una solicitud HTTP al servidor. Internet Explorer introdujo por primera vez la clase XMLHttpRequest como un objeto ActiveX, llamado XMLHTTP. Más tarde, Mozilla, Netscape, Safari y otros navegadores también proporcionaron la clase XMLHttpRequest, pero crearon la clase XMLHttpRequest de diferentes maneras.

Para Internet Explorer, el método para crear XMLHttpRequest es el siguiente:

xml/register/checkssn.jsp?username=username

Basado en el método anterior , podemos usar la tecnología AJAX para la detección de nombres de usuario en NetEase Passport:

Paso uno: cree una nueva página web basada en el estándar Xhtml e inserte una función Javascript en el área , como se muestra a continuación:

lt;script type="text/javascript" language="javascript" gt;

función getXMLRequester( ){

var xml/register/checkssn. jsp?username=')" /gt;

Luego cree un área en blanco con el mensaje de identificación para mostrar la cadena de retorno (también puede usar la función Javascript para interceptar parte de la cadena para interceptar parte del visualización de cadena):

lt;div id="message"gt;lt;/divgt;

De esta manera, se completa una página de detección de nombre de usuario basada en AJAX, pero esta página devolverá la página de generación de respuesta del servidor. Por supuesto, también puede realizar algunas operaciones en la cadena devuelta para facilitar la aplicación a diferentes necesidades.

Ejemplo 2: en forma de objeto XMLDocument. existencia del sitio web de Sands International Entertainment

En el ejemplo anterior, al recibir la respuesta del servidor a la solicitud HTTP, llamaremos al atributo ResponseText del objeto de solicitud. Este atributo contiene la respuesta devuelta por el servidor. El contenido del documento. Ahora, devolveremos la respuesta en forma de un objeto XMLDocument, por lo que el atributo ResponseText ya no es necesario, pero se utilizará el atributo ResponseXML.

Primero inicie sesión en. En la página de registro de Kingsoft Pass, encontramos la detección de nombre de usuario de Kingsoft Pass:

pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=username y devolvemos datos XML:

.

lt;?xml version="1.0" encoding="UTF-8" standalone="yes" ?gt;

lt;responsegt;

lt;methodgt; isExistedUidlt ;/methodgt;

lt;resultgt;-2lt;/resultgt;

lt;/responsegt;

Cuando el resultado es -1, significa que el nombre de usuario ha sido registrado; cuando el resultado es -2 indica que el nombre de usuario aún no ha sido registrado.

Modifique el código anterior:

Primera búsqueda

document.getElementById('message').innerHTML = xmlhttp_request.responseText;

Leer Obtener:

var respuesta = xmlhttp_request.responseXML.documentElement;

var resultado = respuesta.getElementsByTagName('result')[0].firstChild.data //devuelve el nodo de resultado; datos

if(resultado ==-2){

document.getElementById('message').innerHTML = "Nombre de usuario " document.getElementById('163id').value "No registrado todavía ";

}

else if(result ==-1){

document.getElementById('message').innerHTML = "Lo siento, nombre de usuario " document.getElementById('163id').value "Ya registrado";

}

Los dos ejemplos anteriores ilustran la aplicación básica de AJAX en el lado del cliente, usando NetEase y Los programas del lado del servidor listos para usar de Kingsoft Por supuesto, para desarrollar un programa adecuado para su propia página, también necesita escribir su propio programa del lado del servidor, que incluye lenguaje de programación y operaciones de bases de datos. lectores con cierta base de programación, este artículo se centra en la experiencia de la aplicación AJAX del lado del cliente. Los lectores pueden crear aplicaciones coloridas basadas en los principios de este artículo y combinarlas con varios estilos. Espero que este artículo pueda servir como punto de partida.

Apéndice

(1) Compatibilidad con código de estado HTTP 1.1

100 Continuar La solicitud inicial ha sido aceptada, el cliente debe continuar enviando las solicitudes restantes

101 Cambiar protocolo El servidor cumplirá con la solicitud del cliente y cambiará a un protocolo diferente

200 OK Todo es normal Los documentos de respuesta para las solicitudes GET y POST son los siguientes.

201 Creado El servidor ha creado el documento y el encabezado Ubicación proporciona la URL del documento.

202 Aceptada La solicitud ha sido aceptada, pero el procesamiento aún no se ha completado.

203 El documento con información no autorizada se devolvió correctamente, pero algunos encabezados de respuesta pueden ser incorrectos porque se utilizó una copia del documento

204 Sin contenido No hay ningún documento nuevo, el navegador debe continuar Mostrar documento original. Este código de estado es útil si el usuario actualiza la página regularmente y el servlet puede determinar que el documento del usuario es lo suficientemente nuevo

205 Restablecer contenido No hay contenido nuevo, pero el navegador debe restablecer el contenido que muestra. Se utiliza para forzar al navegador a borrar la entrada del formulario

206 Contenido parcial El cliente envía una solicitud GET con el encabezado Range y el servidor completa la solicitud

300 Selección múltiple de documentos solicitados por el cliente puede encontrarse en varias ubicaciones, que se enumeran en el documento devuelto. Si el servidor desea proponer una preferencia, deberá indicarlo en el encabezado de respuesta Ubicación.

301 Movido permanentemente El documento solicitado por el cliente está en otro lugar, la nueva URL se proporciona en el encabezado Ubicación y el navegador debería acceder automáticamente a la nueva URL.

302 encontrado Similar a 301, pero la nueva URL debe considerarse un reemplazo temporal en lugar de un reemplazo permanente.

303 Ver Otros es similar a 301/302, pero si la solicitud original es POST, el documento de destino de redirección especificado en el encabezado Ubicación debe obtenerse a través de GET

304 Cliente no modificado Tener documentos almacenados en caché y realizar solicitudes condicionales (generalmente proporcionando un encabezado If-Modified-Since para indicar que el cliente solo quiere documentos posteriores a una fecha específica). El servidor le dice al cliente que el documento original almacenado en caché todavía está disponible.

305 Usando un proxy El documento solicitado por el cliente debe obtenerse a través del servidor proxy indicado en el encabezado de ubicación

307 Redirección temporal es lo mismo que 302 (Encontrado). Muchos navegadores redireccionarán incorrectamente una respuesta 302 incluso si la solicitud original fue una POST, aunque la redirección en realidad solo ocurre cuando la respuesta a una solicitud POST es una 303. Por lo tanto, HTTP 1.1 agregó 307 para distinguir más claramente entre varios códigos de estado: cuando ocurre una respuesta 303, el navegador puede rastrear las solicitudes GET y POST redirigidas; si ocurre una respuesta 307, el navegador solo puede rastrear las solicitudes GET redirigidas;

400 Error de sintaxis de solicitud incorrecta.

401 No autorizado El cliente intentó acceder a una página protegida con contraseña sin autorización. La respuesta contendrá un encabezado WWW-Authenticate, desde el cual el navegador mostrará un cuadro de diálogo de nombre de usuario/contraseña y luego enviará la solicitud nuevamente con los encabezados de autorización correspondientes completados.

403 Prohibido El recurso no está disponible.

404 No encontrado No se puede encontrar el recurso en la ubicación especificada

405 Método no permitido El método de solicitud (GET, POST, HEAD, DELETE, PUT, TRACE, etc.) de el recurso especificado no está disponible.

406 No Aceptable Se encontró el recurso especificado, pero su tipo MIME es incompatible con el tipo especificado por el cliente en el encabezado Accpet

407 Se requiere autenticación de proxy es similar a 401 e indica que el cliente primero debe obtener autorización del servidor proxy.

408 Tiempo de espera de solicitud El cliente no envió ninguna solicitud dentro del tiempo de espera permitido por el servidor. El cliente puede repetir la misma solicitud más tarde.

Conflicto 409 Generalmente asociado con solicitudes PUT. La solicitud no puede tener éxito porque entra en conflicto con el estado actual del recurso.

410 Desaparecido El documento solicitado ya no está disponible y el servidor no sabe a qué dirección debe ser redirigido. Se diferencia del 404 en que devolver el 407 significa que el documento abandonó permanentemente la ubicación especificada, mientras que devolver el 404 significa que el documento no está disponible por motivos desconocidos.

411 Requisito de longitud El servidor no podrá procesar la solicitud a menos que el cliente envíe el encabezado Content-Length.

412 El requisito previo falló. Algunos de los requisitos previos especificados en el encabezado de la solicitud fallaron.

413 La entidad de solicitud es demasiado grande. El tamaño del documento de destino es mayor de lo que el servidor está dispuesto a manejar actualmente. Si el servidor cree que la solicitud se puede procesar más tarde, debe proporcionar un encabezado posterior al reintento

414 URI de solicitud demasiado larga URI demasiado larga

416 No se puede satisfacer el alcance de la solicitud El servidor no puede satisfacer la solicitud del cliente El rango especificado en el encabezado de la solicitud

500 Error interno del servidor El servidor encontró una condición inesperada y no pudo cumplir con la solicitud del cliente

501 No ejecutado El servidor no admitir la funcionalidad requerida para realizar la solicitud.

Por ejemplo, el cliente envió una solicitud PUT que el servidor no admitió

502 Bad Gateway El servidor actuó como una puerta de enlace o proxy y accedió al siguiente servidor para satisfacer la solicitud, pero el servidor devolvió una respuesta ilegal.

503 Servicio no disponible El servidor no puede responder debido a mantenimiento o sobrecarga. Por ejemplo, un servlet puede devolver 503 cuando el grupo de conexiones de la base de datos está lleno. Cuando el servidor devuelve 503, el servidor puede proporcionar un mensaje de encabezado Retry-After

504 Gateway Timeout lo utilizan los servidores que actúan como proxy o gateways para indicar que no se puede obtener una respuesta del servidor remoto a tiempo

505 Versión HTTP no compatible El servidor no admite la versión HTTP especificada en la solicitud

(ii) Método del objeto XMLHttpRequest

abort() Detiene la solicitud actual

getAllResponseHeaders() Devuelve la solicitud completa como una cadena. headers

getResponseHeader("headerLabel") devuelve cada etiqueta de encabezado como una cadena

open("method", "URL"[, asyncFlag[, "userName"[, "password " ]]]]) Establecer la URL de destino, el método y otros parámetros de la solicitud pendiente

send(content) Enviar la solicitud

setRequestHeader("label", "value") Set el encabezado y enviado con la solicitud

(iii) Propiedades del objeto XMLHttpRequest

activador de evento de cambio de estado onreadystatechange

estado del objeto readyState (entero):

0 = No inicializado

1 = Leyendo

2 = Leyendo

3 = Interactuando

4 = Completado

responseText La versión de texto de los datos devueltos por el proceso del servidor

responseXML El objeto de documento XML estándar DOM de los datos devueltos por el proceso del servidor

status Los datos devueltos por el código de estado del servidor, por ejemplo, 404="Archivo no encontrado", 200="Éxito"

statusText información del texto de estado devuelta por el servidor