De lo que voy a hablar es muy básico, por lo que los expertos no deberían leerlo. Si lo lees, por favor dame tu opinión. Los principiantes o las personas que no saben mucho sobre conocimientos de bajo nivel pueden leerlo para mejorar su comprensión y memoria.
El objeto XMLHttpRequest es el núcleo de la función AJAX. Para desarrollar un programa AJAX, debe comenzar por comprender el objeto XMLHttpRequest.
Para comprender el objeto XMLHttpRequest, comience creando el objeto XMLHttpRequest. La creación de objetos XMLHttpRequest en diferentes navegadores utiliza diferentes métodos:
primero observe el método de IE para crear el objeto XMLHttpRequest (Método 1):
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP" ); //Utilice una versión más reciente de IE para crear un objeto compatible con IE (Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Utilice una versión anterior de IE para crear un objeto compatible con IE (Microsoft.XMLHTTP)
Mozilla, Opera, Safari y la mayoría de los navegadores que no son IE utilizan el siguiente método (Método 2) para crear objetos XMLHttpRequest:
var xmlhttp = new XMLHttpRequest();
Internet Explorer en realidad utiliza un objeto llamado XMLHttp en lugar del objeto XMLHttpRequest, que utilizan Mozilla, Opera, Safari y la mayoría de los navegadores que no son de Microsoft (en lo sucesivo, denominados colectivamente el objeto XMLHttpRequest). IE7 también comenzó a utilizar el objeto XMLHttpRequest.
Si diferentes navegadores utilizan métodos incorrectos al crear el objeto XMLHttpRequest, el navegador informará un error y el objeto no se podrá utilizar. Entonces necesitamos un método para crear un objeto XMLHttpRequest que sea compatible con diferentes navegadores:
Crear un método de objeto XMLHttpRequest que sea compatible con múltiples navegadores
var xmlhttp = false; //Crea una nueva solicitud de variable y le asigna un valor falso. Utilice falso como condición de juicio, lo que significa que el objeto XMLHttpRequest aún no se ha creado.
función CrearXMLHttp(){
intentar{
xmlhttp = new XMLHttpRequest(); //Intenta crear un objeto XMLHttpRequest. Los navegadores excepto IE admiten este método.
}
atrapar (e){
intentar{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //Utilice una versión más reciente de IE para crear un objeto compatible con IE (Msxml2.XMLHTTP)
}
atrapar (e){
intentar{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Utilice una versión anterior de IE para crear un objeto compatible con IE (Microsoft.XMLHTTP).
}
captura (falló) {
xmlhttp = false; //Si falla, asegúrese de que el valor de la solicitud siga siendo falso.
}
}
}
devolver xmlhttp;
}
Es muy sencillo juzgar si la creación fue exitosa
si (!xmlhttp){
// ¡Error al crear el objeto XMLHttpRequest!
}
demás{
//¡Creado exitosamente!
}
Después de crear el objeto XMLHttpRequest, echemos un vistazo a los métodos, propiedades y el controlador de eventos onreadystatechange más importante de este objeto.
Método:
open() Descripción: inicializa los parámetros de la solicitud HTTP, como la URL y el método HTTP, pero no envía la solicitud.
abort() Descripción: Cancela la respuesta actual, cierra la conexión y finaliza cualquier actividad de red pendiente.
getAllResponseHeaders() Descripción: Devuelve encabezados de respuesta HTTP como cadenas sin analizar.
getResponseHeader() Descripción: Devuelve el valor del encabezado de respuesta HTTP especificado.
send() Descripción: envía una solicitud HTTP, utilizando los parámetros pasados al método open() y el cuerpo de solicitud opcional pasado al método.
setRequestHeader() Descripción: establece o agrega una solicitud HTTP a una solicitud abierta pero no enviada.
Atributos:
readyState Descripción: el estado de la solicitud HTTP.
ResponseText Descripción: el cuerpo de la respuesta (excluidos los encabezados) recibido por el servidor hasta el momento, o una cadena vacía si no se han recibido datos.
ResponseXML Descripción: la respuesta a la solicitud, analizada en XML y devuelta como un objeto de documento.
status Descripción: Código de estado HTTP devuelto por el servidor.
statusText Descripción: este atributo especifica el código de estado HTTP de la solicitud utilizando un nombre en lugar de un número.
onreadystatechange es la función del controlador de eventos que se llama cada vez que cambia la propiedad readyState.
Comprendamos el objeto XMLHttpRequest a partir del proceso de envío de una solicitud y procesamiento de los resultados de la solicitud.
Naturalmente, se genera un objeto XMLHttpRequest antes de enviar la solicitud. No es necesario escribir más código si ya está allí.
Generar un objeto XMLHttpRequest
var xmlhttp = CreateXMLHttp();
Después de crear el objeto XMLHttpRequest, ¿a qué sitio web queremos enviar la solicitud? Elijamos el RSS en la página de inicio del parque de blogs. Entonces, ¿cómo configuro la dirección del sitio web que quiero solicitar? Utilice el método open().
abierto (método, URL, asíncrono, nombre de usuario, contraseña)
Este método tiene 5 parámetros. Puede ver el significado específico aquí: http://www.w3school.com.cn/xmldom/dom_http.asp.
Esto es lo que usamos.
xmlHttp.open ("obtener", " http://www.cnblogs.com", verdadero );
El parámetro get significa usar el método get. El segundo es, naturalmente, la dirección de destino y la página de inicio del parque de blogs. El tercero significa si es asincrónico. También se pueden encontrar descripciones de parámetros específicos en http://www.w3school.com.cn .
Bien, el objetivo está fijado, cómo enviarlo. Utilice el método enviar().
send (body), el método send () tiene solo un parámetro, que representa el objeto DOM. La próxima vez, solo necesitamos escribir sobre este objeto DOM.
xmlhttp.send(nulo);
Eso es todo. Bien, ya está enviado, entonces, ¿cómo manejar los resultados devueltos? En este momento, se utiliza lo más importante del objeto XMLHttpRequest, que es el identificador del evento onreadystatechange. ¿Qué significa? Entonces necesitamos explicar el estado preparado del objeto XMLHttpRequest. Hay 5 estados de readyState, representados por los números del 0 al 4 respectivamente.
Estado Nombre Descripción
0 Estado de inicialización no inicializado. El objeto XMLHttpRequest se creó (antes de llamar a open()) o se restableció mediante el método abort().
1 Abrir Se llamó al método open(), pero no al método send(). La solicitud aún no ha sido enviada.
2 Se llamó al método Sent Send() y se envió la solicitud HTTP al servidor web. No se recibió respuesta.
3 Recibiendo Se han recibido todos los encabezados de respuesta. Se comenzó a recibir el cuerpo de respuesta pero no se completó.
4 La respuesta HTTP cargada se ha recibido en su totalidad.
Sin embargo, cabe señalar que los estados que diferentes navegadores pueden manejar en el identificador de eventos onreadystatechange no son consistentes. IE y Firefox pueden manejar los estados 1 a 4, mientras que Safari puede manejar los estados 2 a 4 y Opera puede manejar los estados 3 y 4. . El estado de 0 es básicamente inútil, porque el método open () se llamará inmediatamente después de que se cree el objeto XMLHttpRequest, y el estado será 1 en este momento, a menos que, por supuesto, desee determinar si el objeto ha sido cancelado mediante aborto. (), pero esta situación todavía es muy común. En la mayoría de los casos, basta con determinar si el estado es 4 (aceptado y completado).
Bien, entiendo que readyState tiene 5 estados. Luego, el resultado del procesamiento es para ver si el estado cambia a diferentes estados y podemos realizar un procesamiento diferente. Cómo decirle al objeto XMLHttpRequest quién debe manejar el cambio cuando cambia el estado. Hay dos formas de escribir, una es usar un método anónimo y la otra es especificar un método. De hecho, son solo métodos de escritura diferentes con el mismo efecto. Mire el código:
xmlhttp.onReadyStateChange = function (){.
//Código para manejar cambios de estado
}
//o
xmlhttp.onReadyStateChange = getResult;
función obtenerResultado(){
///Código para manejar cambios de estado
}
// Por cierto, el nombre del identificador es relativamente largo. Puede recordarlo así. On ReadyState Change significa que la solicitud se envió cuando el estado de lectura cambió y también se especifica el método de procesamiento. contenido? Hay dos atributos: ResponseText y ResponseXML. Para su uso, ResponseXML es el objeto devuelto y debe analizarse más adelante. Aquí, use ResponseText primero para ver qué se devuelve.
alert(xmlhttp.responseText); //Ver si se devuelve el código HTML de la página de inicio. Eres tú quien tiene éxito.
Todo el proceso es: crear un objeto XMLHttpRequest -> especificar la dirección de envío y el método de envío -> enviar la solicitud -> especificar el método de procesamiento y procesar el resultado devuelto. Pero debe tenerse en cuenta que nuestro entendimiento normal es que el método de procesamiento especificado del identificador del evento onreadystatechange debe especificarse antes de enviarlo; de lo contrario, el evento de cambio de estado no se puede procesar.
Por lo tanto, debemos recordarlo de acuerdo con el siguiente proceso: crear un objeto XMLHttpRequest -> especificar la dirección de envío y el método de envío -> especificar el método de procesamiento de cambio de estado -> enviar la solicitud Una vez enviada la solicitud, el método de procesamiento especificado se aplicará automáticamente. Se llama cuando cambia el estado.
Bien, echemos un vistazo al código completo.
código completado
var xmlhttp = false; //Crea una nueva solicitud de variable y le asigna un valor falso. Utilice falso como condición de juicio, lo que significa que el objeto XMLHttpRequest aún no se ha creado.
función CrearXMLHttp(){
intentar{
xmlhttp = new XMLHttpRequest(); //Intenta crear un objeto XMLHttpRequest. Los navegadores excepto IE admiten este método.
}
atrapar (e){
intentar{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //Utilice una versión más reciente de IE para crear un objeto compatible con IE (Msxml2.XMLHTTP)
}
atrapar (e){
intentar{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Utilice una versión anterior de IE para crear un objeto compatible con IE (Microsoft.XMLHTTP).
}
captura (falló) {
xmlhttp = false; //Si falla, asegúrese de que el valor de la solicitud siga siendo falso.
}
}
}
devolver xmlhttp;
}
xmlhttp = CrearXMLHttp();
xmlhttp.open ("obtener", " http://www.cnblogs.com", verdadero );
xmlhttp.onReadyStateChange = getResult;
xmlhttp.send(nulo);
función obtenerResultado(){
si(xmlhttp.readyState == 4){
alerta(xmlhttp.responseText);
}
}
Todo parece estar bien, pero ¿alguna vez has pensado en lo que sucedería si el código HTML falla durante la transmisión por red o la dirección que especificamos deja de ser válida? En este momento, debe utilizar el atributo de estado, que es el código de estado HTTP devuelto por el servidor. Cuando xmlhttp.status es igual a 200, significa que el proceso de transmisión está completo y sin errores. Para conocer el significado específico del código de estado HTTP, puede ir al sitio web de la organización W3C para ver la direcciónhttp: //www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1 .
Creo que está realmente bien escribir el método getResult() de la siguiente manera.
función obtenerResultado(){
si(xmlhttp.readyState == 4 && xmlhttp.status == 200){
alerta(xmlhttp.responseText);
}
}
Bien, algo que originalmente era bastante simple parece tener muchas palabras después de haber escrito tanto sobre ello. Sin embargo, creo que es muy importante comprender el contenido básico de la programación. Hoy en día, muchas bibliotecas JS se utilizan para desarrollar programas AJAX y no es necesario escribir ese código básico directamente. Por ejemplo, si usamos el famoso jQuery, pero si tenemos un buen conocimiento de las cosas básicas, entonces estas bibliotecas reportan errores, o si hay un problema, podemos saber dónde está el error muy rápidamente y hacer cambios más rápido. hacer que el programa se ejecute normalmente.