FLask 框架-AJAX（异步 JavaScript 与 XML） -- 潘登同学的 flask 学习笔记

FLask 框架-AJAX（异步 JavaScript 与 XML） -- 潘登同学的 flask 学习笔记

AJAX 技术

AJAX 使用
AJAX 中 GET 请求参数传递
AJAX 中 POST 请求传递参数
AJAX 获取状态码与处理结果
AJAXc 错误处理

AJAX 封装

AJAX 封装-处理响应
- 失败处理
- 处理返回数据
AJAX 封装设置默认值

JQuery 中 AJAX 的使用

JQuery 中 get 与 post

AJAX 技术

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

传统网站中存在的问题

网速慢的情况下，页面加载时间长，用户只能等待
表单提交后，如果一项内容不合格，需要重新填写所有表单内容
页面跳转，重新加载页面，造成资源浪费，增加用户等待时间（分页跳转，只需要更新主要内容）

AJAX 的应用场景

页面上拉加载更多数据
列表数据无刷新分页
表单页离开焦点数据验证
搜索框提示文字下拉列表
级联显示

AJAX 运行原理

AJAX运行原理

AJAX 使用

1.创建 AJAX XMLHttpRequest 对象

let xhr = new XMLHttpRequest();

2.设置 AJAX 请求地址以及请求方式,通过 XMLHttpRequest.open() 方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。

void open(
   string method,
   string url,
   optional boolean async,
   optional string user,
   optional string password
);

method ：表示 HTTP 动词方法，比如 GET 、 POST 、 PUT 、 DELETE 、 HEAD等。
url : 表示请求发送目标 URL。
async : 布尔值，表示请求是否为异步，默认为 true 。如果设为 false ，则 send() 方法只有等到收到服务器返回了结果，才会进行下一步操作。该参数可选。由于同步 AJAX 请求会造成浏览器失去响应，许多浏览器已经禁止在主线程使用，只允许 Worker 里面使用。所以，这个参数轻易不应该设为 false 。
user ：表示用于认证的用户名，默认为空字符串。该参数可选。
password ：表示用于认证的密码，默认为空字符串。该参数可选。

xhr.open("GET", "http://httpbin.org/get");

3.发送请求, XMLHttpRequest.send() 方法用于实际发出 HTTP 请求。它的参数是可选的，如果不带参数，就表示 HTTP 请求只包含头信息，也就是只有一个 URL，典型例子就是 GET 请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。
4.获取服务器端给客户端的响应数据 XMLHttpRequest 对象可以对以下事件指定监听函数
- XMLHttpRequest.onloadstart：loadstart 事件（HTTP 请求发出）的监听函数
- XMLHttpRequest.onprogress：progress 事件（正在发送和加载数据）的监听函数
- XMLHttpRequest.onabort：abort 事件（请求中止，比如用户调用了 abort() 方法）的监听函数
- XMLHttpRequest.onerror：error 事件（请求失败）的监听函数
- XMLHttpRequest.onload：load 事件（请求成功完成）的监听函数
- XMLHttpRequest.ontimeout：timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数
- XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数
- XMLHttpRequest.onreadystatechange: readystatechange 事件(当 readyState 属性变化)的监听函数

// resopnseText是响应文本
xhr.onload = function () {
  console.log(xhr.resopnseText);
};

AJAX 简单操作，实现动态加载页面

<body>
  <h1>AJAX的基本使用</h1>
  <div class="container"></div>
  <script>
    // 创建AJAX
    let xhr = new XMLHttpRequest();
    // 设置请求的参数
    xhr.open("GET", "http://httpbin.org/get");
    // 发生请求
    xhr.send();
    // 获取响应数据
    xhr.onload = function () {
      // 获取响应的文本内容
      content = xhr.responseText;
      // 输出到控制台
      console.log(content);
      // 获取div的对象
      container = document.querySelector(".container");
      // 将数据填充到div中
      container.innerHTML = content;
    };
  </script>
</body>

