web之Ajax

一、Ajax的基本用法

　　先写一个基本的结构

复制代码
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ajax-juqery</title></script>
 </head>
 <body>
     <div id="app">
         I am div
     </div>
     <button id="btn">获取数据</button>
     <script>
       // 稍后在写写AJAX
     </script>
 </body>
</html>
复制代码

　　Ajax就四个步骤

　　　　1. 创建 XMLHttpRequest 对象
　　　　2. 使用 open("GET","数据地址",true)方法 true 指的是异步，false则相反
　　　　3. 使用 send() 方法 是GET就发送空的数据
　　　　4. 对readstate、status状态进行判断进行操作数据

　　JS部分

复制代码
  <script>
    let app = document.getElementById('app');
    let btn = document.getElementById('btn');
    btn.onclick = function () {
      const ajax = new XMLHttpRequest();
      ajax.open("Get", 'static/db.json', true);
      ajax.send(); // 因为是get请求所以不需要发送任何数据
      /**
       * readystate是ajax对象的属性
       *  0 表示未初始化
       *  1 表示 open 调用完成
       *  2 表示 send 调用完成
       *  3 表示 服务端返回部分数据 一般在这判断就可以了
       *  4 表示 返回了完全的数据
      */
      ajax.onreadystatechange = function () {
        if (ajax.readyState == 4) {
          if (ajax.status >= 200 && ajax.status < 300) {
            console.log(ajax.response);
          }
        }
      }
    }
  </script>
复制代码

 

二、记得用LiveServer插件启动，这样可以避免跨域的问题，（至于跨域你可以学深了再去了解）

　　

　　

三、结尾所有的代码

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax</title>
</head>

<body>
  <div id="app">
    I am div
  </div>
  <button id="btn">获取数据</button>
  <script>
    let app = document.getElementById('app');
    let btn = document.getElementById('btn');
    btn.onclick = function () {
      const ajax = new XMLHttpRequest();
      ajax.open("Get", 'static/db.json', true);
      ajax.send(); 
      ajax.onreadystatechange = function () {
        if (ajax.readyState == 4) {
          if (ajax.status >= 200 && ajax.status < 300) {
            let str = "";
            for (let i = 0; i < JSON.parse(ajax.response).length; i++) {
              const data = JSON.parse(ajax.response)[i];
              str += `我的ID是${data.id},名字是${data.name},年龄是${data.age}\n`;
            }
            app.innerText = str;
          }
        }
      }
    }
  </script>
</body>

</html>
View Code
复制代码

结果显示


__EOF__

本文作者：GTK
本文链接：https://www.cnblogs.com/DnmyCourage/p/17036775.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   GTK  阅读(20)  评论(0)  编辑  收藏  举报
相关博文：
· 消失的 Token
· 宝贵的一票
· Ajax基本使用
· Ajax_基本知识
· Ajax使用步骤
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示