Demostremos usando un ejemplo típico de verificación de inicio de sesión.
En términos generales, utilizar el objeto XMLHttpRequest para la verificación de inicio de sesión requiere los siguientes pasos:
1. Utilice el método DOM para obtener el valor en el cuadro de entrada.
Copie el código de código de la siguiente manera:
var nombre de usuario = document.getElementById("nombre de usuario").valor;
2. Cree un objeto XMLHttpRequest. Este paso es más complicado. La razón principal es considerar problemas de compatibilidad del navegador.
Copie el código de código de la siguiente manera:
si (ventana.XMLHttpRequest) {
//Para FireFox, Mozillar, Opera, Safari, IE7, IE8
xmlhttp = nuevo XMLHttpRequest();
//Corrección de errores en algunas versiones específicas del navegador mozillar
si (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("texto/xml");
}
} más si (ventana.ActiveXObject) {
//Para IE6, IE5.5, IE5
//Dos nombres de control que se pueden usar para crear objetos XMLHTTPRequest, almacenados en una matriz js
//La versión clasificada en primer lugar es más nueva
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
intentar{
// Saque un nombre de control y créelo. Si la creación es exitosa, finalice el ciclo.
//Si la creación falla, se generará una excepción y luego el bucle podrá continuar intentando crear
xmlhttp = nuevo ActiveXObject(activexName[i]);
romper;
} captura(e){
}
}
}
3. Registre la función de devolución de llamada del objeto XMLHttpRequest. Al registrar la función de devolución de llamada, necesita el nombre de la función y no agregue paréntesis.
Copie el código de código de la siguiente manera:
//Al registrar la función de devolución de llamada, se requiere el nombre de la función, no agregue paréntesis
//Necesitamos registrar el nombre de la función. Si agregamos paréntesis, se registrará el valor de retorno de la función.
xmlhttp.onreadystatechange = devolución de llamada;
4. Establecer (OBTENER) información de conexión
Copie el código de código de la siguiente manera:
// El primer parámetro indica el método de solicitud http, admite todos los métodos de solicitud http, utiliza principalmente get y post
// El segundo parámetro representa la dirección URL de la solicitud y los parámetros solicitados por el método get también están en la URL.
// El tercer parámetro indica si se utiliza interacción asincrónica o sincrónica, verdadero indica asincrónica
xmlhttp.open("GET","AJAXServer?name="+ nombre de usuario, verdadero);
5. Enviar una solicitud
Copie el código de código de la siguiente manera:
xmlhttp.send(nulo);
6. Método (POST), debe configurar el encabezado de la solicitud http usted mismo y, debido a que debe codificarse, no puede enviar directamente los datos en el segundo parámetro de XHR.open. En su lugar, debe usar el método send(). para enviar los datos.
Copie el código de código de la siguiente manera:
//Código para solicitud POST
//xmlhttp.open("POST","AJAXServer",true);
//El método POST requiere que usted mismo configure el encabezado de la solicitud http
xmlhttp.setRequestHeader("Tipo de contenido","aplicación/x-www-form-urlencoded");
//Enviar datos en modo POST
xmlhttp.send("nombre=" + nombre de usuario);
Función de devolución de llamada:
Copie el código de código de la siguiente manera:
//función de devolución de llamada
devolución de llamada de función () {
//alerta(xmlhttp.readyState);
//5. Recibir datos de respuesta
// Determinar si el estado del objeto es finalización interactiva
si (xmlhttp.readyState == 4) {
//Determinar si la interacción http fue exitosa
si (xmlhttp.status == 200) {
//Obtener los datos devueltos por el servidor lacquerware
//Obtener los datos de texto sin formato generados por el segmento del servidor
var textorespuesta = xmlhttp.responseText;
//Mostrar datos en la página
// Encuentra el nodo del elemento correspondiente a la etiqueta div a través de dom
var divNode = document.getElementById("resultado");
//Establece el contenido html en el nodo del elemento
divNode.innerHTML = texto de respuesta;
} demás {
alert("¡¡Ocurrió un error!!!");
}
}
}