AJAX 中 GET 请求参数传递

在 get 请求中，参数是拼接在 url 中的，所以此时可以获取到参数，拼接到 url 即可

<body>
    <h1>AJAX中GET请求传参</h1>
    <div class='container'></div>
    <script>
        // 创建AJAX
        let xhr = new XMLHttpRequest();
        // 设置url
        let url = 'http://httpbin.org/get';
        // 拼接请求参数
        let args = '?uname=pd&pwd=123'
        url += args
        // 设置请求的参数
        xhr.open("GET", url);
        // 发生请求
        xhr.send();
        // 获取响应数据
        xhr.onload = () => {
            // 获取响应的文本内容
            content = xhr.responseText;
            // 获取div的对象
            container = document.querySelector(".container");
            // 将数据填充到div中
            container.innerHTML = content;
        }
    </script>
</body>

AJAX中GET请求传参

<body>
  <h1>AJAX中GET请求传参</h1>
  <input type="text" name="" id="uname" />
  <input type="text" name="" id="pwd" />
  <input type="button" value="获取用户名和密码" onclick="submitform()" />
  <script>
    function submitform() {
      uname = document.getElementById("uname").value;
      pwd = document.getElementById("pwd").value;
      let xhr = new XMLHttpRequest();
      let url = "http://httpbin.org/get";
      let args = "?uname=" + uname + "&pwd=" + pwd;
      url += args;
      xhr.open("GET", url);
      xhr.send();
      xhr.onload = () => {
        // 获取响应的文本内容
        content = xhr.responseText;
        console.log(content);
      };
    }
  </script>
</body>

AJAX 中 POST 请求传递参数

AJAX 使用 post 的请求基本一样。但在传参时，有些不同，参数应该放在 body 中，并通过XMLHttpRequest.setRequestHeader() 设置请求信息的格式

XMLHttpRequest.setRequestHeader() 方法用于设置浏览器发送的 HTTP 请求的头信息。该方法接受两个参数。第一个参数是字符串，表示头信息的字段名，第二个参数是字段值

注意: XMLHttpRequest.setRequestHeader() 该方法必须在 open() 之后、 send() 之前调用。如果该方法多次调用，设定同一个字段，则每一次调用的值会被合并成一个单一的值发送

<table>
  <tr>
    <td>用户名:</td>
    <td><input type="text" name="" id="uname1" /></td>
  </tr>
  <tr>
    <td>密码:</td>
    <td><input type="text" name="" id="pwd1" /></td>
  </tr>
  <tr>
    <td>
      <input type="button" value="传递数据-str" onclick="submitform_str()" />
    </td>
    <td><input type="button" value="传递数据-json" /></td>
  </tr>
</table>
<script>
  function submitform_str() {
    // 获取数据
    uname1 = document.getElementById("uname1").value;
    pwd1 = document.getElementById("pwd1").value;
    // 拼接参数
    let args = "uname=" + uname1 + "&pwd=" + pwd1;
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "http://httpbin.org/post");
    // 设置请求内容的类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 在open之后，send之前
    xhr.send(args);
    xhr.onload = () => {
      console.log(xhr.responseText);
    };
  }
</script>

AJAX中POST请求传参

function submitform_json() {
  // 获取数据
  uname1 = document.getElementById("uname1").value;
  pwd1 = document.getElementById("pwd1").value;
  let args = { uname: uname1, pwd: pwd1 };
  args = JSON.stringify(args);
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "http://httpbin.org/post");
  // 设置请求内容的类型
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.send(args);
  xhr.onload = () => {
    console.log(xhr.responseText);
  };
}

AJAX中POST请求传参1

注意 get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的

AJAX 获取状态码与处理结果

AJAX获取状态码与处理结果

我们需要判断服务器响应的数据是正确还是错误来解析数据，否则前面就会显示出错

AJAX 状态码

在创建 AJAX 对象，配置 AJAX 对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数据就是 AJAX 状态码

XMLHttpRequest.readyState 返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回以下值。

