简洁易懂的Ajax整理 01

顾伊
163 阅读5分钟

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

客户端与服务器

客户端

在前端开发中，客户端特指“Web 浏览器”。实际开发中，只要可以访问服务器的一端都属于客户端（手机、平板、电脑中的各种软件都可以是客户端）。

服务器

概念：服务器是提供服务的设备。

​ 作用：在上网过程中，服务器专门负责存放资源和对外提供服务。

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

客户端与服务器之间的通信过程，分为请求 - 响应两个步骤。其中：

  • 请求的概念：客户端通过网络去找服务器要资源的过程，叫做 “请求”
  • 响应的概念：服务器把资源通过网络发送给客户端的过程，叫做 “响应”

1.4 URL 地址

一个完整的url地址分为: 协议、域名(IP地址)、端口、资源存放路径。

  • 协议：协议是用来规范网络通讯中数据的格式。常见: http 和 https
  • 域名：电脑主机网络中存放的位置，主机地址的唯一标识。域名就是 给 IP 地址起个名字，方便记忆。
  • 端口：电脑与外界通讯交流的出口，为数字类型，取值范围 0~65535 之间。其中80为http专用。
  • 资源存放路径：资源存放路径就是资源在服务器中的具体存放地址。

资源

服务器对外提供的所有内容都属于资源。

网页中的数据，也是服务器对外提供的一种资源。

获取数据需要用到的技术：Ajax

axios 的使用

Ajax的概念

Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。它的英文全称是 Asynchronous Javascript And XML，简称 Ajax。

Ajax的五种请求方法

使用ajax的时候，请求方式的作用是区分本次请求的具体功能，常用请求方式有一下五种:

其中，重点掌握前两种，GET用于获取数据，POST用于推送数据。

axios的GET请求

axios({
      method: '请求的类型',
      url: '请求的URL地址',
      params: {id: 1, bookname: '红楼梦'} // params用于传递参数，可选
}).then((result) => {
      // .then 用来指定请求成功之后的回调函数
      // 形参中的 result 是请求成功之后的结果
})

注意: GET参数的本质就是把参数用 & 符号链接起来放到路径的最末尾用 ？分隔。

例如：www.liulongbin.top:3006/getbooks?id…红楼梦

URL编码

在 URL 地址中不允许出现中文、空格等特殊字符，因此浏览器会自动对 URL 地址内的中文进行转换处理

浏览器内置了 encodeURIComponent() 和 decodeURIComponent() 两个方法，用来实现 URL 的编码和解码处理：

Ajax的解构赋值

axios收到的数据，是经过axios封装之后的所以，res是一个对象，最重要的数据为 data 属性，其他属性很少使用，所以可以通过对象解构的方式把最常用的属性解构出来，其他的暂时可以不用理会：

axios({
  method: 'GET',
  url: 'http://www.liulongbin.top:3009/api/getbooks'
}).then(({ data: res }) => {
  // 从 .then(fn) 回调函数的形参中，解构赋值出 data 属性，重命名为 res
  console.log(res)
})

Ajax的POST请求

POST请求和GET请求不一样，POST请求一定会伴随着请求参数，因为如果没有参数，我们就不必使用POST请求了，且POST请求的功能就是推送数据:

axios({
  method: 'POST',
  url: 'http://www.liulongbin.top:3009/api/addbook',
  data: { bookname: '三体', author: '刘慈欣', publisher: '北京人民出版社' }
}).then(({ data: res }) => {
  // 从 .then(fn) 回调函数的形参中，解构赋值出 data 属性，重命名为 res
  console.log(res)
})

请求报文和响应报文

客户端与服务器通信的过程是基于请求与响应的。其中：

  • 请求报文规定了客户端以什么格式把数据发送给服务器
  • 响应报文规定了服务器以什么格式把数据响应给客户端

注意: http 响应状态码 和 业务状态码是不同的；

  1. 所处的位置不同：在响应头的状态行中所包含的状态码，叫做“响应状态码”在响应体的数据中所包含的状态码，叫做“业务状态码”。

  2. 表示的结果不同：响应状态码只能表示这次请求的成功与否（成功地失败了）业务状态码用来表示这次业务处理的成功与否

  3. 通用性不同：响应状态码是由 http 协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用。业务状态码是后端程序员自定义的，不具有通用性。

