2024-04-22(AJAX)

news/2024/5/4 2:44:52

1.什么是Ajax

使用浏览器的XMLHttpRequest对象和服务器进行通信

浏览器网页中，使用Ajax技术（XMLHttpRequest对象）发起获取服务器数据的请求，服务器将数据给前端，前端拿到数据后，展示到网页。

2.为什么学Ajax

以前前端页面的数据都是写在代码里面固定的，无法随时变化

现在通过Ajax可以动态的从服务器获取，让数据灵活变化

3.axios

第三方库axios，该库语法简单，让我们有更多精力关注在与服务器通信上，且后续Vue，React，也使用axios库与服务器通信

语法：

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

4.为什么axios也要进行错误处理

因为普通用户不回去控制台查看服务器传过来的错误信息，所以我们要编写代码拿到错误信息并展示在前端页面上给用户看。

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

5.form-serialize插件用于快速收集表单范围内元素的值

参数1：hash

true：收集出来的是一个JS对象结构

false：收集出来的是一个查询字符串格式

参数2：empty

true：收集空的值

false：不收集空置

6.什么是事件委托？

事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素。

当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

7.事件对象e.target的作用是什么？

获取到这次触发事件目标标签元素

8.对于前端组件，什么时候用属性控制，什么时候用JS控制？

直接出线或者隐藏的时候，可以用属性方式来控制。如果需要先执行一段JS逻辑再显示/隐藏就要用JS的方式控制。

9.图片上传怎么做？

先依靠文件选择元素获取用户选择的本地文件，接着提交到服务器保存，服务器会返回图片的url网址，然后把网址加载到img标签的src属性中即可显示图片。

具体：

（1）先获取图片文件对象

（2）使用FormData表单数据对象装入（因为图片是文件而不是以前的数字和字符串，所以传递文件一般需要放入FormData对象中，以键值对--文件流的数据结构传递）

const fd = new FormData()
fd.append(参数名, 值)

（3）提交表单数据对象，使用服务器返回图片的url地址

10.AJAX，XMLHttpRequest对象，axios

Ajax是浏览器与服务器通信的技术，采用XMLHttpRequest对象相关代码。axios是对XHR相关代码进行了封装，让我们只关心传递的接口参数。学习XHR可以了解axios内部与服务器交互过程的真正原理。

11.XMLHttpRequest语法

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

12.问答

AJAX原理是什么？

window提供的XMLHttpRequest

为什么学习XHR？

有更多与服务器数据通信的方式

XHR的查询参数

XHR的查询参数需要我们自己在url后面携带查询参数字符串，就没有axios帮我们把params参数拼接到url字符串后面了

没有了axios，我们向服务器发送请求时，连请求内容类型都需要我们自己来设置（xhr.setRequestHeader('Content-Type', 'application/json')）

13.Promise

表示（管理）一个异步操作最终状态和结果值的对象

Promise的好处：成功和失败状态，可以各自关联对应的处理函数，并了解到axios内部运作的原理。

语法：

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

示例代码：

<script>const p = new Promise((resolve, reject) => {setTimeout(() => {// resolve('模拟Ajax请求成功结果')reject(new Error('模拟Ajax请求失败结果'))}, 2000)})// 获取结果p.then(result => {console.log(result)}).catch(error => {console.log(error)})
</script>

例子：

<script>// 获取省份数据const p = new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()xhr.open('GET', '服务器省份资源地址')xhr.addEventListener('loadend', () => {if(xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})p.then(resule => {console.log(result)document.querySelector('.my-p').innerHTML = result.list.join('<br>')}).catch(error => {console.log(error)document.querySelector('.my-p').innerHTML = error.message})
</script>