ajax知识点总结（二）

小徐今天学习了吗
160 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章ajax知识点总结（一）中，我们ajax的知识点，包括get请求、post请求、http协议等相关知识点。今天，在这篇文章中，我们将学习ajax的其他知识点，包括同步与异步、XMLHttpRequest等相关知识点。

ajax

Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）， AJAX 不是一门的新的语言，而是对现有技术的综合利用。本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信。

同步与异步

同步指的就是事情要一件一件做，等做完前一件才能做后一件任务。异步指的是不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。在编程中，异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。

XMLHttpRequest 可以以异步方式的处理程序。

ajax的典型应用场景

  • 用户名检测：注册用户时，通过 ajax 的形式，动态检测用户名是否被占用。
  • 搜索提示：当输入搜索关键字时，通过 ajax 的形式，动态加载搜索提示列表。
  • 数据分页显示：当点击页码值的时候，通过 ajax 的形式，根据页码值动态刷新表格的数据。
  • 数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互。

XMLHttpRequest

XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，用于与服务器通信(交换数据)。由此我们便可实现对网页的部分更新，而不是刷新整个页面。这个请求是异步，即在往服务器发送请求时，并不会阻碍程序的运行，浏览器会继续渲染后续的结构。最简单的用法 var xhrObj = new XMLHttpRequest()

发送get请求

使用XMLHttpRequest发送get请求的步骤:

  1. 创建一个XMLHttpRequest对象
  2. 调用 open 函数，指定 请求方式 与 URL地址(有参数的话, 就需要在url后面拼上参数列表)
  3. 调用 send 函数，发起 Ajax 请求
  4. 监听 xhr.onreadystatechange 事件
//1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest(); //构造函数没有参数的情况,括号可以省略

// 2. 调用 open 函数，指定 请求方式 与 URL地址(有参数的话, 就需要在url后面拼上参数列表)
// 		get 请求,设置请求行时,需要把参数列表拼接到 url 后面
xhr.open('GET', 'http://www.xxxxx.top:3006/api/getbooks')

// 3. 调用 send 函数，发起 Ajax 请求
xhr.send()

// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 4.2 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

发送post请求

使用XMLHttpRequest发送get请求的步骤:

  1. 创建 xhr 对象
  2. 调用 xhr.open() 函数
  3. 设置 Content-Type 属性（固定写法）
  4. 调用 xhr.send() 函数，同时指定要发送的数据
  5. 监听 xhr.onreadystatechange 事件
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest();

// 2. 调用 open()
xhr.open('POST', 'http://www.xxxxx.top:3006/api/addbook');

// 3. 设置 Content-Type 属性（固定写法: post请求必须设置content-type） 
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// 4. 调用 send()，同时将数据提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社');

// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}
  • post 请求, 参数列表不能拼接到 url 后面
  • post 必须设置请求头中的 content-type 为 application/x-www-form-urlencoded
  • post 请求需要将参数放到send中

获取响应

给xhr注册一个onreadystatechange事件，当xhr的状态发生状态发生改变时，会触发这个事件。

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    //1. 获取状态行
    console.log("状态行:" + xhr.status);
    //2. 获取响应头
    console.log("所有的相应头:" + xhr.getAllResponseHeaders());
    console.log("指定相应头:" + xhr.getResponseHeader("content-type"));
    //3. 获取响应体
    console.log(xhr.responseText);
  }
};

readyState记录了 XMLHttpRequest 对象的当前状态。

0：请求未初始化。XMLHttpRequest 对象已被创建，但尚未调用 open方法。

1：请求已经建立，但是还没有开始发送。

2：请求已发送，正在处理中。

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。

4：响应已完成；Ajax 请求完成，这意味着数据传输已经彻底完成或失败。(我们只需要关注状态4即可)

avatar
文章
阅读
粉丝