Ajax怎么在前端实现异步,前端基础-ajax（实现异步加载）

请求纯文本

请求存文本

请求json单个用户

请求json单个用户

请求json多个用户

请求json多个用户

//ajax请求存文本数据

var d=document.getElementById("button");//获取到按钮

d.addEventListener("click",afun);//添加点击事件

function afun(){//要执行的函数

//console.log("dd");

var xhr=new XMLHttpRequest();//获取方法

//console.log(xhr);

xhr.open("GET","xh.html",true);//ajax请求的类型，地址，是否异步

//共两种请求方式 onl oad和onreadystatechange

xhr.οnlοad=function(){//第一种请求方式onload，它的状态码只有1、4

console.log("第一种请求方式onload"+xhr.responseText);//打印xhr的返回的数据responseText获得字符串形式的响应数据。

}

xhr.onreadystatechange=function(){//第二种请求方式onreadystatechange，

if(this.status==200&&this.readyState==4){//这样会让它在4的状态下打印，默认状态3、4都会打印

console.log("第二种请求方式onreadystatechange"+xhr.responseText);//打印xhr的返回的数据responseText获得字符串形式的响应数据,默认它会直接打印两次。

}

document.getElementById("h1").innerHTML=this.responseText;//将文本添加到h1标签里面

}

xhr.send();//将请求发送到服务器上

}

//readyState状态码

//  0: 请求未初始化

//  1: 服务器连接已建立

//  2: 请求已接收

//  3: 请求处理中

//  4: 请求已完成，且响应已就绪

//  可以在xhr.readyState中查看

//  HTTP状态码(status)

//  200: "OK"

//  404: 未找到页面

//  503：服务器暂时不可用

//ajax请求json格式的数据

//先在外部创建两个json格式的数据

//第一个是单个json数据user.json，如：{"id":12,"name":"zhb","email":"123@qq.com"}

//第二个是个数组users.json，如：[{"id":2,"mane":"zhb2"},{"id":3,"name":"zhb3"}]

document.getElementById("button2").addEventListener("click",json1);//获得button2这个按钮

function json1(){

var xhr2=new XMLHttpRequest();

xhr2.open("GET","user.json",true);

xhr2.onreadystatechange=function(){

if(this.status==200){

//console.log(this.responseText);//打印出来的是一个json，我们需要解析成对象

var user=JSON.parse(this.responseText);

console.log(user.name);

var output="";

output+=`

• ${user.id}
• ${user.name}
• ${user.email}

`;

document.getElementById("h2").innerHTML=output;

}

}

xhr2.send();

}

//当需要用users数组里的json数据时

//           var output2="";

//           for(var i in users){

//            output2+=`

//            

//            

${users[i].id}

//            

${users[i].name}

//            

${users[i].email}

//            

`;

//           }

//

//            document.getElementById("h3").innerHTML=output2;

标签：异步,responseText,请求,json,xhr,ajax,user,var,加载

来源： https://blog.csdn.net/qq_41442781/article/details/89636144