接口文档

接口的概念

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）。

接口文档的格式

接口文档的格式有很多，txt，word，excel，md等.... 现在最常用的是 html 格式文档。

线上地址，接口文档：www.showdoc.com.cn/ajaxapi/375…

POSTMAN

接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试，从而检查接口能否被正常访问。

后面node.js中具体讲解如何使用。

聊天机器人

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/main.css" />
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script type="text/javascript" src="js/scroll.js"></script>
	<title>聊天机器人</title>
</head>

<body>
	<div class="wrap">
		<!-- 头部 Header 区域 -->
		<div class="header">
			<h3>小思同学</h3>
			<img src="img/person01.png" alt="icon" />
		</div>
		<!-- 中间 聊天内容区域 -->
		<div class="main">
			<ul class="talk_list" style="top: 0px;">
				<li class="left_word">
					<img src="img/person01.png" />
					<span>你好</span>
				</li>
				<!-- 	<li class="right_word">
					<img src="img/person02.png" />
					<span>你好哦</span>
				</li> -->


			</ul>
			<div class="drag_bar" style="display: none;">
				<div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>
			</div>
		</div>
		<!-- 底部 消息编辑区域 -->
		<div class="footer">
			<img src="img/person02.png" alt="icon" />
			<input type="text" placeholder="说的什么吧..." class="input_txt" />
			<input type="button" value="发 送" class="input_sub" />
		</div>
	</div>
	<!-- 导入axios.js -->
	<script src="./js/axios.js"></script>
	<script>
		$(function () {
			// 初始化右侧滚动条
			// 这个方法定义在scroll.js中
			resetui()
			//1.点击发送  渲染内容到页面上(DOM操作)

			const talk_list = document.querySelector('.talk_list')
			const input_txt = document.querySelector('.input_txt')
			const input_sub = document.querySelector('.input_sub')
			//绑定事件
			input_sub.addEventListener('click', function () {
				//获取input的value值  去除左右两边空格
				let txt = input_txt.value.trim()
				//非空判断
				if (txt == '') {
					input_txt.value = ''
					//自动获取焦点
					input_txt.focus()
					return alert("输入内容不能为空")
				}
				//创建li标签  然后设置 类名和内容
				let newLi = document.createElement('li')
				newLi.className = 'right_word'
				newLi.innerHTML = `
				<img src="img/person02.png" />
					<span>${txt}</span>
			`
				//添加到ul中
				talk_list.appendChild(newLi)
				//清空输入框内容
				input_txt.value = ''
				//自动获取焦点
				input_txt.focus()
				//重置滚动条
				resetui()
				//发送ajax渲染机器人回复 应写到点击事件里
				//为了避免大量嵌套  封装函数
				//传参不能写  input_txt.value 因为已经赋值为""
				getMsg(txt)
			});


			//2.发送ajax  根据渲染的内容获取回复消息  渲染到页面上


			function getMsg(msg) {
				//发送ajax渲染机器人回复
				axios({
					//method:'GET',//请求方法不写默认为get
					url: 'http://www.liulongbin.top:3009/api/robot',
					//查询参数 :params
					params: {
						spoken: msg
					}
				}).then(({ data: res }) => {
					//判断响应消息
					if (res.message != 'success') {
						return alert(res.message);
					}
					//创建li标签  然后设置 类名和内容
					let newLi = document.createElement('li')
					newLi.className = 'left_word'
					//获取回复消息
					let txt = res.data.info.text;
					newLi.innerHTML = `
				<img src="img/person01.png" />
					<span>${txt}</span>
			`
					//添加到ul中
					talk_list.appendChild(newLi)

					//重置滚动条
					resetui()

				})
			}
		})
		//3.发送ajax  根据回复消息转换为语音播放
		function getVoice(msg) {
			//发送ajax
			axios({
				method: 'get',//默认get
				url: 'http://www.liulongbin.top:3009/api/synthesize',
				//查询参数:params
				params: {
					text: msg
				}
			}).then(({ data: res }) => {
				console.log(res);
			})
		}

	</script>
</body>

</html>

QQ截图20220615194922.png

最后是原图😘

wallhaven-y86e8g.jpg

avatar
文章
阅读
粉丝