Los estudiantes que aprenden JavaScript saben que la traducción AJAX (async javascript y
xml) se llama JavaScript asincrónico y XML. También es algo problemático para enviar solicitudes de red en js nativo. Son esos pasos siempre.
Primero revisemos cómo enviar una solicitud de red ajax en js nativo
Clásico 4 pasos
1. Solicitud de red nativa js ajax
// IE9及以上
// const xhr = new XMLHttpRequest()
// IE9以下
// const xhr = new ActiveXObject('Mricosoft.XMLHTTP')
// 对于这个兼容写法我们可以用一个函数来封装
function createXHR() {
var req = null;
if (window.XMLHttpRequest) {
// 如果有这个XMLHttpRequest对象就直接使用
req = new XMLHttpRequest();
} else {
// 否则就使用IE8一下的写法
req = new ActiveXObject("Microsoft.XMLHTTP");
}
return req;
}
// 第一步:创建ajax对象
var xhr = createXHR(); //这样就拿到了一个ajax对象
// 第二步:配置网络请求信息
xhr.open('get', './demo.php', true)
// xhr.open('get/post','要发送网络请求去哪个地址',同步还是异步默认 true 表示异步，false 表示同步)
// 如果是get请求有参数需要拼接在地址后面,例如'./demo.php?id=2&name=sanqi'
// 如果是post请求,参数就要放在send()里面,例如:xhr.send('id=2&name=sanqi')
// 第三步:发送网络请求
xhr.send() //
// 第四部:判断响应状态拿到数据
xhr.onreadyStateChange = function () {
// 每次 readyState 改变的时候都会触发该事件
// 我们就在这里判断 readyState 的值是不是到 4
// 并且 http 的状态码是不是 200 ~ 299
if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
// 这里表示验证通过
// 我们就可以获取服务端给我们响应的内容了
console.log(xhr.response);
}
}
Aquí están los 5 estados de readyState
- readyState -> 0: indica que no se ha completado la inicialización, es decir, no se ha ejecutado el método open
- readyState -> 1: Indica que se ha completado la información de configuración, es decir, después de ejecutar open
- readyState -> 2: indica que se ha ejecutado el método de envío
- readyState -> 3: indica que se está analizando el contenido de la respuesta
- readyState -> 4: indica que el contenido de la respuesta se ha analizado y se puede utilizar en el lado del cliente
Lo anterior es el js nativo que envía una solicitud de red ajax
2. Acerca de la solicitud de red ajax usando jQuery
Cuando estamos aprendiendo jquery, nos enteramos de que todo el mundo dice que todo jq está encapsulado para nosotros, y que estas solicitudes de red no necesitan ser escritas por nosotros. Aun así, todavía no podemos usarlo a ciegas. Aún necesitamos entender antes de usarlo.
(1). Usa jquery para enviar una solicitud de obtención
El siguiente código de back-end unificado usa el nombre de archivo: test.php este archivo
<?php
header('content-type:text/html;charset=utf-8;');
$id = $_REQUEST['id'];
$name = $_REQUEST['name'];
$arr = [
'id' => $id,
'name' => $name
];
echo json_encode($arr);
?>
Utilice jquery para enviar una solicitud de obtención
$.get('./test.php','id=999&name=三七安',function (res) {
//第一个参数是请求的地址
//第二个参数是要发送给服务器的数据
//第三个参数是成功时的回调函数,里面包含服务返回给我们的数据
//第四个参数是我们希望拿到的数据格式:有几种选择:json,text,html,xml,script
console.log(res);
},'json')
Puede ver que la solicitud se envió correctamente
(2) Utilice jquery para enviar una solicitud de publicación
$.post('./test.php',{
id:123,name:'post请求'},function (res) {
//这里其他参数和get请求一致的
//注意,这里的传输数据我用 对象的格式来写,也能发送请求成功,也就是说
//无论是get请求还是post请求,想服务端传数据,既可以使用字符串格式也可以使用对象格式
console.log(res);
},'json')
Esta es la página donde la solicitud se realizó correctamente.
(3) Utilice jquery para enviar una solicitud ajax completa
Primero echemos un vistazo a la sintaxis.
// 使用 $.ajax 方法
// 只接受一个参数，是一个对象，这个对象对当前的请求进行所有的配置
$.ajax({
url: './ajax', // 必填，请求的地址
type: 'GET', // 选填，请求方式，默认是 GET（忽略大小写）
data: {
}, // 选填，发送请求是携带的参数
dataType: 'json', // 选填，期望返回值的数据类型，默认是 string
async: true, // 选填，是否异步，默认是 true
success() {
}, // 选填，成功的回调函数
error() {
}, // 选填，失败的回调函数
cache: true, // 选填，是否缓存，默认是 true
context: div, // 选填，回调函数中的 this 指向，默认是 ajax 对象
status: {
}, // 选填，根据对应的状态码进行函数执行
timeout: 1000, // 选填，超时事件
})
Parece que tienes que completar muchos parámetros cada vez, pero de hecho, la mayoría de los parámetros son opcionales. Solo necesitamos completar
la situación real. En el compilador, la entrada directa de ajax también puede generar rápidamente parte del código.
Envíe el código de solicitud ajax
$.ajax({
type: "get",
url: "./test.php",
data: {
id:000,
name:'发送$.ajax请求的演示'
},
dataType: "json",
success: function (response) {
console.log(response);
}
});
Abra la página web y podrá ver que hemos
agregado varias funciones globales de Ajax, también llamadas funciones de gancho, a los datos que recuperamos del backend , que es una función que se ejecuta en una determinada etapa de todo el proceso de solicitud de Ajax, y es cualquier solicitud de Ajax se activará.
1. ajaxStart , esta función se activará cuando se inicie cualquier solicitud
$(window).ajaxStart(function () {
console.log('有一个请求开始了')
})
2. ajaxSend , esta solicitud se activará antes de que cualquier solicitud esté lista para enviarse .
$(window).ajaxSend(function () {
console.log('有一个要发送出去了')
})
3.ajaxSuccess , esta función se activará cuando cualquier solicitud sea exitosa.
$(window).ajaxSuccess(function () {
console.log('有一个请求成功了')
})
4.ajaxError , esta función se activará cuando falle cualquier solicitud.
$(window).ajaxError(function () {
console.log('有一个请求失败了')
})
5.ajaxComplete , esta función se activará cuando se complete cualquier solicitud
$(window).ajaxComplete(function () {
console.log('有一个请求完成了')
})
6.ajaxStop, esta función se activará cuando finalice cualquier solicitud
$(window).ajaxStop(function () {
console.log('有一个请求结束了')
})
Bueno, lo anterior es el conocimiento relacionado con la solicitud de red ajax de jQuery. Espero hacer un pequeño progreso para todos. Algunos conocimientos también provienen de Internet. Si hay errores u omisiones, señale que Xiaobai debe corregirlos a tiempo, ¡¡¡gracias!!!
La humildad hace que uno progrese, el orgullo hace que uno se quede atrás.