Mi informacion de contacto
Correo[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Todo el proceso de AJAX es JavaScript y XML asincrónicos, que son JS y XML asincrónicos. A través de AJAX, puede enviar solicitudes asincrónicas al servidor en el navegador. La mayor ventaja: obtener datos sin actualizar. AJAX no es un nuevo lenguaje de programación, sino una nueva forma de utilizar los estándares existentes en conjunto.
Lenguaje de marcado extensible XML.
XML está diseñado para transmitir y almacenar datos.
XML es similar a HTML. La diferencia es que hay etiquetas predefinidas en HTML, pero no hay etiquetas predefinidas en XML. Todas son etiquetas personalizadas que se utilizan para marcar algunos datos.
<student>
<name>John</name>
<age>18</age>
</student>
Ahora ha sido reemplazado por JSON.
{"name":"John","age":18}
1) Puede comunicarse con el servidor sin actualizar la página.
2) Le permite actualizar parte del contenido de la página en función de los eventos del usuario.
1) No hay historial de navegación y no se puede volver atrás
2) Hay un problema entre dominios (mismo origen)
3) El SEO no es amigable (el contenido web no se puede rastrear)
Protocolo HTTP (protocolo de transporte de hipertexto) [Protocolo de transferencia de hipertexto], el protocolo detalla las reglas de comunicación entre el navegador y el servidor World Wide Web.
La atención se centra en el formato y los parámetros.
行 GET /s?ie=utf-8 HTTP/1.1
头 Host: atguigu.com
Cookie: name=guigu
Content-type: application/x-www-form-urlencoded
user-Agent: chrome 83
空行
体 username=admin&password=admin
行 HTTP/1.1 200 OK
头 Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
空行
体 <html>
<head>
</head>
<body>
<h1>HHHHello</h1>
</body>
</html>
Nota:
Envíe una solicitud GET: abra la red en la verificación de la página, actualice la página, envíe una solicitud, reciba una respuesta y abra la solicitud superior. Hay encabezados de respuesta y encabezados de solicitud en el encabezado, así como parámetros de cadena de consulta. Los parámetros de cadena de consulta son el resultado del análisis del contenido de la URL solicitada, los encabezados de solicitud son la línea de solicitud y la ubicación del encabezado de la solicitud, los encabezados de respuesta son la línea de respuesta y el encabezado de respuesta, y hacer clic en Respuesta es el cuerpo de la respuesta.
Enviar solicitud POST: los parámetros de cadena de consulta en los encabezados cambiarán a otros.
xhr es el acrónimo de XMLHttpRequest y XHR en la red de inspección de páginas web es el filtro para solicitudes AJAX.
AJAX envía una solicitud GET que lleva parámetros en la URL. Primero sepárelos con signos de interrogación, luego escríbalos directamente y conéctelos con &.
http:127.0.0.1:8080/server?a=100&b=200&c=300
AJAX envía una solicitud GET que lleva parámetros en xhr.send()
//3.发送
xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');
xhr.send('1231212313');
AJAX envía solicitud GET
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX GET 请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取button元素
const btn=document.getElementsByTagName('button')[0];
const result=document.getElementById('result')
//绑定事件
btn.onclick=function(){
//1.创建对象
const xhr=new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');
//3.发送
xhr.send();
//4.事件绑定 处理服务端返回的结果
//on when 当...时候
//readystate是xhr对象中的属性，表示状态0,1,2,3,4
//change 改变
xhr.onreadystatechange=function(){
//判断（服务端返回了所有的结果）
if(xhr.readyState===4){
//判断响应状态码 200 404 403 401 500
//2xx 都是成功
if(xhr.status >= 200 && xhr.status<300){
//处理结果 行 头 空行 体
//1.响应行
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
result.innerHTML=xhr.response
}else{
}
}
}
}
</script>
</body>
</html>
AJAX envía solicitud POST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX POST 请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//获取元素对象
const result=document.getElementById("result");
//绑定事件
result.addEventListener("mouseover",function(){
//1.创建对象
const xhr=new XMLHttpRequest()
//2.初始化 设置类型与URL
xhr.open('POST','http://127.0.0.1:8000/server');
//3.发送
xhr.send('a=100&b=200&c=300');
//4.事件绑定
xhr.onreadystatechange=function(){
//判断
if(xhr.readyState===4){
if(xhr.status>=200&&xhr.status<300){
//处理服务端返回的结果
result.innerHTML=xhr.response;
}
}
}
})
</script>
</body>
</html>
Servidor backend correspondiente.js
const express=require('express')
//创建应用对象
const app=express()
//创建路由规则
//req是对请求报文的封装
//res是对响应报文的封装
app.get('/server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
res.send('ok');
})
app.post('/server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
res.send('okkkk');
})
//监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口启动中。。。")
})
Encabezado de solicitud personalizado
//自定义请求头，需要在后端设置好，否则会报错
xhr.setRequestHeader('name','hhhhhh')
Configuración de backend correspondiente
//可以接收任意类型的请求
app.all('/server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//响应体
res.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
res.send('okkkk');
})
Primero, res.setHeader('Access-Control-Allow-Headers','*'); está configurado para recibir todos los encabezados de respuesta, y luego app.all significa recibir cualquier tipo de solicitud, porque las solicitudes de tipo de opciones serán devueltas y no se puede obtener respuesta, así que cámbielo a todos para recibir.
El servidor responde a datos JSON
app.all('/json-server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//响应头
res.setHeader('Access-Control-Allow-Headers','*');
//响应一个数据
const data={
name:'hoshi'
};
//对对象进行字符串转换
let str=JSON.stringify(data);
//设置响应体
res.send(str)
})
El cuerpo de la respuesta solo puede ser una cadena o un búfer, por lo que es necesario convertir el tipo.
Lo que recibe el cliente es una cadena, que se puede convertir en un objeto JSON. Hay dos formas, una es la conversión automática y la otra es la conversión manual.
Conversión manual:
const data=JSON.parse(xhr.response)
result.innerHTML=data.name;
Conversión automática:
//设置响应体数的类型
xhr.responseType='json';
result.innerHTML=xhr.response.name;
Se ha dedicado a la investigación de tecnología durante más de treinta años, domina varios lenguajes como java, linux, javascript, php, css, etc., y ha realizado muchas contribuciones en el campo del código abierto. una estación de documentación para desarrolladores para compartir algunos problemas en el desarrollo de tecnología para referencia futura.
Correo[email protected]