Desarrollo front-end | Comprensión básica de Ajax

Introducción a AJAX

AJAX (JavaScript y XML asíncronos) significa JavaScript y XML asíncronos.
AJAX no es un nuevo lenguaje de programación, sino una tecnología que permite que las páginas web se actualicen de forma asincrónica a través de una pequeña cantidad de intercambio de datos con el servidor en segundo plano sin recargar toda la página web. Si la página web tradicional no usa AJAX, si necesita actualizar el contenido, debe volver a cargar la página web completa. AJAX se basa en los estándares de Internet existentes.

Soporte de Google

En 2005, Google hizo popular AJAX con su sugerencia de Google.
Google Sugerir utiliza AJAX para crear una interfaz web altamente dinámica: cuando ingresa palabras clave en el cuadro de búsqueda de Google, JavaScript enviará estos caracteres al servidor y el servidor devolverá una lista de sugerencias de búsqueda.

Conceptos básicos de AJAX

XMLHttpRequestEs la base de AJAX.

Pasos para enviar una solicitud usando Ajax:

• 1. Cree un objeto XMLHttpRequest
• 2. Envía una solicitud al servidor.
• 3. Realice la acción de envío
• 4. Especifique la función de devolución de llamada

Objeto XMLHttpRequest

El objeto XMLHttpRequest se utiliza para intercambiar datos con el servidor. Todos los navegadores modernos admiten XMLHttpRequest 对象( IE5y IE6usan ActiveXObject) XMLHttpRequest para intercambiar datos con el servidor detrás de escena. Esto significa que ciertas partes de la página web se pueden actualizar sin recargar toda la página web.

Crea un objeto XMLHttpRequest

Todos los navegadores (IE7 +, Firefox, Chrome, Safari y Opera) tienen objetos XMLHttpRequest integrados.
Sintaxis para crear un objeto XMLHttpRequest:

variable=new XMLHttpRequest();

Nota: Internet Explorer (IE5 e IE6) utiliza objetos ActiveX:

variable=new ActiveXObject("Microsoft.XMLHTTP");

Envía una solicitud al servidor

Para enviar una solicitud al servidor, utilice el método open()y send()del objeto XMLHttpRequest : La sintaxis para enviar una solicitud es la siguiente:

xmlhttp.open(method,url,async);
xmlhttp.send(string);

Especifique el tipo de solicitud, la URL y si procesar la solicitud de forma asíncrona.
Análisis de parámetros:

1. open () - listo para enviar

• método: el tipo de solicitud; GET o POST
• url: la ubicación del archivo en el servidor
• async: el parámetro es verdadero (asincrónico) o falso (sincrónico)

2. send (): envía la solicitud al servidor.

• cadena: solo se usa para solicitudes POST

Método de solicitud

Hay formas de solicitar GETy POST, en comparación con POST, GET más fácil y rápido, y se pueden utilizar en la mayoría de los casos.

//GET请求:
xhr.open('GET','./check.php?username='+uname+'&password='+pw,true);
xmlhttp.send();

Solicitud POST

El uso general de la solicitud POST es:

• No se puede usar el archivo de caché (actualice el archivo o la base de datos en el servidor)
• Envíe una gran cantidad de datos al servidor (POST no tiene límite de datos)
• Al enviar entradas de usuario que contienen caracteres desconocidos, POST es más estable y confiable que GET

Si necesita PUBLICAR datos como un formulario HTML, use setRequestHeader()para agregarlo HTTP 头. Luego, send()un método predeterminado los datos a transmitir:

Agregue el formato de sintaxis de encabezado HTTP a la solicitud:

setRequestHeader(header,value) 	

Análisis de parámetros:

• encabezado: el nombre del encabezado de la solicitud
• valor: el valor del encabezado de la solicitud

Ejemplos:

