【Ajax】XML以及HTTP方面理解

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

前言

AJAX 全称为Asynchronous JavaScript And XML，也就是异步的JS和XML

通过AJAX，可以在无刷新页面的情况下，向服务器发送异步请求，并获取来自服务端的数据，这也是AJAX最大的优势：无需刷新获取数据

AJAX的使用在网页中非常常见，比如上新闻网，往下刷着刷着，需要加载一会才能显示下面的信息，这就是触发到底事件，浏览器通过AJAX获取到新的数据，然后通过JS创建元素显现在网页中

异步的JS相信无需讲解，下面对XML简单进行说明

0.1 XML简介

XML 是可扩展标记语言，被设计用来传输和存储数据

XML和HTML在结构上类似，不同的是HTML里是预定义标签，如<html></html>

而XML中没有预定义标签，均为自定义标签，用来表示（“形容”）数据

如下栗子：

<student>
    <name>张三</name>
    <age>18</age>
</student>
//这就是一个承载某位学生的XML数据段

最早AJAX中传送和存储数据用的就是XML，不过，现在已经被JSON替代，

如下：

{"name":"张三","age":18}

JSON是一种纯数据格式，只包含属性
简洁，在数据转换更加容易，灵活度远胜于 XML

0.2 AJAX 特点

优点
- 无需刷新页面而与服务器进行通信
- 允许根据用户事件来更新部分页面内容
缺点
- 无浏览历史，无法回退
  
  == 没有页面刷新 ==
- 存在跨域问题
  
  无法从一个服务向另一个服务发送请求
- SEO不友好
  
  AJAX获取的数据，爬虫爬不到（感兴趣可以去了解一下SEO），简单说明就是百度搜不到这些数据

1. HTTP相关

首先我们需要对HTTP有一定的了解

全名为超文本传输协议，其实就是一个互联网的规定，简单理解就是统一语言

想要全面的学习http，MAD文档是个不错的选择

点此可跳转

1.1 HTTP请求交互基本过程

HTTP交互基本过程

1.2 HTTP请求报文

包括四部分

行

行包括三部分，请求类型（GET、POST等），URL路径，HTTP版本/1.1or1.0

头

请求体类型

Host: atguigu.com
Cookie: name=giugu
Content-type: applicatiion/x-www-form-urlencoded
User-Agent: chrome 83
//键值对格式

空行
体

GET请求时，请求体为空，POST请求时，请求体可不为空
```
username=admin&password=admin
```

1.3 HTTP响应报文

四部分

行

包含三部分，协议版本——HTTP/1.1，响应状态码——如200表示OK（如常见的404），响应状态字符串
头

格式跟请求报文头一样
空行
体

主要返回结果

html文本、json文本、js、css、图片...

1.4 post请求体参数格式

Content-Type：application/x-www-form-urlencoded;charset=utf-8

用于键值对参数，参数的键值用=链接，参数之间用`&连接
Content-Type: application/json;charset=utf-8

用于json字符串参数
Content-Type: multipart/form-data

用于文件上传请求

1.5 不同类型的请求及作用

GET：从服务端读取数据
POST：向服务端添加新数据
PUT：更新服务端数据
DELETE：删除服务端数据

也就是查增改删

1.6 一般http请求与Ajax请求的区别

Ajax是特殊的http请求
对于浏览器端，只有XHR，和fetch发出的才是Ajax请求，其他所有都是非Ajax请求
浏览器响应：
1. 接收一般http请求后，浏览器一般会直接显示响应体的数据，也就是刷新/跳转页面
2. 接收Ajax请求后，浏览器并不会刷新，只是通过回调函数，传入响应体的数据