ajax
Introdução
Simplificando, o ajax é um meio de interação front-end e back-end .
Ajax é uma palavra composta, onde a é uma palavra em inglês e assíncrona, o que significa assíncrono, j é js, a: e, x: dados no lado do servidor, então podemos entender facilmente que ajax é na verdade uma combinação de tecnologia.
Características : Os dados podem ser carregados de forma assíncrona, os dados podem ser carregados sem interromper outras tarefas do navegador, os dados podem ser carregados sem atualização e carregamento parcial.
Vantagens e desvantagens:
Ajax é compatível, mas não é compatível
Carregando dados sem atualizar, melhorando a experiência do usuário
Carregando dados sem atualizando, carregando parcialmente, melhorando o desempenho
Ambiente de uso do Ajax:
Ajax é interação front-end e back-end
. Se houver ajax,
haverá deve ser um plano de fundo. Servidor
Portanto, o ajax também deve ser executado no ambiente do servidor
. No processo de aprendizagem do ajax, precisamos entender a análise de dados, porque precisamos converter dados ao escrever interações de front-end e back-end, e exiba os dados adicionados ao front-end. É uma operação básica e vou vincular os métodos de análise necessários aqui: JSON.patrse(); e eval() .
JSON.parse() só pode converter o formato json, eval (): executa caracteres como código js, o conteúdo dentro dos caracteres necessários está em conformidade com a sintaxe js. Você pode executar o código abaixo para ver a diferença.
var json = '[{"name":"admin"},]';
console.log(eval(json));
console.log(JSON.parse(json));
Abaixo, listarei algumas partes do código ajax para você, que é conveniente para todos aprenderem e usarem. Ele precisa ser executado no servidor durante a execução. Se você não o tiver, poderá instalar um phpstudy. Existem gratuitos na Internet. Esses pedaços de código devem estar em ordem um a um. Digite, há comentários no código, acredito que todos possam entender.
Crie uma pasta ajax, crie uma subpasta data na pasta e crie um arquivo text.txt e test.php na pasta dada, com conteúdo aleatório. Após a conclusão do trabalho de preparação, você pode criar e executar o seguinte código:
ajax-get.html, o código é o seguinte
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
测试ajax的get请求。
</body>
<script type="text/javascript">
// //var url = "data/text.txt";//相对路径，在本机可以，放在服务器就出现问题了
var url = "http://localhost/Myphp/ajax/data/text.txt";//绝对路径不容易出错，任何情况下都可以访问到。
//1、声明载体xhr对象
var xhr = new XMLHttpRequest();
//2、发起请求，设置请求方式，地址，异步
xhr.open("get",url,true);//默认为true也就是异步
//3、等待接通
//3、通过事件监听状态
xhr.onreadystatechange = function(){
//readyState状态:ajax的执行阶段
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.status+"="+"交易成功");
console.log(xhr.responseText);
}else if(xhr.readyState == 4 && xhr.status !=200){
console.log(xhr.status);
}
}
//4、发送
xhr.send(null);
</script>
</html>
O código ajax-get2.html é o seguinte: Este é o pacote do ajax, que é conveniente para nós usarmos
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--正在验证ajax-get的封装，点击页面发起请求-->
</body>
<script type="text/javascript">
document.onclick = function(){
var url = "http://localhost/Myphp/ajax/data/test.php";
ajaxGet(url,function(res){
console.log(res);
},{
user:"admin",
pass:123,
age:13,
sex:1,
like:"ball"
});
}
//第三个数据是可选的，可以有也可以没有
function ajaxGet(url,cb,data){
//1、解析并拼接数据
var str = "";
for(var i in data){
str = str + i + "=" +data[i]+"&";
}
//console.log(str.slice(0,str.length-1));//注意数组，字符串方法的灵活使用。
//2、把拼接好的数据再拼接到url
url = url + "?" + str.slice(0,str.length-1);
//3、开启ajax过程。
var xhr = new XMLHttpRequest();
xhr.open("get",url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
cb(xhr.responseText);//给回调函数传参。（好好想回调传参）
}
}
xhr.send();
}
</script>
</html>
O código ajax-post.html é o seguinte
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
post封装测试。
</body>
<script type="text/javascript">
var url = "http://localhost/Myphp/ajax/data/post.php";
document.onclick = function(){
ajaxPost(url,function(res){
console.log(res);
},{
a:"hello",
b:"world",
abc:"hahaha"
})
}
//
function ajaxPost(url,cb,data){
//1\解析对象拼接数据
data = data || {
};
var str = "";
for(var i in data){
str = str + i + "=" + data[i] + "&";
}
str = str.slice(0,str.length-1);
//2\执行ajax
var xhr = new XMLHttpRequest();
xhr.open("post",url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
cb(xhr.responseText);
}
}
//3、设置发送头文件
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//4、发送
xhr.send(str);
}
</script>
</html>
epílogo
Quando você estiver estudando, você mesmo deve digitar. Não pense que é perda de tempo. É só atribuir e colar, e o efeito é completamente diferente. vivendo confortavelmente sem a ajuda de ninguém.