Ajax及其应用

coder__Song

于 2023-03-18 23:29:19 发布

阅读量299

点赞数 5

文章标签： ajax json

本文链接：https://blog.youkuaiyun.com/qq_52214334/article/details/129546877

版权

这段时间正在学关于Ajax的内容，现在我将我所了解到的Ajax给大家分享一下（学习笔记）可能有理解不对的地方大家指正。

1.前后端通信

1.1前后端通信是什么

前后端通信字面意思就是，前端和后端数据交互的过程，也就是浏览器和服务器之间数据交互的过程。有时候前端需要从后端获取数据，后端也需要从前端发过来的数据，所以前后端的通信就是它们各求所需的一个过程

1.1.2后端向前端发送数据

以CSDM为例，我们可以打开开发者工具->网络(Network)，此时我们刷新页面，就能够看到各种各样的数据，里面会有HTML、CSS、JS、图片等等文件，前端向后端获取的这些数据数据浏览器进行解析后，我们就能看到一个完整的网页页面了

1.1.3前端向后端发送数据

很简单的例子，我现在正在写文章，当我点击发布以后，前端就会向后端发送数据，此时文章就会保存在数据库中，当有用户需要访问文章时，后端又会将数据发送到前端。

1.2前后端通信的过程

1.2.1前后端通信的过程

如图，服务器不是单独为谁而服务的，它可以服务很多的浏览器。一般情况下前后端的通信都是浏览器主动去联系服务器。

需要通信的时候浏览器主动发送请求到服务器，如果有数据的话还会携带着数据一起发送到服务器，当服务器收到浏览器的请求，就会根据请求发送响应到浏览器，如果有数据的话就会携带着数据一起发送到服务器，即前后端的通信是在“请求——响应”中完成的

1.2.2概念解释

通常我们都会听到几个词：前端，浏览器端，客户端，后端，服务器端，那这几个端又有什么区别呢？

其实前端指的就是浏览器端。

客户端是指只要能和服务器进行通信的就是客户端，就不仅是浏览器端了，比如我们平常打游戏需要安装客户端；命令行工具也是客户端，因为他也能够向服务器发送请求，而且服务器也能向它发送响应，但是是命令行工具无法解析发送过来的数据。

后端呢也就指的是服务器端了

1.3前后端的通信方式

1.3.1浏览器访问网页

当我们在浏览器地址栏输入网址并访问的时候，前后端就进行通信了。

1.3.2HTML的标签

浏览器在解析HTML标签的时候，遇到一些特殊的标签（link,img,script,iframe），会再次向服务器发送请求。还有一些标签，浏览器在解析的时候，不会向服务器发送请求，但是用户可以使用他们向服务器发送请求比如：a,form

1.3.3Ajax和Fetch

这两种方式呢后面会说到

2.HTTP协议

2.1HTTP是什么

2.1.1HTTP是什么

全称HyperText Transfer Protocol，即超文本传输协议。

超文本：原先一个一个的单一文本，通过超链接将其联系起来，由原先的单一文本变成了可无限延伸、扩展的超文本、立体文本。

协议：文件在传输的时候需要遵守的规范

HTML、JS、CSS、图片、视频等等文件，都是通过HTTP在服务器和浏览器之间传输

HTTP是一个‘请求-响应’协议，具体的一些细节呢可以通过学习一些计算机网络的知识来完善

2.2HTTP报文

2.1.1HTTP报文是什么

HTTP通信过程包括客户端往服务器端发送请求会产生请求报文，以及服务器端给客户端返回响应会产生响应报文两个过程。HTTP报文是HTTP应用程序之间发送的数据块

2.1.2HTTP报文格式

注意：GET请求是没有请求体的，数据是通过请求体携带的；POST请求有请求体的，数据是通过请求体携带的。

我们可以通过打开开发者工具查看

2.2HTTP方法

2.2.1常用的HTTP方法

HTTP方法是浏览器发送请求时采用的方法，和响应无关。有GET，POST，PUT，DELETE.

是用来定义对于资源采取什么样的操作的，有各自的语义

2.2.2HTTP方法的语义

①GET：获取数据。即获取资源（文件），比如HTMML、CSS、图片等等

②POST：创建数据。可以用来注册之类的

③PUT：更新数据。修改个人信息，修改密码的时候使用

④DELETE：删除数据。删除一些评论，文章之类的。

虽然这些方法都有各自的语义，但是并是不强制性的，

2.2.3RESTful接口设计

是一种设计风格，充分利用HTTP方法的语义。

首先我们吧一个地址简单的理解为前后端的一个接口，前端向地址发送请求，后端将数据发送的地址上，前端再访问返回的地址就得到信息了，举几个例子吧：

