Revise las preguntas encontradas al escribir código antes
Tabla de contenido
Use Ajax para enviar un caso de solicitud de obtención:
Use Ajax para enviar un caso de solicitud posterior:
Para solicitudes de publicación:
Sin embargo, correspondiente a la solicitud get:
Formato de solicitud y caso de código de solicitud posterior a AJAX
Use Ajax para hacer un proyecto de verificación de inicio de sesión
¿El objeto de evento de evento es un objeto incorporado?
ejemplo de código
Use Ajax para enviar un caso de solicitud de obtención:
//1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//使用xhr对象调用回调函数
xhr.onreadystatechange=function (){
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("div1").innerText=this.responseText
}else{
alert(this.status)
}
}
}
let value = document.getElementById("ipt1").value;
//打开通道
xhr.open("get","/ajax/ajaxrequest1?value="+value,true)
//发送数据
xhr.send()Use Ajax para enviar un caso de solicitud posterior:
//1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//使用xhr调用回调函数
xhr.onreadystatechange=function (){
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("div2").innerText=this.responseText
}else{
alert(this.status)
}
}
}
//打开通道
xhr.open("post","/ajax/ajaxrequest1",true)
//为post请求添加响应头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
let value1 = document.getElementById("ipt1").value;
//发送数据
xhr.send("username="+value1)Obviamente, cuando enviamos una solicitud de publicación, le agregamos información de encabezado de solicitud; ¿por qué sucede esto?
¿Por qué necesita establecer encabezados de respuesta para solicitudes de publicación en Ajax pero no para solicitudes de obtención?
En Ajax, tanto las solicitudes POST como las solicitudes GET deben establecer encabezados de respuesta. Independientemente de si el método de solicitud es POST o GET, el servidor debe configurar el tipo de contenido y otra información de encabezado relacionada en el encabezado de respuesta para informar al cliente sobre el tipo de datos devuelto y el método de codificación. Sin embargo, dado que las solicitudes POST generalmente transmiten más datos, es necesario prestar más atención a la configuración de los encabezados de solicitud y de respuesta al procesar solicitudes POST.
Para solicitudes de publicación:
En Ajax, la principal diferencia entre las solicitudes POST y GET es la forma en que se pasan los datos. Las solicitudes GET envían datos a través de la URL, mientras que las solicitudes POST transmiten datos en el cuerpo de la solicitud. Dado que la solicitud POST necesita transmitir datos en el cuerpo de la solicitud, es necesario configurar el encabezado de respuesta para informar al servidor del formato de datos y el tipo de codificación correspondientes.
Establecer encabezados de respuesta garantiza que el servidor pueda analizar correctamente los datos en el cuerpo de la solicitud y que el cliente pueda procesar correctamente la respuesta del servidor. No hay un cuerpo de solicitud en la solicitud GET, por lo que no es necesario establecer el encabezado de respuesta.
Además, al usar solicitudes POST en Ajax, debe prestar atención a algunos problemas de seguridad, como secuencias de comandos entre sitios (XSS) y falsificación de solicitudes entre sitios (CSRF). Por lo tanto, al usar solicitudes POST, debe asegurarse de que tanto los encabezados de solicitud como de respuesta estén configurados correctamente y que los datos estén correctamente cifrados y autenticados durante la transmisión.
Sin embargo, correspondiente a la solicitud get:
De hecho, cada vez que Ajax envía una solicitud GET, el navegador establece automáticamente los encabezados de respuesta para esa solicitud. Después de recibir la respuesta del servidor, el navegador evaluará el tipo de contenido de la respuesta de acuerdo con el campo Tipo de contenido en el encabezado de la respuesta y lo analizará en el formato de datos correspondiente.
Debido a que los datos de una solicitud GET generalmente se encuentran en la URL en lugar de transmitirse en el cuerpo de la solicitud, no es necesario configurar la información del encabezado de respuesta, como el tipo de contenido y la longitud del contenido, en el lado del servidor. El navegador puede juzgar el tipo de contenido de la respuesta de acuerdo con el campo Tipo de contenido en el encabezado de la respuesta y analizarlo y procesarlo automáticamente.
Aunque no es necesario configurar la información del encabezado de respuesta en la solicitud GET, en algunos casos, puede ser necesario configurar otros encabezados de respuesta, como Cache-Control y Expires, para que el navegador pueda almacenar en caché el resultado de la respuesta y optimizar el rendimiento. . Pero estas configuraciones no son obligatorias, sino que deben establecerse de acuerdo con las necesidades reales.
En Ajax, configure el encabezado de respuesta para la solicitud posterior, el principio de implementación subyacente;
En Ajax, tanto las solicitudes POST como las solicitudes GET deben establecer encabezados de respuesta. Independientemente de si el método de solicitud es POST o GET, el servidor debe configurar el tipo de contenido y otra información de encabezado relacionada en el encabezado de respuesta para informar al cliente sobre el tipo de datos devuelto y el método de codificación.
Desde la perspectiva del principio de implementación subyacente, al enviar una solicitud POST en Ajax, se creará un objeto XMLHttpRequest y se realizará una solicitud al servidor. Cuando el servidor recibe la solicitud, juzgará el tipo de cuerpo de la solicitud de acuerdo con el campo Tipo de contenido en el encabezado de la solicitud. Si el tipo de contenido se establece en application/x-www-form-urlencoded, significa que los datos de la solicitud están en forma de pares clave-valor codificados en URL. En este momento, el servidor analizará el cuerpo de la solicitud en el forma de pares clave-valor y procesar la solicitud. Si Content-Type se establece en application/json, significa que los datos de la solicitud se envían en formato JSON y el servidor analizará los datos JSON y realizará el procesamiento correspondiente.
Dado que las solicitudes POST generalmente transmiten más datos, es necesario prestar más atención a la configuración de los encabezados de solicitud y los encabezados de respuesta al procesar solicitudes POST para garantizar que los datos se puedan transmitir y analizar correctamente. Por lo tanto, ya sea una solicitud POST o una solicitud GET, es necesario configurar el encabezado de respuesta para garantizar que los datos se puedan transmitir y analizar correctamente.
¿Por qué no configuramos manualmente el encabezado de respuesta para el método de solicitud de obtención en AJAX?
En AJAX, el método de solicitud GET no necesita configurar manualmente el encabezado de respuesta. Cuando el navegador inicia una solicitud AJAX GET, el navegador establecerá automáticamente algunos encabezados de solicitud predeterminados para la solicitud, incluidos Aceptar, Aceptar codificación, Aceptar idioma, etc., y el servidor juzgará lo que el navegador puede hacer en función de estas solicitudes. encabezados Acepte el formato de datos y el método de codificación, y devuelva el contenido correspondiente. Por lo tanto, generalmente no necesitamos configurar manualmente el encabezado de respuesta cuando usamos la solicitud AJAX GET.
Sin embargo, si necesitamos especificar algunos encabezados de respuesta específicos, como configurar el tipo de contenido del resultado de la respuesta, también se puede lograr configurando el encabezado de respuesta HTTP en el lado del servidor. En este momento, ya sea una solicitud GET o una solicitud POST, la información del encabezado de respuesta correspondiente debe configurarse en el lado del servidor.
Formato de solicitud y caso de código de solicitud posterior a AJAX
AJAX es una técnica para actualizar partes de una página web sin actualizar toda la página. Una solicitud POST puede enviar datos al servidor y recibir una respuesta. El formato de solicitud de una solicitud AJAX POST generalmente incluye dos partes: encabezado y datos.
Encabezado de la solicitud:
-
Tipo de contenido: especifique el formato de los datos de la solicitud, generalmente application/json o application/x-www-form-urlencoded.
-
X-Requested-With: XMLHttpRequest, lo que indica que se trata de una solicitud AJAX.
Solicitar datos:
Los datos pueden ser texto sin formato, formato JSON o datos de formulario.
El siguiente es un ejemplo de código de una solicitud POST de AJAX, que envía un nombre de usuario y una contraseña al servidor y recibe una respuesta:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
xhttp.open("POST", "/login", true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var data = JSON.stringify({"username": "Alice", "password": "123"});
xhttp.send(data);Este código envía una solicitud al extremo de inicio de sesión del servidor y envía datos al servidor en formato JSON. Cuando hay una respuesta disponible, la función imprimirá el texto de la respuesta. Tenga en cuenta que en el método open(), el tercer parámetro se establece en verdadero, lo que indica que la solicitud AJAX es asíncrona.
¿Puede faltar el siguiente código en la solicitud de publicación de Ajax: xhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
No es necesario establecer el encabezado de solicitud X-Requested-Withcomo XMLHttpRequest, pero este encabezado de solicitud generalmente se usa para identificar solicitudes AJAX. Si el encabezado de la solicitud no está configurado, es posible que el servidor no pueda determinar si la solicitud es una solicitud AJAX, lo que afecta el método de procesamiento. Por lo tanto, se recomienda agregar este encabezado de solicitud a la solicitud AJAX POST para garantizar que el servidor pueda procesar la solicitud correctamente.
Use Ajax para hacer un proyecto de verificación de inicio de sesión
Un proyecto básico de verificación de inicio de sesión puede usar AJAX para enviar una solicitud POST, enviar el nombre de usuario y la contraseña al servidor para su verificación y luego decidir si permitir que el usuario inicie sesión según la respuesta del servidor.
El siguiente es un ejemplo de código para un elemento de validación de inicio de sesión simple:
archivo HTML:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="login.js"></script>
</head>
<body>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
<div id="message"></div>
</body>
</html>Este archivo HTML contiene un formulario donde el usuario ingresa un nombre de usuario y una contraseña. Cuando el usuario envía el formulario, se activa una solicitud AJAX en el archivo JavaScript.
Archivo JavaScript:
$(document).ready(function() {
$('#loginForm').submit(function(event) {
event.preventDefault();
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
type: 'POST',
url: '/login',
data: {username: username, password: password},
success: function(response) {
if (response === 'success') {
$('#message').text('Login successful.');
} else {
$('#message').text('Invalid username or password.');
}
},
error: function(xhr, status, error) {
console.log(error);
}
});
});
});Este archivo JavaScript contiene un detector de eventos que activará una solicitud POST de AJAX cuando el usuario envíe el formulario. Los datos solicitados son el nombre de usuario y la contraseña y se envían al punto final /login del servidor. Si la respuesta es "éxito", muestre un mensaje de inicio de sesión exitoso; de lo contrario, muestre un mensaje de nombre de usuario o contraseña no válidos.
En el lado del servidor, se puede usar cualquier lenguaje de back-end para procesar solicitudes POST y validar las credenciales de usuario. Si se pasa la verificación, puede enviar una respuesta de "éxito" al cliente; de lo contrario, envíe otros mensajes de error.
¿Cuál es el evento en la tercera línea del código js anterior y qué hace el método event.preventDefault()?
En el código JavaScript anterior, la tercera línea eventes un objeto de evento, que representa el evento activado cuando se envía el formulario.
event.preventDefault()La función del método es evitar que el navegador realice el comportamiento de envío de formulario predeterminado. Dado que usamos Ajax para enviar datos de formulario para
Envío asíncrono, por lo que debe evitar el comportamiento de envío de formulario predeterminado, para evitar la actualización y el salto de la página.
¿El objeto de evento de evento es un objeto incorporado?
Sí, el objeto de evento es un objeto integrado del navegador, que se crea automáticamente cuando se activa un evento y se pasa al controlador de eventos, y contiene información relacionada con el evento, como el tipo de evento, el elemento de activación, la posición del mouse, etc. Diferentes tipos de eventos crean diferentes tipos de objetos de eventos. En JavaScript, podemos acceder al objeto del evento a través de los parámetros de la función del controlador de eventos. Por ejemplo:
document.getElementById("myButton").addEventListener("click", function(event){
// 在这里访问事件对象
console.log(event.type); // 输出 "click"
console.log(event.target.id); // 输出 "myButton"
});