AJAX入门

一.什么是AJAX？

AJAX是异步的JavaScript和XML。简单点说，就是使用XMLHttpRequest对象与服务器通信。它可以使用JSON，XML，HTML和text文本等格式发送和接受数据。AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不刷新页面的情况下与服务器通信，交换数据，或更新页面。

AJAX是浏览器与服务器进行数据通信的技术。

二.axios库

概念：

axios库基于XMLHttpRequest封装、代码简单，在Vue、React项目中都会用到axios

axios的使用：

①.引入axios.js文件：<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

②.使用axios函数：

传入配置对象：

再用.then回调函数接收结果，并做后续处理

---------------------------------------------------------------------------------------------------------------------------------

一个简单的axios使用案例：

需求：请求目标资源地址，拿到省份列表数据，显示到页面

目标资源地址：http://hmajax.itheima.net/api/province

在浏览器中直接访问上述资源地址，该地址返回了一个对象结构的JSON字符串。

 在浏览器中打印返回的result，这个对象结构的JSON字符串在“result”的date属性中

现在我们拿到了数据（result.date.list），进行后续的处理： 

因为数组不能插入到标签中，所以使用JavaScript join() 方法把数组中的所有元素转换一个大的字符串。元素是通过指定的分隔符进行分隔的。（这里我们用<br>分隔）

效果：

接下来使用HTML渲染该数据即可：

效果：

完整代码如下：

---------------------------------------------------------------------------------------------------------------------------------

案例的知识点补充：

1.JSON字符串

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。JSON字符串是指符合JSON格式要求的js字符串。

JSON格式的要求如下：

数组（Array）用方括号[ ]表示。
对象（Object）用大括号{ }表示。
名称/值对（name/value）组合成数组和对象。
名称（name）置于双引号中，值（value）有字符串、数值、布尔值、null、对象和数组。
并列的数据之间用逗号 , 分隔

为什么要使用JSON字符串？

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

三.url

概念：

url是统一资源定位符，俗称网页地址，简称网址，用于访问网络上的资源。

url的组成部分：

http://hmajax.itheima.net/api/province

协议-域名-资源路径

http协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式

域名：标记服务器在互联网中的方位，可以理解为服务器的名字

资源路径：标记资源在服务器下的具体位置

url查询参数：

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

案例：

获取指定省份的城市列表

（我们如何通过url获取指定省份的城市列表呢？）

①.确认好请求城市列表的url网址

http://hmajaxitheima.net/api/city

②.在该网址后面以指定的格式拼接一个字符串（需要查询的参数，参数名由后端提供，这里以河北省为例）

http://hmajaxitheima.net/api/city?pname=河北省

语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

axios-查询参数

在axios函数中，查询参数时，我们使用axios提供的params选项

（使用原因原因：①使用url网址后拼接字符串的方法容易拼错；②使用频率高）

下面我们使用axios函数，通过params选项添加参数信息，试着获取一下指定的城市列表

获取成功：

---------------------------------------------------------------------------------------------------------------------------------

9.25更新：

四.常用的请求方法和数据提交

在之前的介绍中，我们知道了怎么想服务器申请查询信息，今天我们来学习怎么将数据提交到服务器。

1.常用的请求方法

什么是请求方法？

请求方法就是对服务器上的资源进行相应的操作，下面是常用的请求方法：

2.axios请求配置

下面三个是axios最常用的三个配置项：

url:请求的URL网址

method：请求的方法，GET可以忽略（不区分大小写）

ps:在之前的案例中，我们没有写method请求方法，实际上是默认使用了get方法

date:提交数据

代码使用样例如下：

ps:参数名是后端告诉我们的。

3.注册账号（数据提交案例）

需求：通过axios提交用户名和密码，完成注册功能

注册用户URL地址：http://hmajax.itheima.net/api/register

请求方法：POST

参数名：
username 用户名（中英文组成，最少8位）
password 密码（最少6位）

将上述要求的配置信息套入到axios函数中,代码如下：

axios({
    url:'http://hmajax.iitheima.net/api/register',
    method:'post',
    data:{
        username:'itheima007',
        password:'7654321'
    }
})

下面我们写一个按钮，具体实现一下代码功能：

在控制台中打印返回结果如下：

显示注册成功。

下来我们进一步判断是否注册成功：

再一次点击注册按钮，向服务器提交重复的注册信息：

发现服务器返回了报错信息，我们点开报错信息查看：

ps：在上图中有两处报错

第一处是浏览器返回给我们的错误信息，第二处是服务器返回给我们的错误信息

在返回报错信息的response属性中看到错误原因：“账号被占用”

这说明我们之前的注册操作是有效的。

通过这个案例总结一下提交数据的步骤：

第一步：

将axios的method配置项补充为post

第二步：

在data配置项中写入要提交的参数

五.axios错误处理

在数据提交案例中，由于账号被占用，我们收到来自浏览器和服务器的两处报错信息，作为程序员我们可以在控制台中查看这些报错信息，但是普通用户该怎么收到错误提醒呢？这时，我们就要用到axios错误处理相关的语法了。

在axios函数中提供了catch方法，在catch方法中声明变量，就可以接收到服务器返回的错误信息对象，在该方法中接着对该错误信息进行处理，比如我们可以将错误信息打印在弹框中，通过弹框提示用户错误原因：

axios错误处理案例

（注册案例，重复注册时通过弹框提示用户错误原因）

如上图，浏览器的错误信息还在，而服务器返回的错误信息被我用axios的catch回调方法接收，并且打印在弹框提示了用户错误原因。

六.HTTP协议—请求报文

学习这个知识点帮助我们理解浏览器是怎么把内容发送给服务器的

请求报文是指浏览器按照HTTP协议要求的格式，发送给服务器的内容的集合

请求报文的组成部分：

1.请求行: 请求方法，URL，协议

2.请求头:以键值对的格式携带的附加信息，比如: Content-Type

3.空行:分隔请求头，空行之后的是发送给服务器的资源

4.请求体:发送的资源

打开上次axios错误处理的案例，打开浏览器开发者工具→网络→Fetch/XHR选项下，可以查看请求报文的标头载荷等内容：

请求报文-错误排查

在实际开发中，通过请求报文的内容来确认发给服务器的信息是否正确，从而排查到一些错误的原因。

响应报文

概念：服务器按照HTTP协议要求的格式，返回给浏览器的内容。

响应报文的格式如下

HTTP响应状态码：用来表明请求是否成功完成

比如：404表示服务器找不到资源

服务器返回的响应报文同样在览器开发者工具→网络→Fetch/XHR选项下查看

七.接口文档

 接口文档：描述接口的文章。

那接口是什么呢？

接口就是使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数。

接口文档由后端工程师给我们，前端通过接口文档与服务器交互信息。