1. AJAX (JavaScript + XML asíncrono) puede solicitar datos adicionales como el servidor sin desinstalar la página, es decir, tecnología de actualización local
2. Cree un objeto XHR
function createExhr () {if (typeof xmlhttprequest! = "indefinido") {return new xmlhttprequest (); } else if (typeOf ActiveXObject! = "Undefined") {// <ie7 if (typeof arguments.callee.activexString! = "string") {var version = ["msxml2.xmlhttp.6.0", "msxml2.xmlhtp.3.0", "msxml2.xmlhttp". for (i = 0, len = versión.length; i <len; i ++) {try {new ActiveXObject (versión [i]); argumentos.callee.activexstring = versión [i]; romper; } catch (ex) {}}} return New ActiveXObject (arguments.callee.activexString); } else {tirar un nuevo error ("Sin soporte para XHR"); }} var xhr = createxhr (); alerta (xhr); // [Object xmlhttprequest]3. Nota de uso: todos los ejemplos en esta sección se aplican al lado del servidor
1. Llame al método Open (). Acepta 3 parámetros: el tipo de solicitud que se enviará ("Get", "Post", etc.), la URL de la solicitud y el valor booleano que indica si la solicitud se envía asincrónicamente.
2. Para enviar una solicitud, llame al método send () y acepte un parámetro, es decir, debe ser el tema de la solicitud. nulo si no es necesario
3. Los datos devueltos se llenarán automáticamente en las propiedades del objeto XHR.
var xhr = createExhr (); // Abra el archivo Ejemplo.txt en Get Synchrony // Syncronization: el código JavaScript esperará a que el servidor responda y ejecute xhr.open ("get", "Ejemplo.txt", falso); XHR.SEND (NULL); // El estado representa el estado HTTP de la respuesta // 200 representa OK, 304 representa el caché if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.responStexText); // devuelve el texto de la respuesta, 123456} else {alert ("La solicitud no tuvo éxito:" + xhr.status); }4.example.Text El contenido del archivo es una cadena: 123456
4. Por supuesto, no habrá ningún problema con el método de sincronización utilizado en el proceso anterior. Tenemos que desafiar un método asincrónico.
var xhr = createExhr ();// XHR.readyState representa el estado actual de la solicitud/respuesta, y 4 representa que todos los datos de respuesta han sido aceptados // además, siempre que el valor de XHR.readyState cambie, el evento XHR.onreadyStateChange activará xhr.onreadyStateChange = function () {si (xhr.readystate == 4) {if (((((((((((((((xh, ((xh, (((((((((((((x, (xhriew,,). xhr.status <300) || xhr.status == 304) {alerta (xhr.Responsetext); } else {alert ("la solicitud no tuvo éxito:" + xhr.status); }}}; xhr.open ("Get", "Ejemplo.txt", true); XHR.SEND (NULL);
5. Cada solicitud y respuesta HTTP tendrá la información del encabezado correspondiente.
1. Por defecto, al enviar una solicitud XHR, también se enviará la siguiente información del encabezado.
①acept: el tipo de contenido que el navegador puede manejar.
②Accept-Charset: el conjunto de caracteres que puede mostrar el navegador.
③Accept-coding: codificación comprimida que el navegador puede manejar.
④Accept-Language: el lenguaje actualmente establecido por el navegador.
⑤Conexión: el tipo de conexión entre el navegador y el servidor.
⑥Chookies: cualquier cookies establecida en la página actual.
⑦HOST: el dominio donde se emitió la página donde se emitió la solicitud.
⑧Referer: URI de la página que emitió la solicitud.
⑨User-agente: la cadena del agente de usuario del navegador.
2. Use el método setRequestHeader () para establecer la información de encabezado de solicitud personalizada. Acepte dos parámetros: el nombre del campo de encabezado y el valor del campo de encabezado
var xhr = createExhr (); // XHR.readyState representa el estado actual de la solicitud/respuesta, y 4 representa que todos los datos de respuesta han sido aceptados // además, siempre que el valor de XHR.readyState cambie, el evento XHR.onreadyStateChange activará xhr.onreadyStateChange = function () {si (xhr.readystate == 4) {if (((((((((((((((xh, ((xh, (((((((((((((x, (xhriew,,). xhr.status <300) || xhr.status == 304) {alerta (xhr.Responsetext); } else {alert ("la solicitud no tuvo éxito:" + xhr.status); }}}; xhr.open ("Get", "Ejemplo.txt", true); // xhr.setRequestHeader ("nombre", "zhang"); // El "nombre" aceptado se puede ver en el http de Ejemplo.txt: "Zhang" xhr.send (nulo);3. Obtenga la información del encabezado de solicitud y la información correspondiente, llame al método getResponseHeader () getAllResponseHeaders ()
var xhr = createExhr (); // XHR.readyState representa el estado actual de la solicitud/respuesta, y 4 representa que todos los datos de respuesta han sido aceptados // además, siempre que el valor de XHR.readyState cambie, el evento XHR.onreadyStateChange activará xhr.onreadyStateChange = function () {si (xhr.readystate == 4) {if (((((((((((((((xh, ((xh, (((((((((((((x, (xhriew,,). xhr.status <300) || xhr.status == 304) {// Obtener el tipo de contenido del encabezado de respuesta var connection = xhr.getResponseHeader ("Content-type"); // alerta (conexión); // Text/Plain // Obtener toda la información de respuesta var all = xhr.getAllResponseHeaders (); alerta (todos); } else {alert ("la solicitud no tuvo éxito:" + xhr.status); }}}}; xhr.open ("Get", "Ejemplo.txt", true); XHR.SEND (NULL);6. Obtenga solicitud. Hemos discutido el método para obtener la solicitud antes. Ahora vamos a expandirlo y agregue algunos parámetros a la solicitud GET.
/ ** URL: URL sin nombre de la solicitud: valor de clave de solicitud: Valor de solicitud retorno: URL con cadena de solicitud*/ function addUrlParam (url, nombre, valor) {url += (url.indexof ("?") == -1? "?": "&"); url + = encodeUriComponent (nombre) + "=" + encodeUriccomponent (valor); URL de retorno; } var xhr = createxhr (); xhr.onreadyStateChange = function () {if (xhr.readyState == 4) {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alerta (xhr.ResponSextext); } else {alert ("la solicitud no tuvo éxito:" + xhr.status); }}}}; var url = "Ejemplo.txt"; url = addUrlParam (url, "nombre", "zhang"); url = addUrlParam (url, "edad", "23"); // La URL solicitada se convierte en: Ejemplo.txt? Name = Zhang & Age = 23 xhr.open ("Get", URL, verdadero); XHR.SEND (NULL);7. Solicitud posterior
1. Análisis de casos: A continuación, discutamos la aplicación AJAX que envía solicitudes en el método de publicación, es decir, el registro del usuario, y el mensaje se devolverá en función de su nombre de usuario registrado.
2. Pasos de implementación
1) Primero, debe haber una página registrada (por supuesto, es muy simple aquí) Ajax.html
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> un documento sin título </title> <style> </style> </head> <body> <form name = "myForm" método = "post"> nombre: <put type = "text" name " id = "UserLabel"> Ingrese el nombre de usuario </etiqueta> <br/> contraseña: <input type = "contraseña" name = "contraseña"/> <br/> <input type = "enviar" value = "login"/> <br/> </form> <script src = "eventUtil.js"> </script> <script src = "serialize.js"> </script> <script <script> <script <script> src = "Ajax.js"> </script> <script src = "ajaxdo.js"> </script> <script src = "ajaxdo.js"> </script> </body> </html>
2) Entonces, por supuesto, la parte de JavaScript
①EventUtil.js, aquí hay solo una lista de las piezas de escucha del evento
var eventUtil = {addEvent: function (element, type, handler) {if (element.addeventListener) {element.addeventListener (type, handler, falso); } else if (element.attachevent) {element.attachevent ("on" + type, manejador); }}}}②serialize.js: serialización de forma
función serialize (form) {var partes = [], campo = nulo, i, len, j, optlen, opción, optValue; for (i = 0, len = form.elements.length; i <len; i ++) {field = form.elements [i]; switch (field.type) {case "select-one": case "select-multiple": if (field.name.length) {for (j = 0, optlen = field.options.length; j <optlen; j ++) {opción = field.options [j]; if (option.selected) {optValue = ""; if (option.hasattribute) {optValue = (opcion.hasattribute ("valor")? opción.value: option.text); } else {optValue = (opcion.Attributes ["valor"]. especificado? opción.value: option.text); } Parts.push (EncodeUriComponent (Field.Name) + "=" + EncodeUricOponent (OptValue)); } } } romper; Case Undefined: // Field Establecer Caso "Archivo": // Caso de entrada de archivo "Enviar": // Botón Enviar Caso "RESET": // Botón de reinicio "Botón": // Botón personalizado Break; Case "Radio": // Case de botón de radio "CheckBox": // CheckBox if (! Field.Checked) {break; } /* Realice la operación predeterminada* /default: // descontenta los campos de formulario sin nombres if (field.name.length) {parts.push (encodeuricOponnent (field.name) + "=" + encodeuricponent (field.value)); }}} return parts.Join ("&"); }③ajax.js es la función createxhr () anterior, y no se enumerará aquí.
④AJAXDO.JS, el archivo central, es la parte de operación de nuestro nombre, que se escribe al azar.
var form = document.forms [0]; // Get Form VAR UserName = Form.Elements ['UserName']; // Nombre de usuario var userLabel = document.querySelector ("#userLabel"); // Tag de inmediato eventUtil.AdDevent (username, "blur", function () {var xhr = createExhr (); xhr.onreadyStateChange = function () {if (xhr.readyState == 4) {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) XHR.RESPONDETEXT; "Lo siento, este usuario ya existe"; // Serializar la forma XHR.SEND (Serialize (Form));3. Parte de mejora: todos lo han visto. Cuando presentamos el formulario en este momento, serializamos el formulario. El tipo FormData se define para esto en XMLHTTPRequest Nivel 2, que automáticamente serializará el formulario para nosotros y no necesitamos escribirlo nosotros mismos.
Solo movemos parte del código
// ... El código omitido aquí es consistente con la solicitud de arriba // Post xhr.open ("post", "Dome.php", true); // Solo debe cambiarse aquí para reemplazar la función anterior XHR.SEND (nueva FormData (Forma));8. Otras partes (entienden porque la compatibilidad no es suficiente)
1. Configuración de tiempo de espera
xhr.open ("Get", "Ejemplo.txt", true); xhr.timeout = 1000; // Establezca el tiempo de espera en 1 segundo (solo para IE8+) xhr.onTimeOut = function () {alert ("La solicitud no regresó en un segundo"); }; XHR.SEND (NULL);2. Método overidEmeMeType (), el tipo devuelto por el servidor
var xhr = createExhr (); xhr.open ("Get", "Ejemplo.txt", true); xhr.overridEMeType ("Text/xml"); // El anterior era Text/Plain XHR.Send (NULL);3. Eventos de progreso
1. Cargar el evento, activado mientras el navegador reciba la información del servidor.
var xhr = createExhr (); xhr.onload = function () {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.ResponSetext); } else {alert ("la solicitud no tuvo éxito:" + xhr.status); }}; xhr.open ("Get", "Ejemplo.txt", true); XHR.SEND (NULL);2. Evento de progreso, activado periódicamente durante el navegador que recibe nuevos datos
var xhr = createExhr (); xhr.onProgress = function (event) {var divstatus = document.getElementById ("status"); // Calcule el porcentaje de datos que se han recibido de la respuesta if (event.lengthComputable) {divstatus.innerhtml = "recibido" + event.position + "de" + event.totalSize + "bytes"; }}; xhr.open ("get", "altevents.php", true); XHR.SEND (NULL);Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.