Ajax的相关总结_43236850-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43236850/article/details/103567054

Ajax相关知识的总结

客户端和服务端相关知识的了解

上网的本质目的：
- 就是通过互联网的形式获取资源并且消费资源。
客户端和服务器(服务端)
- 客户端：
  - 客户指的是使用服务的人，客户端指的是使用服务的计算机
  - 如果一台计算机希望成为客户端，必须安装浏览器或者其他的应用软件
- 服务端：
  - 指的是提供服务的计算机
  - 如果一台计算机希望成为服务端，必须安装特定的服务端软件即可

在这里插入图片描述

URL地址

URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。
- 浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。
常见的URL举例：
- http://www.baidu.com
- http://www.taobao.com
- https://blog.youkuaiyun.com/weixin_43236850
组成部分：
- 示例网址：https://blog.youkuaiyun.com/weixin_43236850
- 通信协议： https://
- 域名（服务器地址）： blog.youkuaiyun.com
- 资源的具体位置： /weixin_43236850

客户端与服务器的通信过程

在这里插入图片描述
步骤

1 请求：客户端请求服务器
2 处理：服务器的内部处理（找找资源等…）
3 响应：服务器响应客户端

①客户端与服务器之间的通信过程，分为 请求 – 处理 – 响应 三个步骤。

②网页中的每一个资源，都是通过 请求 – 处理 – 响应 的方式从服务器获取回来的。

网站中的资源

常见资源为：图片、文字、音视频、css文件、js文件等等
核心资源：数据（根据数据生成页面结构可以让页面制作变简便，维护成本降低）
与html、css、js的关系
- html是网页的结构、骨架
- css是网页的样式、颜值
- js是网页的行为、控制交互
- 数据是网页灵魂

数据的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。

get 请求通常用于获取服务端资源（向服务器要资源）
- 例如：根据 URL 地址，从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源
post 请求通常用于向服务器提交数据（往服务器发送资源）
- 例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

get和post的区别

以下是get和post的区别，这是我们耳熟能详的几点区别，但这几点区别并不是很准确，只能是相对来说。详细的区别请见：原文链接：https://blog.youkuaiyun.com/kebi007/article/details/103059900

请求缓存：GET 会被缓存，而post不会
收藏书签：GET可以，而POST不能
保留浏览器历史记录：GET可以，而POST不能
用处：get常用于取回数据，post用于提交数据
安全性：post比get安全
请求参数：querystring 是url的一部分get、post都可以带上。 get的querystring（仅支持urlencode编码），post的参数是放在body（支持多种编码）
请求参数长度限制：get请求长度最多1024kb，post对请求数据没有限制。

Ajax简介

Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它包括

使用HTML和CSS标准化呈现;
使用DOM实现动态显示和交互;
使用XML和XSLT(可扩展样式表转换语言)进行数据交换与处理;
使用XMLHttpRequest进行异步数据读取;
最后用JavaScript绑定和处理所有数据;

通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。

Ajax是一种用于创建快速动态网页的技术。

作用：用来发送请求的一种方式
实现方式简介：浏览器提供了一个XMLHttpRequest的构造函数，创建的对象用来进行ajax操作
特点：在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端, 每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载（白屏）的等待，无需刷新页面，也可以进行请求响应处理。

Ajax工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。最重要的一步就是从服务器获得请求数据。

XMLHTTPRequest对象

XMLHTTPRequest的方法：

在这里插入图片描述

XMLHTTPRequest的属性：
在这里插入图片描述

get请求的基本使用

步骤：
1. 创建xhr对象
2. 调用open：设置请求方式和请求地址
3. 调用send: 发送请求（这一步是异步操作）
4. 设置onreadystatechange事件，监听请求的各种状态
  - readyState是xhr的属性，用来表示请求发送的状态
    - 取值为4代表下载完毕
    - 必须确保readyState为4才能使用响应的数据
  - xhr.status 代表请求是否成功
    - 200代表请求是成功的
  - xhr.responseText 代表接收的响应内容

// 1 创建xhr对象
    var xhr = new XMLHttpRequest();
    // 2 调用open：设置请求方式和请求地址
    xhr.open('GET', 'http://localhost:8000/admin/login');
    // 3 调用send: 发送请求，这一步是异步操作
    xhr.send();

    // 4 设置事件，监听请求的各种状态
    //   - readyState是xhr的属性，用来表示请求发送的状态
    //     - 取值为4代表下载完毕
    //     - 必须确保readyState为4才能使用响应的数据
    //     - 进一步检测：
    //       - xhr.status 代表请求是否成功
    //          - 200代表请求是成功的
    xhr.onreadystatechange = function () {
      // 4.1 检测xhr.readyState取值和xhr.status取值
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 4.2 接收响应的数据即可
        //    - 原生接收的响应内容是JSON格式，需要自己进行转换
        //      - jQuery会自动转换
        console.log(xhr.responseText);
      }
    };

带有参数的get请求

书写方式：

位置：在xhr.open()的参数2 url后面书写参数内容
名称：参数的形式称为查询字符串
格式： ?名=值&名=值…
- 其中名=值&名=值… 称为url编码格式，英文为urlencoded

    // 1 创建xhr对象
    var xhr = new XMLHttpRequest();
    // 2 调用open：设置请求方式和请求地址
    //    - 如果希望设置get请求的请求参数，需要放置在open()参数2地址的最后位置
    //    - 书写方式为：  地址?名=值&名=值....
    //    - 名称说明： 名=值&名=值称为url编码格式  urlencoded
    xhr.open('GET', 'http://localhost:8000/admin/login?id=3&name=jack&age=18');
    // 3 调用send: 发送请求，这一步是异步操作
    xhr.send();

    // 4 设置事件，监听请求的各种状态
    xhr.onreadystatechange = function () {
      // 4.1 检测xhr.readyState取值和xhr.status取值
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 4.2 接收响应的数据即可
        console.log(xhr.responseText);
      }
    };

post的基本使用

步骤：

创建xhr对象
调用xhr.open()
设置Content-Type（内容格式、内容类型）
- xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’)
调用xhr.send(数据)
- 数据为url编码格式
设置readystatechange事件获取响应内容

<script>
    // 1 创建xhr对象
    var xhr = new XMLHttpRequest();

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

    // 3 设置Content-Type内容格式(固定写法)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    // 4 调用send()
    //    - 如果具有请求参数，书写在send中，格式也是url编码格式（名=值&名=值...）
    xhr.send('bookname=老人与海&author=海明威&publisher=大海图书出版社');

    // 5 设置readystatechange事件，接收响应的数据
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    };
</script>