0:表示 XMLHttpRequest 实例已经生成，但是实例的 open() 方法还没有被调用。
1:表示 open() 方法已经调用，但是实例的 send() 方法还没有调用，仍然可以使用实例的setRequestHeader() 方法，设定 HTTP 请求的头信息。
2:表示实例的 send() 方法已经调用，并且服务器返回的头信息和状态码已经收到。
3:表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的 responseType 属性等于 text 或者空字符串， responseText 属性就会包含已经收到的部分信息。
4:表示服务器返回的数据已经完全接收，或者本次接收已经失败。

HTTP 状态码

XMLHttpRequest.status 属性返回一个整数，表示服务器回应的 HTTP 状态码。一般来说，如果通信成功的话，这个状态码是 200；如果服务器没有返回状态码，那么这个属性默认是 200。请求发出之前，该属性为 0 。该属性只读

在 XMLHttpRequest.onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时,再执行任务

function get_data() {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", "https://httpbin.org/get");
  xhr.send();
  xhr.onreadystatechange = () => {
    // 当AJAX的状态码为4，并且http的状态码为200时
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        console.log(xhr.responseText);
        // 转换数据类型
        data = JSON.parse(xhr.responseText);
        console.log(data);
      } else {
        // 查看异常
        console.log(xhr.status);
      }
    } else {
      console.log(xhr.readyState);
    }
  };
}

服务器端响应的数据格式

在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。

在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，一般都会被转换为对象字符串进行传输

JSON.parse(); //将json字符串转换为json对象

AJAXc 错误处理

网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期的结果。可以判断服务器端返回的状态码，分别进行处理。 xhr.status获取 http 状态码

网络畅通，服务器端没有接收到请求，返回 404 状态。检查请求地址是否错误
网络畅通，服务器端能接收到请求，服务器端返回 500 状态码
网络中断，请求无法发送到服务器端

在 AJAX 中设置一个专门处理请求失败的监听函数 XMLHttpRequest.onerror ：error 事件（请求失败）的监听函数

AJAX 封装

对 POST 与 GET 方法进行封装

function AJAX1(options) {
  // options是一个JSON对象，
  // options:
  //  type:请求的方式
  //  url:请求的地址
  //  data:请求的参数，类型的JSON
  let xhr = new XMLHttpRequest();
  // 处理请求的参数
  let args = "?";
  for (let key in options.data) {
    args += key + "=" + options.data[key] + "&";
  }
  args = args.substr(0, args.length - 1);
  if (options.type.toUpperCase() == "GET") {
    xhr.open(options.type, temp_url + args);
    xhr.send();
  } else if (options.type.toUpperCase() == "POST") {
    args = args.substr(1, args.length);
    xhr.open(options.type, options.url);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(args);
  }
  xhr.onreadystatechange = () => {
    // 当AJAX的状态码为4，并且http的状态码为200时
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        data = JSON.parse(xhr.responseText);
        console.log(data);
      } else {
        // 查看异常
        console.log(xhr.status);
      }
    } else {
      console.log(xhr.readyState);
    }
  };
  xhr.onerror = () => {
    console.log("网络中断");
  };
}

运用封装好的 AJAX

<input type="button" value="获取响应数据get" onclick="get_data()" />
<input type="button" value="发送请求数据post" onclick="post_data()" />
<script>
  function get_data() {
    AJAX1({
      type: "get",
      url: "https://httpbin.org/get",
      data: {
        uname: "pd",
        pwd: "123",
      },
    });
  }
  function post_data() {
    AJAX1({
      type: "post",
      url: "https://httpbin.org/post",
      data: {
        uname: "pd",
        pwd: "123",
      },
    });
  }
</script>

封装完成的AJAX

AJAX 封装-处理响应

当 AJAX 发送了请求后，AJAX 都应该回馈一个内容。这时就会分如下 2 个情况：

失败处理

可以通过 onerror 监听函数处理错误情况，

处理返回数据