//POST请求:
xhr.open('POST','./check.php?username='+uname+'&password='+pw,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username='+uname+'&password='+pw");

Verdadero o falso asincrónico

Si se va a utilizar el objeto AJAX XMLHttpRequest, se deben establecer los parámetros del open()proceso :asynctrue

xhr.open('GET','./check.php?username='+uname+'&password='+pw,true);
xmlhttp.send();

Cuando use async = true, especifique la función de evento que se ejecutará en respuesta al estado listo en el evento onreadystatechange:

cuando async = false, no es necesario escribir la función onreadystatechange:

Respuesta del servidor

Para obtener una respuesta del servidor, utilizando el objeto responseTexto las responseXMLpropiedades XMLHttpRequest :

• responseText obtiene los datos de respuesta en forma de cadena.
• responseXML obtiene los datos de respuesta en formato XML.

evento onreadystatechange

Cuando la solicitud se envía al servidor, debemos realizar algunas tareas basadas en respuestas.
Siempre que se active un readyStatecambio onreadystatechange 事件. Información de estado
readyStatealmacenada XMLHttpRequesten el atributo .

Los tres atributos importantes del objeto XMLHttpRequest son los siguientes:

Atributos	descripción
onreadystatechange	Almacene la función (o el nombre de la función), que se llamará siempre que cambie la propiedad readyState.
readyState	Se almacena el estado de XMLHttpRequest. Del 0 到 4cambio. 0: La solicitud no se ha inicializado ;: Se 1ha establecido la conexión con el servidor ;: Se 2ha recibido la 3solicitud ;: La solicitud se está procesando 4;: La solicitud se ha completado y la respuesta está lista
estado	200: "OK" 404;: página no encontrada

En el evento onreadystatechange, especificamos la tarea que se realizará cuando la respuesta del servidor esté lista para ser procesada.
Cuando es readyStateigual 4y el estado es 200, la respuesta indica listo:

Usar la función de devolución de llamada

Una función de devolución de llamada es una función que se pasa a otra función como parámetro.
Si hay varias tareas AJAX en el sitio web, debe escribir una función estándar para crear un objeto XMLHttpRequest y llamar a esta función para cada tarea AJAX.

Ejemplo completo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>初识Ajax开发</title>
    <script type="text/javascript">
    window.onload = function(){
    
    
        var btn = document.getElementById('btn');
        btn.onclick = function(){
    
    
            var uname = document.getElementById('username').value;
            var pw = document.getElementById('password').value;

            // 1、创建XMLHttpRequest对象
            var xhr = null;
            if(window.XMLHttpRequest){
    
    
                xhr = new XMLHttpRequest();//标准
            }else{
    
    
                xhr = new ActiveXObject("Microsoft");//IE5,IE6
            }
            // readyState=0表示xhr对象创建完成
            console.log(xhr.readyState + '----------1-----------');
            // 2、准备发送
            var param = 'username='+uname+'&password='+pw;
            xhr.open('post','04post.php',true);
            // 3、执行发送动作
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(param);//post请求参数在这里传递，并且不需要转码
            // 4、指定回调函数
            // readyState=1表示已经发送了请求
            console.log(xhr.readyState + '----------2-----------');
            // 该函数调用的条件就是readyState状态发生变化（不包括从0变为1）
            xhr.onreadystatechange = function(){
    
    
                console.log(xhr.readyState + '----------3-----------');
                // 4表示服务器返回的数据已经可以使用了，但是这个数据不一定是正常的
                if(xhr.readyState == 4){
    
    
                    // 200表示服务器返回的数据是正常的，不是200的话表示数据是错误的
                    if(xhr.status == 200){
    
    
                        // 这里的200表示数据是正常的
                        alert(xhr.responseText);
                        // xhr.responseXML
                    }
                }
            }
            
        }
    }
    </script>
</head>

<body>
    <form>
        用户名：
        <input type="text" name="username" id="username"><span id="info"></span>
        <br> 密码：
        <input type="text" name="password" id="password">
        <input type="button" value="登录" id="btn">
    </form>
</body>

</html>