Os alunos que aprendem JavaScript sabem que a tradução de AJAX (javascript assíncrono e
xml) é chamada de JavaScript e XML assíncrono. Também é algo problemático para enviar solicitações de rede em js nativo. São essas etapas sempre.
Vamos primeiro revisar como enviar uma solicitação de rede ajax em js nativo
4 etapas clássicas
1. Solicitação de rede js ajax nativa
// 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);
}
}
Aqui estão os 5 estados de readyState
- readyState -> 0: indica que a inicialização não foi concluída, ou seja, o método aberto não foi executado
- readyState -> 1: Indica que as informações de configuração foram concluídas, ou seja, após a execução de open
- readyState -> 2: Indica que o método send foi executado
- readyState -> 3: indica que o conteúdo da resposta está sendo analisado
- readyState -> 4: indica que o conteúdo da resposta foi analisado e pode ser usado no lado do cliente
O acima é o js nativo enviando uma solicitação de rede ajax
2. Sobre a solicitação de rede ajax usando jQuery
Quando estamos aprendendo jquery, aprendemos que todo mundo está dizendo que todo jq está encapsulado para nós, e essas solicitações de rede não precisam ser escritas por nós. Mesmo assim, ainda não podemos usá-lo cegamente. Ainda precisamos entender antes de usá-lo.
(1). Use jquery para enviar a solicitação get
O seguinte código back-end unificado usa o nome do arquivo: test.php este arquivo
<?php
header('content-type:text/html;charset=utf-8;');
$id = $_REQUEST['id'];
$name = $_REQUEST['name'];
$arr = [
'id' => $id,
'name' => $name
];
echo json_encode($arr);
?>
Use jquery para enviar um pedido de obtenção
$.get('./test.php','id=999&name=三七安',function (res) {
//第一个参数是请求的地址
//第二个参数是要发送给服务器的数据
//第三个参数是成功时的回调函数,里面包含服务返回给我们的数据
//第四个参数是我们希望拿到的数据格式:有几种选择:json,text,html,xml,script
console.log(res);
},'json')
Você pode ver que a solicitação foi enviada com sucesso
(2) Use jquery para enviar uma solicitação de postagem
$.post('./test.php',{
id:123,name:'post请求'},function (res) {
//这里其他参数和get请求一致的
//注意,这里的传输数据我用 对象的格式来写,也能发送请求成功,也就是说
//无论是get请求还是post请求,想服务端传数据,既可以使用字符串格式也可以使用对象格式
console.log(res);
},'json')
Esta é a página onde o pedido foi bem sucedido
(3) Use jquery para enviar uma solicitação abrangente de ajax
Vamos dar uma olhada na sintaxe primeiro
// 使用 $.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 você tem que preencher muitos parâmetros todas as vezes, mas na verdade, a maioria dos parâmetros são opcionais. Nós só precisamos preencher
a situação real. No compilador, a entrada direta ajax também pode gerar rapidamente parte do código.
Envie o código de solicitação ajax
$.ajax({
type: "get",
url: "./test.php",
data: {
id:000,
name:'发送$.ajax请求的演示'
},
dataType: "json",
success: function (response) {
console.log(response);
}
});
Abra a página da web e você pode ver que
adicionamos várias funções globais Ajax, também chamadas de funções de gancho, aos dados que recuperamos do back-end , que é uma função executada em um determinado estágio em todo o processo de solicitação Ajax, e é qualquer solicitação Ajax será acionada.
1. ajaxStart , esta função será acionada quando qualquer solicitação for iniciada
$(window).ajaxStart(function () {
console.log('有一个请求开始了')
})
2. ajaxSend , esta solicitação será acionada antes que qualquer solicitação esteja pronta para ser enviada .
$(window).ajaxSend(function () {
console.log('有一个要发送出去了')
})
3.ajaxSuccess , esta função será acionada quando qualquer solicitação for bem sucedida.
$(window).ajaxSuccess(function () {
console.log('有一个请求成功了')
})
4.ajaxError , esta função será acionada quando qualquer solicitação falhar.
$(window).ajaxError(function () {
console.log('有一个请求失败了')
})
5.ajaxComplete , esta função será acionada quando qualquer solicitação for concluída
$(window).ajaxComplete(function () {
console.log('有一个请求完成了')
})
6.ajaxStop, esta função será acionada quando qualquer pedido terminar
$(window).ajaxStop(function () {
console.log('有一个请求结束了')
})
Bem, o acima é o conhecimento relacionado à solicitação de rede ajax do jQuery. Espero fazer um pequeno progresso para todos. Algum conhecimento também vem da Internet. Se houver erros ou omissões, por favor, indique que Xiaobai deve corrigi-los a tempo, obrigada!!!
A humildade faz a pessoa progredir, o orgulho faz a pessoa ficar para trás.