请求成功能可以，通过 onreadystatechange 监听函数处理。以下是可以使用的属性

XMLHttpRequest.response
- XMLHttpRequest.response 属性表示服务器返回的数据体（即 HTTP 回应的 body 部分）。它可能是任何数据类型，比如字符串、对象、二进制对象等等，具体的类型由XMLHttpRequest.responseType 属性决定。该属性只读
- 如果本次请求没有成功或者数据不完整，该属性等于 null 。但是，如果 responseType 属性等于 text 或空字符串，在请求没有结束之前（ readyState 等于 3 的阶段）， response 属性包含服务器已经返回的部分数据。
XMLHttpRequest.responseType
- XMLHttpRequest.responseType 属性是一个字符串，表示服务器返回数据的类型。这个属性是可写的，可以在调用 open() 方法之后、调用 send() 方法之前，设置这个属性的值，告诉服务器返回指定类型的数据。如果 responseType 设为空字符串，就等同于默认值 text 。
XMLHttpRequest.responseType 属性可以等于以下值。
- ”“（空字符串）：等同于 text ，表示服务器返回文本数据。
- “arraybuffer”：ArrayBuffer 对象，表示服务器返回二进制数组。
- “blob”：Blob 对象，表示服务器返回二进制对象。
- “document”：Document 对象，表示服务器返回一个文档对象。
- “json”：JSON 对象。
- “text”：字符串。

上面几种类型之中， text 类型适合大多数情况，而且直接处理文本也比较方便。 document 类型适合返回 HTML / XML 文档的情况，这意味着，对于那些打开 CORS 的网站，可以直接用 AJAX 抓取网页，然后不用解析 HTML 字符串，直接对抓取回来的数据进行 DOM 操作。 blob 类型适合读取二进制数据，比如图片文件

XMLHttpRequest.responseText
- XMLHttpRequest.responseText 属性返回从服务器接收到的字符串，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据
XMLHttpRequest.responseXML
- XMLHttpRequest.responseXML 属性返回从服务器接收到的 HTML 或 XML 文档对象，该属性为只读。如果本次请求没有成功，或者收到的数据不能被解析为 XML 或 HTML，该属性等于 null
- 该属性生效的前提是 HTTP 回应的 Content-Type 头信息等于 text/xml 或 application/xml 。这要求在发送请求前， XMLHttpRequest.responseType 属性要设为 document 。如果 HTTP 回应的 Content-Type头信息不等于 text/xml 和 application/xml ，但是想从 responseXML 拿到数据（即把数据按照 DOM 格式解析），那么需要手动调用XMLHttpRequest.overrideMimeType()方法，强制进行 XML 解析。
XMLHttpRequest.responseURL
- XMLHttpRequest.responseURL 属性是字符串，表示发送数据的服务器的网址

AJAX 封装设置默认值

在使用 AJAX 时，往往需要传递多个参数。为了简化使用封装的 AJAX 方法，因此可以考虑给 AJAX 方法设置默认参数

// AJAX封装请求参数
function AJAX1(options) {
  // options是一个JSON对象，
  // options:
  //  type:请求的方式
  //  url:请求的地址
  //  data:请求的参数，类型的JSON
  // success:请求成功以后如何处理
  // error：请求失败以后如何处理
  let defaults = {
    type: "GET",
    url: "",
    success: () => {},
    error: () => {},
  };
  // 合并属性 最终在第一个参数上default有完整的属性，但是第二个参数占主导地位
  Object.assign(defaults, options);
  let xhr = new XMLHttpRequest();
  // 处理请求的参数
  let args = "?";
  for (let key in defaults.data) {
    args += key + "=" + defaults.data[key] + "&";
  }
  args = args.substr(0, args.length - 1);
  if (defaults.type.toUpperCase() == "GET") {
    xhr.open(defaults.type, temp_url + args);
    xhr.send();
  } else if (defaults.type.toUpperCase() == "POST") {
    args = args.substr(1, args.length);
    xhr.open(defaults.type, defaults.url);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(args);
  }
  // 接受响应
  xhr.onreadystatechange = () => {
    // 当AJAX的状态码为4，并且http的状态码为200时
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        defaults.success(xhr.responseText);
      } else {
        // 查看异常
        defaults.error(xhr.status);
      }
    } else {
      defaults.error(xhr.readyState);
    }
  };
  xhr.onerror = () => {
    defaults.error("1000:网络中断");
  };
}
function get_data() {
  AJAX1({
    // type: 'get',
    url: "https://httpbin.org/get",
    data: {
      uname: "pd",
      pwd: "123",
    },
    success: (response) => {
      console.log(response);
    },
    error: (response) => {
      console.log("返回的状态码是:" + response);
    },
  });
}
function post_data() {
  AJAX1({
    type: "post",
    url: "https://httpbin.org/post",
    data: {
      uname: "pd",
      pwd: "123",
    },
    success: (response) => {
      console.log(response);
    },
    error: (response) => {
      console.log("返回的状态码是:" + response);
    },
  });
}

