Ajax基础

2021-01-11  本文已影响0人  amanohina

Google Suggest

AJAX

应用场景

体验ajax

https://jsonplaceholder.typicode.com/

例如：

<script>
    // jQuery 中的 Ajax 方法
    $.ajax({
      url : "https://jsonplaceholder.typicode.com/users",
      type: "GET",
      dataType : "json",
      data : {"id" : 1},
      success : function(data){
        console.log(data);
      }
    })
  </script>

原生Ajax

发送ajax请求步骤

<script>
    // 1.创建一个 XMLHttpRequest 类型的对象  --- 相当于打开了一个浏览器
    var xhr = new XMLHttpRequest();
    // 2.打开一个与网址之间的连接  --- 相当于在地址栏输入网址
    xhr.open("GET","https://jsonplaceholder.typicode.com/users");
    // 3.通过连接发送一次请求 --- 相当于点击回车或者超链接
    xhr.send(null);
    // 4.指定 xhr 状态变化事件处理函数   --- 相当于处理网页呈现后的操作
    xhr.onreadystatechange = function () {
      // 通过判断 xhr 的 readyState ，确定此次请求是否完成
      if (this.readyState === 4) {
        console.log(this.responseText)
      }
    }
  </script>

XMLHttpRequest 类型对象

  // 1.创建一个 XMLHttpRequest 类型的对象 
    var xhr = null;
    // 兼容写法
    if (window.XMLHttpRequest) {
      // 标准浏览器
      xhr = new XMLHttpRequest();
    } else {
      // IE 6 浏览器
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

open() 方法开启请求

setRequestHeader() 方法设置请求头

send() 方法发送请求

// 2.open() 方法开启请求
    // xhr.open("GET","https://jsonplaceholder.typicode.com/users?id=1");
    xhr.open("POST","https://jsonplaceholder.typicode.com/users");
    // 设置请求头
    // 一般 get 方法不需要设置，而 post 方法必须设置
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    // 3.send() 方法发送一次请求
    // 如果是 get 方法请求，不需要再 send 中传参数，它如果想传参数，直接写在网址上
    // xhr.send(null);
    xhr.send("name=harry&age=19");
    
    xhr.onreadystatechange = function () {
      // 通过判断 xhr 的 readyState ，确定此次请求是否完成
      if (this.readyState === 4) {
        console.log(this.responseText)
      }
    }

readyState 属性

readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态，由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次，所以我们有必要了解每一个状态值代表的含义：



过程梗概 
xhr.onreadystatechange = function() {
 if (this.readyState === 4) 
{ // 后续逻辑...... 
} };

同步和异步

ajax实现

建议：

xml数据格式

JSON数据格式

JSON 格式的数据，与 js 对象的区别

1.JSON 数据不需要存到变量中
2.结束时不需要写分号
3.JSON 数据中的属性名必须加引号

{
  "name": "tom",
  "age": 19,
  "hobby": ["novel","sing"]
}

JSON对象

注意：

json-server

https://github.com/typicode/json-server

使用指令安装json-server

npm install -g json-server

在vscode终端下启动json-server并且监听json文件

json-server --watch db.json

显示如下
json数据

如果启动json-server报错，并且报错为禁止脚本运行，参照以下

https://blog.csdn.net/Q_do_it/article/details/107785076

原生ajax具体方法-GET

<script>
    var xhr = new XMLHttpRequest();
    // 发送 GET 请求
    xhr.open("GET", "http://localhost:3000/users?age=19");
    xhr.send(null);
    xhr.onreadystatechange = function () {
      if (this.readyState === 4) {
        console.log(this.responseText);
      }
    }
  </script>

原生ajax具体方法-POST

var xhr = new XMLHttpRequest();
    // post 请求
    xhr.open("POST","http://localhost:3000/users");
    // 设置请求头
    // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.setRequestHeader("Content-Type","application/json");
    // xhr.send("name=lily&age=19&class=2");
    // xhr.send(`{
    //   "name": "lulu",
    //   "age": 18,
    //   "class": 2
    // }`);
    xhr.send(JSON.stringify({
      "name": "harry",
      "age": 18,
      "class": 1
    }));
    xhr.onreadystatechange = function () {
      if (this.readyState === 4) {
        console.log(this.responseText);
      }
    }

处理响应数据渲染

<body>
  <table border="1" id="box">
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>班级</th>
    </tr>
    
  </table>
  <script>
    // 获取元素
    var box = document.getElementById("box")
    var xhr = new XMLHttpRequest();
    // 发送 GET 请求
    xhr.open("GET", "http://localhost:3000/users");
    xhr.send(null);
    xhr.onreadystatechange = function () {
      if (this.readyState === 4) {
        // 讲获取的响应体的字符串转为对象
        var data = JSON.parse(this.responseText)
        console.log(data);
        var str = "";
        // 循环遍历数组
        for (var i = 0 ; i < data.length ;i++) {
          // 进行字符串拼接 
          // str += "<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td><td>" + data[i].age + "</td><td>" + data[i].class + "</td></tr>";
          // 使用 模板字符串 进行拼接
          str += `<tr>
            <td>${data[i].id}</td>
            <td>${data[i].name}</td>
            <td>${data[i].age}</td>
            <td>${data[i].class}</td>
          </tr>`
        }
        box.innerHTML += str;
      }
    };
  </script>
</body>

封装AJAX库

提取参数

封装函数

 function ajax(method, url, params, done) {
      // 统一将方法中的字母转大写，便于后面判断
      method = method.toUpperCase();
      // 书写 IE 6 的兼容
      var xhr = window.XMLHttpRequest 
      ? new XMLHttpRequest() 
      : new ActiveXObject("Microsoft.XMLHTTP");
      // 将对象格式的参数转为 urlencoded的格式
      var pairs = [];
      for (var k in params) {
        pairs.push(k + "=" + params[k]);
      }
      var str = pairs.join("&");
      // 判断是否是 get 方法，需要更改 url 的值
      if (method === "GET") {
        url += "?" + str;
      }
      // 创建打开一个连接
      xhr.open(method, url);
      var data = null;
      // 如果是 post 方法，需要设置请求头，还有请求体
      if (method === "POST") {
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        data = str;
      }
      xhr.send(data);
      // 执行回调函数
      xhr.onreadystatechange = function () {
        if (this.readyState !== 4) return;
        // 执行外部传进来的回调函数即可
        // 需要用到响应体
        done(JSON.parse(this.responseText));
      }
    }

封装完毕之后可以单独建立一个JS文件以供后面调用

上一篇下一篇

猜你喜欢

热点阅读