AJAX
1. Información general
1.AJAX
El nombre completo de AJAX es Javascript y XML asíncronos (JS y XML asíncronos). Las solicitudes asíncronas se pueden enviar en el navegador a través de AJAX.La mayor ventaja es que se pueden obtener datos sin actualizar .
ventaja:
- Puede comunicarse con el servidor sin actualizar la página;
- Le permite actualizar partes del contenido de la página según los eventos del usuario.
defecto:
- Sin historial de navegación, sin reversión;
- Hay un problema entre dominios;
- El SEO no es amigable (optimización de motores de búsqueda, los rastreadores no pueden rastrear).
2.XML
Lenguaje de marcado extensible XML, utilizado para transmitir y almacenar datos. XML es similar a HTML, pero HTML tiene etiquetas predefinidas, mientras que XML es una etiqueta personalizada. Ahora ha sido reemplazado por JSON.
3. Problemas entre dominios
Cross-domain significa que los navegadores no pueden ejecutar scripts de otros sitios web. Es causado por la política del mismo origen del navegador, que es una restricción de seguridad impuesta por el navegador.
El llamado mismo origen significa que el nombre de dominio, el protocolo y el puerto son todos iguales. Siempre que haya una diferencia, es entre dominios. Aunque tanto localhost como 127.0.0.1 apuntan a la máquina local, también son de dominio cruzado.
Cross-domain bloqueará la solicitud de la interfaz y la operación de Dom.
4. Protocolo HTTP
El protocolo HTTP (protocolo de transporte de hipertexto), protocolo de transferencia de hipertexto, estipula las reglas para la comunicación mutua entre los navegadores y los servidores de la World Wide Web.
mensaje de solicitud
- Línea: método de solicitud, ruta de URL, versión del protocolo HTTP
- 头：Host, Cookie, Tipo de contenido, Agente de usuario
- linea en blanco
- cuerpo
mensaje de respuesta
- Líneas: versión de protocolo, código de estado de respuesta, cadena de estado de respuesta
- 头：Tipo de contenido、Longitud del contenido、Codificación del contenido
- linea en blanco
- Cuerpo: código fuente html
5. Preparación del entorno
Descargue node.js y express: enlace de procedimientos
2. uso
1. Solicitar operaciones básicas
//获取元素
const btn=document.getElementByTagName('button')[0];
//绑定事件
btn.onclick=function(){
//1.创建对象
const xhr=new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/路径');
//3.发送
xhr.send();
//4.事件绑定 处理服务器端返回结果
//readystate 是xhr对象中的属性，表示状态0 1 2 3 4
//0 未初始化 1 open调用完毕 2 send调用完毕 3 服务器返回部分结果 4 返回所有结果
xhr.onreadystatechange=function(){
if(xhr.readystate===4){
if(xhr.status>=200&&xhr.status<300){
result.innerHTML=xhr.response;
}
}
}
}
2. Configuración de parámetros
Establecer entre URL.
3. Envía una solicitud POST
xhr.open('POST','http://127.0.0.1:8000/路径+参数');
//设置请求头
xhr.setRequestHeader('type','content');
//设置请求体
xhr.send('请求体');
4. Responda a los datos JSON
El servidor envía :
const data={
name:'hh'};
let str=JSON.stringify(data);
response.send(str);
El cliente recibe :
//手动转换
let data=JSON.parse(xhr.response);
console.log(data.name);
//自动转换
console.log(xhr.response.name);
5. Problema de tiempo de espera de solicitud
//1. 2s内未收到结果就取消
xhr.timeout=2000;
//2. 设置超时回调，超时后调用该函数
xhr.ontimeout=function(){
}
//网络异常回调
xhr.onerror=function(){
}
6. Solicitud de cancelación
xhr.abort();
7. Solicitud de reenvío de la pregunta
//标识是否正在发送ajax请求
let isSending=false;
//发送后将isSending 改为true
//绑定事件
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
isSending=false;
}
}
8. Use la función de búsqueda para enviar una solicitud ajax
fetch('url',{
method:'POST',
//请求头
headers:{
name:'ahh'
},
//请求体
body:''
}).then(response=>{
return response.text();//response.json();
});
3. Usando ajax en jQuery
1. obtener solicitud
$.get(url,[data],[callback],[type])
- url: la dirección URL solicitada
- datos: los parámetros transportados
- devolución de llamada: función de devolución de llamada cuando la carga es exitosa
- tipo: establezca el formato de contenido devuelto
2. publicar solicitud
$.post(url,[data],[callback],[type])
- url: la dirección URL solicitada
- datos: los parámetros transportados
- devolución de llamada: función de devolución de llamada cuando la carga es exitosa
- tipo: establezca el formato de contenido devuelto
3. Modo general
$('button').eq(0).click(function(){
$.ajax({
url:'',
data:{
a:100,b:200},
type:'GET' //'POST',
dataType:'json',
success:function(data){
},
timeout:2000,
error:function(){
}
})
})
4. Axios usa ajax
5. Problemas entre dominios
1. Política del mismo origen
Una política de seguridad para navegadores, mismo origen: protocolo, nombre de dominio y número de puerto deben ser exactamente iguales.
La violación de la política del mismo origen es entre dominios.
2. Cómo resolver dominios cruzados
- JSONP : solo se admiten solicitudes GET.
Algunas etiquetas tienen capacidades de dominio cruzado, como img, link, iframe, script y JSONP utilizan las capacidades de dominio cruzado de las etiquetas de script para enviar solicitudes.
La solicitud de envío del script debe devolver la declaración js .
jQuery envía una solicitud jsonp :
$('button').eq(0).click(function(){
$.getJSON('url',function(data){
})
})
- CORS: Intercambio de recursos de origen cruzado
No es necesario realizar ninguna operación especial en el lado del cliente, y se procesa completamente en el servidor, lo que admite solicitudes de obtención y publicación.
CORS le dice al navegador que la solicitud permite el origen cruzado al establecer un encabezado de respuesta.
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Header","*");
response.setHeader("Access-Control-Allow-Method","*");
//*：全部
// 也可以写一个具体的url地址。