JQuery 中 AJAX 的使用

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

需要引入文件,线上地址

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

调用方式，在前面加一个$符号

<body>
  <h1>JQuery中使用AJAX</h1>
  <input type="button" value="发送请求" onclick="post_data()" />
  <input type="button" value="获取数据" onclick="get_data()" />
  <script>
    function post_data() {
      $.ajax({
        type: "post",
        url: "https://httpbin.org/post",
        data: {
          uname: "pd",
          pwd: "h12",
        },
        success: (response) => {
          console.log(response);
        },
      });
    }
    function get_data() {
      $.ajax({
        type: "get",
        url: "https://httpbin.org/get",
        // 也可以用拼接的写法
        // data:'uname=pd&pwd=123',
        data: {
          uname: "pd",
          pwd: "123",
        },
        success: (response) => {
          console.log(response);
        },
      });
    }
  </script>
</body>

JQuery 中 AJAX 的参数解释

jQuery.AJAX([settings])
    – type
    – url
    – data
    – contentType
    – beforSend 发送请求前可修改 XMLHttpRequest对象的函数，如添加自定义 HTTP 头
    – success
    – error

需求：后台要求一定是 json 数据格式，在contentType:'application/json', 设置即可

function post_json() {
  $.ajax({
    type: "post",
    url: "https://httpbin.org/post",
    data: {
      uname: "pd",
      pwd: "h12",
    },
    contentType: "application/json",
    success: (response) => {
      console.log(response);
    },
  });
}

beforeSend 的使用:主要应用于发送请求前的处理

获取前将 div 设置面加载…
提交表单前验证数据

如果在函数中返回 ture 继续执行发送请求，如果返回 flase 取消发送

JQuery 中 get 与 post

JQuery 为 GET 与 POST 设置的专门的方法

function get_data() {
  $.get(
    "https://httpbin.org/get",
    { uname: "pd", pwd: "h12" },
    function (response) {
      console.log(response);
    }
  );
}

function post_data() {
  $.post(
    "https://httpbin.org/post",
    // 也可以传递str参数
    { uname: "pd", pwd: "h12" },
    function (response) {
      console.log(response);
    }
  );
}

最后，官方文档，更多选择器的作用等等

﻿FLask 框架-AJAX（异步 JavaScript 与 XML

﻿FLask 框架-AJAX（异步 JavaScript 与 XML） -- 潘登同学的 flask 学习笔记

AJAX 技术

AJAX 使用

AJAX 中 GET 请求参数传递

AJAX 中 POST 请求传递参数

AJAX 获取状态码与处理结果

AJAXc 错误处理

AJAX 封装

AJAX 封装-处理响应

失败处理

处理返回数据

AJAX 封装设置默认值

JQuery 中 AJAX 的使用

JQuery 中 get 与 post

FLask 框架-AJAX（异步 JavaScript 与 XML

FLask 框架-AJAX（异步 JavaScript 与 XML） -- 潘登同学的 flask 学习笔记