AJAX入门
AJAX概念
MDN中的定义（AJAX - MDN Web 文档术语表：Web 相关术语的定义 | MDN (mozilla.org)）：
AJAX（Asynchronous JavaScript And XML）是一种在 Web 应用中通过异步发送 HTTP 请求向服务器获取内容，并使用这些新内容更新页面中相关的部分，而无需重新加载整个页面的 Web 开发技术。这可以让网页更具有响应性，因为只请求了需要更新的部分。
概念：
AJAX 是浏览器与服务器进行 数据通信 的技术
AJAX使用
使用AJAX 需要使用 axios库，与服务器进行数据通信
axios 使用
- 引入axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
- 使用 axios 函数
语法：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
url:'目标资源地址'
}).then(
回调函数
)
</script>URL
定义
统一资源定位系统（uniform resource locator，缩写：URL）
简称 网址，用于访问网络上的资源
组成
URL由三部分组成：协议，域名，资源路径
- 协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式
- 域名：标记服务器在互联网中方位
- 资源路径：标记资源在服务器下的具体位置
URL查询参数
定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2（加粗为查询参数）
查询参数的名与值，与后端沟通决定
在axios函数中，可以使用axios 提供的 params 选项，用于获取数据
params 选项可以帮助我们把参数拼接到 url 字符串后面
语法：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
url:'目标资源地址',
params:{
参数名:值
}
}).then(
回调函数
)
</script>常用请求方法和数据提交
常用请求方法
请求方法：对服务器资源，要执行的操作
| 请求方法 | 操作 |
| GET | 获取数据 |
| POST | 提交数据 |
| PUT | 修改数据（全部） |
| DELETE | 删除数据 |
| PATCH | 修改数据（全部） |
接口
接口：使用 AJAX 和服务器通讯时，使用的 URL，请求方法，以及参数
数据提交
将数据上传到服务器保存
使用axios 提供的 method 选项，method可以设置 axios 请求的方法
默认为 GET ，可以省略（不区分大小写）
使用axios 提供的 data 选项，用于提交数据
语法：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
url: '目标资源地址',
method: '请求方法',
data: {
参数名: 值
}
}).then(
回调函数
)
</script>axios 错误处理
在 then 方法的后面，调用 catch 方法进行错误处理
语法：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
请求
}).then(
回调函数
).catch(
回调函数
)
</script>HTTP协议 - 报文
HTTP 协议：规定了浏览器发送及服务器返回内容的 格式
请求报文
浏览器按照 HTTP 协议要求的格式，发送给服务器的内容
请求报文组成：
- 请求行：请求方法，URL，协议
- 请求头：以键值对的格式携带的附加信息，比如：Content-Type 3
- 空行：分隔请求头，空行之后的是发送给服务器的资源 4.
- 请求体：发送的资源
请求报文可以用于错误排查
从浏览器中查看的请求报文是经过格式化的
响应报文
服务器按照 HTTP 协议要求的格式，返回给浏览器的内容
响应报文组成：
- 响应行（状态行）：协议、HTTP 响应状态码、状态信息
- 响应头：以键值对的格式携带的附加信息，比如：Content-Type
- 空行：分隔响应头，空行之后的是服务器返回的资源
- 响应体：返回的资源
HTTP 响应状态码
用来表明请求是否成功完成
示例： 404 （服务器找不到资源）
| 状态码 | 说明 |
| 1xx | 信息 |
| 2xx | 成功 |
| 3xx | 重定向消息 |
| 4xx | 客户端错误 |
| 5xx | 服务端错误 |
图片上传
思路：
- 先使用文件选择元素，获取文件对象
- 然后装入FormData表单对象中
- 再发送给服务器，得到图片在服务器的URL网址
- 最后通过img标签加载出图片
具体代码：
1.获取文件
使用type值为file的input标签来作为文件选择元素
<!--文件选择元素-->
<input type="file" class="test">再对其绑定change改变事件，获取的图片文件在 e.target.files[0] 中
document.querySelector('.test').addEventListener('change',e=>{
console.log(e.target.files[0]);
})2.装入FormData表单对象
在事件中，使用FormData 携带图片文件
const fd = new FormData()
fd.append('img', e.target.files[0])3.提交服务器
提交服务器后，可以获得图片的URL网址
4.获取的图片url网址，可以用img标签加载显示
AJAX原理
AJAX是对 XHR 和 Promise 相关代码进行了封装，实现了浏览器与服务器之间的通信
XMLHttpRequest
基础使用
XMLHttpRequest（以下简写为XHR）
XHR是一个对象，用于与服务器交互。
使用XHR步骤：
- 创建XHR对象
- 配置请求方法和url地址
- 监听loadend事件，接收响应成果
- 发起请求
//创建XHR对象
const XHR=new XMLHttpRequest()
//配置请求方法和url地址
XHR.open('请求方法','url')
//监听loadend事件，接收响应成果
XHR.addEventListener('loadend',()=>{
//配置函数体
console.log(XHR.response);
})
//发起请求
XHR.send()查询参数
在原生XHR中，没有params选项将参数拼接到 url 字符串后
所以需要手动将参数拼接到 url 字符串后
http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2（加粗为查询参数）
查询参数的名与值，与后端沟通决定
数据提交
- 原生XHR中，需要我们自行设置请求头，告诉服务器传递的数据类型
- 传递的数据如果是JSON字符串，也需要我们自行转换
- send方法调用需要传入请求体，发送给服务器
设置请求头，使用XHR的setRequestHeader方法，传入的内容类型与后端沟通决定
语法：
xhr.setRequestHeader('Content-Type', '内容类型')示例：
const xhr=new XMLHttpRequest()
xhr.open('POST','http://hmajax.itheima.net/api/register')
xhr.addEventListener('loadend',()=>{
console.log(xhr.response);
})
//设置请求头
xhr.setRequestHeader('Content-Type', 'application/json')
//准备请求体数据
const data={
username:'zhao1005407505',
password:'1005407505'
}
const Data=JSON.stringify(data)
//发送请求体数据
xhr.send(Data)
Promise
基本使用
Promise是一个对象，用于表示一个异步操作的最终完成（或失败）及其结构值
语法：
//创建Promise对象,并传入一个回调函数
const p = new Promise((resolve, reject) => {
resolve(值)//如果成功调用，执行then()，传入值赋予result
reject(new error(值))如果失败调用，执行catch()，传入值赋予error
})
p.then(result => {
成功回调函数
}).catch(error => {
失败回调函数
})示例：
<script>
//创建Promise对象,并传入一个回调函数
const p = new Promise((resolve, reject) => {
resolve('成功')//如果成功调用，执行then()，传入值赋予result
reject(new error('失败'))如果失败调用，执行catch()，传入值赋予error
})
p.then(result => {
//成功回调函数
console.log(result);
}).catch(error => {
//失败回调函数
console.log(error);
})
</script>Promise 状态
Promise有着三种状态
- 待定（pending）：初始状态
- 已兑现（fulfilled）：操作成功完成
- 已拒绝（rejected）：操作失败
如果是fulfilled状态，则调用 .then()
如果是rejected状态，则调用 .catch()
每个 Promise 对象一旦被兑现/拒绝，状态无法再被改变
封装简易Axios
- 定义 myAxios 函数，接收配置对象，返回 Promise 对象
- 发起 XHR 请求，默认请求方法为 GET
- 判断有无查询参数
- 调用成功/失败的处理程序
- 发送请求
- 调用 myAxios
//1.定义 myAxios 函数，接收配置对象，返回 Promise 对象
function myAxios(config) {
return new Promise((resolve, reject) => {
//2.发起 XHR 请求，默认请求方法为 GET
const xhr = new XMLHttpRequest()
xhr.open(config.method || 'GET', config.url)
//3.判断有无查询参数
if (config.params) {
const paramsObj = new URLSearchParams(config.params)
const paramsStr = paramsObj.toString()
config.url += '?' + paramsStr
}
//4.调用成功/失败的处理程序
xhr.addEventListener('loadend', () => {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.response))
} else {
reject(new Error(xhr.response))
}
})
//5.发送请求
if (config.data) {
const dataJSON = JSON.stringify(config.data)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(dataJSON)
} else {
xhr.send()
}
})
}
//6.调用 myAxios
myAxios({
url: 'http://hmajax.itheima.net/api/area',
params: {
pname: '山东省',
cname: '临沂市'
}
}).then(result => {
console.log(result);
p.innerHTML = result.list.join('<br>')
}).catch(error => {
console.log(error);
})axios本质上是Promise 对象，通过XMLHttpRequest对象实现功能
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
