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

2019-04-28 13:55:40 阅读：263 来源： 互联网

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

<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请求的类型，地址，是否异步
       //共两种请求方式 onl oad和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":"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+=`
           <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>

标签：异步,responseText,请求,json,xhr,ajax,user,var,加载
来源： https://blog.csdn.net/qq_41442781/article/details/89636144

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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