通过用户ID获取个人信息，使用GET方法：https://www.xxx.com/api/http/getUser?id=1 -> https://www.xxx.com/api/http/getUser?id=1

注册新用户，使用POST方法：https://www.xxx.com/api/http/addUser -> https://www.xxx.com/api/http/user

删除一个用户，使用DELETE方法https://www.xxx.com/api/http/modifyUser -> https://www.xxx.com/api/http/user

我们可以不用这么麻烦，每个操作都设置不同的接口（前者），后端可以根据前端的请求GET，POST，PUT，DELETE他们的语义就知道，具体要进行增删改查一系列的操作了

2.3HTTP状态码

2.3.1HTTP状态码是什么

404大家一定不陌生，这就是一个HTTP状态码，表示客户端发生了错误。HTTP状态码是定义服务器对请求的处理结果，是服务器返回的数字

2.3.2HTTP状态码语义

我们可以通过开发者工具来查看每个响应的状态码

100~199消息：代表请求已被接受，需要继续处理

200~299消息：成功

300~399消息：重定向，如301（永久性的被移过去了，永久性缓存）

302（临时性移动）

304（浏览器缓存没有被修改，可以继续使用）

400~499消息：服务器有响应，请求错误，一般错在前端，如404（NotFound）没有请求到

500~599消息：服务器错误

3.Ajax

3.1Ajax初识

3.1.1Ajax是什么

Ajax全称是Asynchronous Javascript and XML（异步JavaScript和XML）

Ajax可以异步的向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情，知道成功获取响应后，浏览器才开始处理响应数据。就是浏览器与服务器之间的一种异步通信方式。

3.1.2XML（可扩展标记语言）

是前后端数据通信是传输数据的一种格式，不过现在常用的都是JSON

3.2XMLHttpRequest对象

3.2.1XHR的属性

（1）reponseText文本形式的响应内容

（2）response：可以替代（1）

（3）responseType

①默认值是空字符串或者text,得到的数据都是字符串类型的

②当responseType设置的值是json时，可以直接得到JSON类型的数据

③当responseType设置的值是"JSON"时候，responseText就不能用了,而任何时候都可以使用response来得到数据

（4）timeout属性（设置请求的超时时间单位ms)，超时了就会发生timeout事件

（5）withCredentials属性：可以指定使用Ajax发送请求时是否携带Cookie

①正常情况下，使用Ajax发送请求时，默认情况下，同域会携带Cookie；跨域时不会，这个时候就可以使用withcccCredentials

②最终能否成功跨域携带Cookie，还要看服务器同不同意

（6）readyState

3.2.2XHR的事件

xhr.onreadystatechange ：之后每次 xhr.yreadyState 变化时触发，但是xhr.readyState从非0到0，xhr.onreadyStatechange不会被触发

xhr.onloadstart ：调用send()时触发

xhr.onload：请求成功是触发（xhr.readystat=4）

xhr.onloadend：请求结束时触发

xhr.onabort：当调用xhr.abort()时触发

xhr.ontimeout：xhr.timeout不等于0，当xhr.timeout设置的时间请求还未结束，则会触发（请求超时）

xhr.onerror：请求发生错误触发

8.httpCodeError事件，状态码异常

3.2.3HXR的方法

（1）open()方法用于设置进行异步请求目标的URL、请求方法以及其他参数信息

（2）send()发送请求给服务器

（3）abort()方法：终止当前请求，一般配合abort事件一起使用

（4）setRequestHeader设置请求头信息。其中，请求头中的Content-Type字段告诉服务器，浏览器发送的数据是什么格式的

3.3Ajax基本用法

3.3.1XMLHttpReuest

Ajax想要实现浏览器与服务器之间的异步通信，需要依靠XMLHttpReuest，它是一个构造函数，不论是XMLHttpReuest，还是Ajax，都没有具体的某种数据格式绑定

3.3.2Ajax的使用步骤

