2024-04-22(AJAX)

1.什么是Ajax

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

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

2.为什么学Ajax

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

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

3.axios

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

语法:

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

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

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

javascript 复制代码
<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对象中,以 键值对--文件流 的数据结构传递)

javascript 复制代码
const fd = new FormData()
fd.append(参数名, 值)

(3)提交表单数据对象,使用服务器返回图片的url地址

10.AJAX,XMLHttpRequest对象,axios

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

11.XMLHttpRequest语法

javascript 复制代码
<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内部运作的原理。

语法:

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

示例代码:

javascript 复制代码
<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>

例子:

javascript 复制代码
<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>

14.JS中有哪些异步代码?

setTimeout,setInterval,事件,AJAX等

15.异步函数如何接收结果?

依靠回调函数来接收

16.回调函数地狱

在回调函数中嵌套回调函数,一直嵌套下去就形成了回调函数地狱

缺点:可读性差,异常无法捕获,耦合性差,牵一发动全身

17.事件循环

概念:执行代码和收集异步任务,在调用栈空闲时,反复调用任务队列里回调函数执行机制

为什么有事件循环?

JS是单线程的,为了不阻塞JS引擎,设计执行代码的模型

JS内代码是如何执行的?

执行同步代码,遇到异步代码交给宿主浏览器环境执行。异步代码有了结果后,把回调函数放入任务队列排队,当调用栈空闲后,反复调用任务队列里的回调函数。

相关推荐
喵叔哟21 分钟前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特1 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解1 小时前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django