AJAX知识汇总

Coding_one_

已于 2023-08-17 17:16:42 修改

阅读量83

点赞数

文章标签： ajax 前端 javascript

于 2023-08-15 19:01:55 首次发布

本文链接：https://blog.csdn.net/Coding_one_/article/details/132304346

版权

AJAX基础了解

什么是AJAX

使用浏览器的 XMLHttpRequest 对象与服务器通信
浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页

为何学AJAX

可以动态在服务器（提供数据）上获取数据，更加便捷的修改数据，获取数据

AJAX需要学习的知识点

引入axios.js文件到自己的网页中

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios函数的使用方法

axios({
  url: '目标资源地址'
}).then((result) => {
  // 对服务器返回的数据做后续处理
})

代码举例

<!DOCTYPE html>
<html lang="zh">
<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>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
		axios({
            //请求的url地址，就是标记资源的网址，也就是获取数据的网址
			url:'http://hmajax.itheima.net/api/province'
		}).then((result) => {
			console.log(result)
			console.log(result.data.list)
		})
	</script>
</body>
</html>

认识URL

为什么要认识URL

虽然是后端给我的一个地址，但是哪部分标记的是服务器电脑，哪部分标记的是资源呢？所以为了和服务器有效沟通我们要认识一下

什么是URL

官方名称是统一资源定位符，也就是我们常说的网址，通过这个网址可以进入我们需要的页面

URL的组成

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

域名：标记服务器在互联网中方位

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

通俗来讲就是利用超文本传输协议的http传输数据格式的方法下找到baidu.com服务器的位置，服务器下的具体位置就是需要的min页面了，例如：http://baidu.com/min

URL查询参数

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

通俗来讲就是，搜索想要的数据可以通过某种方法用浏览器来获取服务器中的数据。

URL查询参数语法

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

axios-查询参数

使用axios提供的params选项，这种方法在项目中较多使用

axios({
  url: '目标资源地址',
  params: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

举例

axios({
			url:'http://hmajax.itheima.net/api/city',
			params:{
				pname:'河北省'
			}
		}).then(result => {
			console.log(result)
		})

常用请求方法

请求方法：

GET ：获取数据

POST：提交数据

PUT：修改数据（全部）

DELETEE：删除数据

PATCH:修改数据（部分）

什么时候进行数据提交：

例如：在我们创建账号，保存账号，登录密码，提交订单都需要将这些数据保存在服务器上，随时随地进行访问

axios请求配置（GET）：

url：请求的url网址

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

data：提交数据

axios({
  url: '目标资源地址',
  method: '请求方法',
  data: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

举例

document.querySelector('.btn').addEventListener('click', () => {
  axios({
    url: 'http://hmajax.itheima.net/api/register',
    method: 'POST',
    data: {
      username: 'root',
      password: '123456'
    }
  })
})

axios错误处理

如果注册相同的用户名，则会遇到注册失败的请求，也就是 axios 请求响应失败了，你会在控制台看到对应的错误

axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

举例：

document.querySelector('.btn').addEventListener('click', () => {
    axios({
      url: 'http://hmajax.itheima.net/api/register',
      method: 'post',
      data: {
        username: 'itheima007',
        password: '7654321'
      }
    }).then(result => {
      // 成功
      console.log(result)
    }).catch(error => {
      // 失败
      // 处理错误信息
      console.log(error)
      console.log(error.response.data.message)
      alert(error.response.data.message)
    })
})

请求报文

http协议规定了浏览器和服务器返回内容的格式

请求报文：是浏览器按照协议规定发哦是那个给服务器的内容

格式包含：

请求行：请求方法，URL，协议

请求头：以键值对的格式携带的附加信息

空行：分割请求头，空行之后的是发送给服务器的资源

请求体：发送的资源

查看请求报文

打开控制台

点击名称那一栏，右侧镖头就是所需要看的请求报文了，请求体就在负载那一栏

HTTP协议-响应报文

响应报文：是服务器按照协议固定的格式，返回给浏览器的内容

格式包含：

响应行：协议，HTTP响应状态码，状态信息

响应头：以键值对的格式携带的附加信息

空行：分割响应头，控制之后的是服务器返回的资源

响应体：返回的资源

HTTP响应状态码

用来表明请求是否成功完成

状态码	说明
1XX	信息
2XX	成功
3XX	重定向消息
4XX	客户端错误
5XX	服务端错误

接口文档

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

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

XMLHttpRequest - 基础使用

使用XMLHttpRequest ：

1.创建XMLHttpRequest

2.配置请求方法和请求url地址

3.监听loadend事件，接受响应结果

4.发起请求

const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {
  // 响应结果
  console.log(xhr.response)
})
xhr.send()

XMLHttpRequest - 查询参数

查询参数原理要携带的位置和语法

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

/**
 * 目标：使用XHR携带查询参数，展示某个省下属的城市列表
*/
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=辽宁省')
xhr.addEventListener('loadend', () => {
  console.log(xhr.response)
  const data = JSON.parse(xhr.response)
  console.log(data)
  document.querySelector('.city-p').innerHTML = data.list.join('<br>')
})
xhr.send()

Promise

promise对象用于表示一个异步操作的最终完成（或失败）及其解构值

promise如何用

// 1. 创建 Promise 对象
const p = new Promise((resolve, reject) => {
 // 2. 执行异步任务-并传递结果
 // 成功调用: resolve(值) 触发 then() 执行
 // 失败调用: reject(值) 触发 catch() 执行
})
// 3. 接收结果
p.then(result => {
 // 成功
}).catch(error => {
 // 失败
})

promise的状态

待定（pending）：初始状态，既没有被兑现，也没有被拒绝
已兑现（fulfilled）：操作成功完成
已拒绝（rejected）：操作失败

同步代码和异步代码

同步代码：逐行执行，需原地等待结果后，才继续向下执行

异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发一个回调函数，js中有setTimeout / setInterval，事件，AJAX等异步代码

promise-链式调用

Coding_one_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX知识汇总

使用浏览器的 XMLHttpRequest 对象与服务器通信浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页官方名称是统一资源定位符，也就是我们常说的网址，通过这个网址可以进入我们需要的页面。
复制链接

扫一扫