Ajax ajax原生-xhr对象处理get请求

本是古典 何须时尚 2021-07-24 11:38 607阅读 0赞

前台:

  1. <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title></title>
  5.     <script src="jquery-3.4.1.js"></script>
  6. </head>
  7. <body>
  9.     <button>发送请求</button>
  11.     <script>
  12.         var btn=document.querySelector('button');
  13.         btn.onclick=function()
  14.         { 
  15.             //创建xhr对象
  16.             var xhr=new XMLHttpRequest();
  17.             //监听请求是否成功
  18.             xhr.onreadystatechange=function()
  19.             { 
  20.                 //通过readyState属性的值，判断当前请求状态
  21.                 if(xhr.readyState==4)
  22.                 { 
  23.                     console.log("已接受");
  24.                     //通过status属性来判断前台接收状态
  25.                     if(xhr.status==200)
  26.                     { 
  27.                         console.log(xhr.statusText);
  28.                         //此时表明真正接收到了数据
  29.                         console.log(xhr.responseText);
  30.                         console.log(JSON.parse(xhr.responseText));
  31.                     }
  32.                 }
  34.             };
  36.             //发送ajax
  37.             //设置发送
  38.             //无参get
  39.             xhr.open('get','3.php',true);
  40.             //有参get
  41.             xhr.open('get','3.php?uame='+uname+'&upwd='+upwd);
  42.             //开始发送
  43.             xhr.send(null);
  45.         }
  47.     </script>
  49. </body>
  51. </html>

后台:

  1. <?php
  2.     $success=array('mes'=>'ok');
  3.     echo json_encode($success);
  7. ?>

发表评论

表情：
评论列表 （有 0 条评论，607人围观）

还没有评论，来说两句吧...

相关阅读