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

结果显示

posted @ 2023-01-09 13:31  GTK  阅读(41)  评论(0)    收藏  举报