Ajax与Axios深入解析：从原生实现到实战应用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52006046/article/details/127874443

一.什么是ajax?

概念:

Ajax[ˈeɪdʒæks], 是一种在JS代码中发请求并获取响应数据的技术.

特点:

是一种不刷新技术.怎么理解?不刷新页面的情况，从服务器获取数据，以更新页面

使用场景:

比如验证手机号是否在服务器已经注册过了
根据输入的搜索关键字, 联想菜单提示数据切换
根据增和删除, 修改页面数据

二.axios.js?

什么是axios:

axios是别人封装好的，用来发ajax请求的工具

axios的使用

先引入axios.js文件到自己的网页中
1. axios.js文件链接: https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js
axios的使用语法

axios({
    url: '请求的URL网址',
    method: '请求的方法'
}).then((结果变量名) => {
    // .then 用来指定请求成功之后的回调函数
    // 形参中的 result 是请求成功之后的结果
})

Ajax是一个技术的名称, 而以前我们具体使用的是axios.js插件来发送请求，但是其实axios.js也是一个库, 内部是原生JS代码, 实际它是对原生的代码进行了封装,那axios的底层原理到底怎样呢?

三.Ajax如何原生JS实现?

Ajax如果用原生JS实现, 需要使用window提供的一个构造函数, 叫XMLHttpRequest

语法:

// 1. 创建一个xhr对象
let xhr = new XMLHttpRequest()

// 2. 设置请求方式和请求地址
xhr.open(请求方式, 请求地址)

// 3. 发送请求
xhr.send()

// 4. 监听load（请求成功）事件 ==> 可以获取响应数据
xhr.addEventListener('load', function() {
   console.log(xhr.response)  // 服务器返回的数据
})

步骤分析:

示例1-GET请求无参数:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css" />
	</head>
	<body>
		<button id="btn" class="btn btn-primary btn-sm">发送get请求</button>
		<script>
			/* 
			原生ajax发送get请求语法:
			1. new xhr 对象
			2. 开一个请求,调用无参数:xhr.open('请求方式', 请求的url地址)  有参数:xhr.open('请求方式', 请求的url地址?参数名1=值1&参数名2=值2)  
			3. 发送 ajax 请求 xhr.send()
			4.监听load 事件   获取服务器响应回来的数据      
      */

			document.querySelector('#btn').addEventListener('click', function () {
				// 1. new xhr 对象
				const xhr = new XMLHttpRequest()
				// 2. 开一个请求,调用 xhr.open('请求方式', 请求的url地址)  请求的url地址?参数名=值
				xhr.open('get', 'url地址')
				//3. 发送 ajax 请求 xhr.send()
				xhr.send()
				// 4. 获取服务器响应回来的数据  load 事件
				xhr.addEventListener('load', function () {
					// 获取到服务器响应回来的数据 xhr.response 服务器响应回来的数据 是 json 字符串 ----> js对象 JSON.parse()
					console.log(JSON.parse(xhr.response))
				})
			})
		</script>
	</body>
</html>

示例2-GET请求有参数:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css" />
	</head>
	<body>
		<button id="btn" class="btn btn-primary btn-sm">发送get请求</button>
		<script>
			// 1. 获取到 btn
			document.querySelector('#btn').addEventListener('click', function () {
				// 2. 创建 xhr 对象
				const xhr = new XMLHttpRequest()
				// 3. 调用 xhr.open('请求方式', 请求的url地址)  请求的url地址?参数名=值
				// xhr.open('get', 'url地址')
				xhr.open('get', 'url地址?pname= 参数')
				// 4. 发送 ajax 请求 xhr.send()
				xhr.send()
				// 5. 获取服务器响应回来的数据  load 事件
				xhr.addEventListener('load', function () {
					// 获取到服务器响应回来的数据 xhr.response 服务器响应回来的数据 是 json 字符串 ----> js对象 JSON.parse()
					console.log(JSON.parse(xhr.response))
				})
			})
		</script>
	</body>
</html>

示例3-POST请求有参数:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<button id="btn">发送post请求</button>
		<script>

			document.querySelector('#btn').addEventListener('click', function () {
				const xhr = new XMLHttpRequest()
				xhr.open('post', 'http://ajax-api.itheima.net/api/books')
				/*
        key键 content-type 文档类型
        value值  
          1. application/x-www-form-urlencoded 普通字符串
          2. application/json  json字符串形式,
          3. multipart/form-data form-data  对象
      */

				xhr.setRequestHeader('content-type', 'application/json')

				const data = {
					bookname: 'js从入门到精通',
					author: '老王同学',
					publisher: '隔壁老王',
				}
				// 因为请求体是application/json,所以转化为json字符串
				xhr.send(JSON.stringify(data))

				xhr.addEventListener('load', function () {
					console.log(JSON.parse(xhr.response))
				})
			})
		</script>
	</body>
</html>