前端基础-ajax（实现异步加载）

<button id="button">请求纯文本</button>
<h1 id="h1">请求存文本</h1>

<button id="button2">请求json单个用户</button>
<h2 id="h2">请求json单个用户</h2>

<button id="button3">请求json多个用户</button>
<h3 id="h3">请求json多个用户</h3>

<script>//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请求的类型，地址，是否异步
       //共两种请求方式 onload和onreadystatechange

       xhr.onload=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：服务器暂时不可用
</script>

<script>//ajax请求json格式的数据
//先在外部创建两个json格式的数据
   //第一个是单个json数据user.json，如：{"id":12,"name":"zhb","email":"[email protected]"}
   //第二个是个数组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+=`
           <ul>
           <li>${user.id}</li>
           <li>${user.name}</li>
           <li>${user.email}</li>
           </ul>`;
           document.getElementById("h2").innerHTML=output;
           }
       }

       xhr2.send();
   }


   //当需要用users数组里的json数据时
//   var output2="";
//       for(var i in users){
//           output2+=`
//           <ul>
//           <li>${users[i].id}</li>
//           <li>${users[i].name}</li>
//           <li>${users[i].email}</li>
//           </ul>`;
//       }
//
//           document.getElementById("h3").innerHTML=output2;
</script>

前端基础-ajax（实现异步加载）

猜你喜欢