直接附上注释代码吧，这里用的是免费的HTTP请求假数据接口JSONPlaceHolder，请求的到的是JSON格式的数据，下面会讲到JSON


      // Ajax 的使用步骤
      // 1.创建 xhr 对象
      // const xhr = new XMLHttpRequest();

      // 2.监听事件，处理响应
      // 当获取到响应后，会触发 xhr 对象的 readystatechange 事件，可以在该事件中对响应进行处理

      // xhr.addEventListener('readystatechange', () => {}, fasle);

      // xhr.onreadystatechange = () => {
      //   if (xhr.readyState !== 4) return;

      //   // HTTP CODE
      //   // 获取到响应后，响应的内容会自动填充 xhr 对象的属性
      //   // xhr.status：HTTP  200 404
      //   // xhr.statusText：HTTP 状态说明 OK Not Found
      //   if ((xhr.status >= 200) & (xhr.status < 300) || xhr.status === 304) {
      //     // console.log('正常使用响应数据');
      //     console.log(xhr.responseText);
      //   }
      // };

      // readystatechange 事件也可以配合 addEventListener 使用，不过要注意，IE6~8 不支持 addEventListener
      // 为了兼容性，readystatechange 中不使用 this，而是直接使用 xhr
      // 由于兼容性的原因，最好放在 open 之前

      // readystatechange 事件监听 readyState 这个状态的变化
      // 它的值从 0 ~ 4，一共 5 个状态
      // 0：未初始化。尚未调用 open()
      // 1：启动。已经调用 open()，但尚未调用 send()
      // 2：发送。已经调用 send()，但尚未接收到响应
      // 3：接收。已经接收到部分响应数据
      // 4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了

      // 2.3.准备发送请求
      // xhr.open(
      //   'HTTP 方法 GET、POST、PUT、DELETE',
      //   '地址 URL https://www.xxx.',
      //   true
      // );

      // 调用 open 并不会真正发送请求，而只是做好发送请求前的准备工作

      // 2.3.发送请求
      // 调用 send() 正式发送请求

      // send() 的参数是通过请求体携带的数据
      // xhr.send(null);

      // 3.使用 Ajax 完成前后端通信
      const url = 'https://jsonplaceholder.typicode.com/posts?userId=5';

      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = () => {
        if (xhr.readyState !== 4) return;

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          console.log(xhr.responseText);
          console.log(typeof xhr.responseText);
        }
      };
      xhr.open('GET', url, true);
      xhr.send(null);

4.JSON（JavaScriptObject Notation）

4.1JSON是什么

JSON全称JavaScript Object Notation。翻译为“JavaScript 对象表示法”，是一种轻量级的、基于文本的、开放的数据交换格式。JSON 在 Web 开发领域有着举足轻重的地位。是Ajax发送和接受数据的一种格式

4.2JSON的三种形式

4.2.1简单值形式

JSON的简单值形式就是对应着JS中的基础数据类型。数字、字符串、布尔值、null,特别值得注意的是JSON中是没有undefined格式的，而字符串也必须使用双引号，JSON也不支持注释

"str"

4.2.2对象形式

对象的属性名必须用双引号，属性值如果是字符串也必须用双引）号，只要涉及到字符串，就必须使用双引号。一样的，不支持undefined

{
  "students": [
    {
      "id": 1,
      "name": "张三",
      "gender": "男",
      "birthday": "1999-05-23",
      "address": "北京市海淀区",
      "email": "zhangsan@example.com",
      "phone": "13333333333"
    },
    {
      "id": 2,
      "name": "李四",
      "gender": "女",
      "birthday": "1998-09-12",
      "address": "北京市朝阳区",
      "email": "lisi@example.com",
      "phone": "15555555555"
    },
    {
      "id": 3,
      "name": "王五",
      "gender": "男",
      "birthday": "2000-01-01",
      "address": "北京市东城区",
      "email": "wangwu@example.com",
      "phone": "17777777777"
    }
  ],
}

4.2.3数组形式

JSON也可以是数组形式。不支持undefined

[1,"hello",true,null]

4.2.4JSON的常用方法

①JSON.parse() 将JSON格式的字符串解析成JS中的对应值

②JSON.stringify() 将JSON格式的JS中的值解析成JS中对应值字符串

③必须是合法的JSON字符串，否则会报错

4.3运用

以JSONPlaceHolder为数据服务，获取信息，并将信息打印在浏览器上

const url = 'https://jsonplaceholder.typicode.com/posts?userId=5';
        // 添加监听
        const xhr = new XMLHttpRequest();
        // 准备发送，做好发送请求前的准备工作
        xhr.addEventListener('load', function () {
            if (status >= 200 || status < 300 || status === 304) {
                console.log(xhr.response);
                //JSON->JS
                const data = JSON.parse(xhr.response);
                // 遍历数组
                let allLi = '';
                for (let i = 0; i < data.length; i++) {
                    const oneLi = `<li>${data[i].userId} - 
                                       ${data[i].id} - 
                                 title:${data[i].title}</li><br>`;
                    allLi = allLi + oneLi;
                }
                //上树
                document.querySelector("#posts").innerHTML = allLi;

            } else {
                console.log('get server error response');
            }
        })
        xhr.open('GET', url, true);
        // 发送请求
        xhr.send(null);