当前位置：首页 > news >正文

前端（AJAX）学习笔记（CLASS 3）：AJAX原理

news 来源：原创 2025/5/20 8:12:24

1、XMLHttpRequest

定义：XHR对象用于与服务器交互

关系：axios内部采用XHR与服务器交互

步骤：

1、创建XMLHttpRequest对象

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

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

4、发起请求

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

查询参数

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

语法：http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2

如果需要拼接多个参数

        // 1、创建URLSearchParams对象
        const paramsObj=new URLSearchParams({
            参数名1:值1,
            参数名2:值2
        })
        // 2、生成指定格式查询参数字符串
        const queryString=paramsObj.toString()

数据提交：

需求：通过XHR提交用户名和密码，完成注册功能

核心：

请求头设置Content-Type：application/json

请求体携带JSON字符串

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

        xhr.setRequestHeader('Content-Type','application/json')
        const user={username:'xxgz',password:'8888'}
        const userStr=JSON.stringify(user)
        xhr.send(userStr)

2、Promise

定义：Promise对象用于表示一个异步操作的最终完成（或失败）及其结果值

好处：

1、逻辑更清晰

2、了解axios函数内部运作机制

3、能解决回调函数地狱问题

        const p=new Promise((resolve,reject) => {
            // 执行异步任务并传递结果
            // 成功调用：resolve（值）触发then（）执行
            // 失败调用：reject（值）触发catch（）执行
        })
        p.then(result =>{

        }).catch(error =>{
            
        })

Promise三种状态

概念：一个Promise对象，必然处于以下几种状态之一

待定（pending）：初始状态，既没有被兑现，也没有被拒绝

已兑现（fulfilled）：意味着，操作成功完成

已拒绝（rejected）：意味着，操作失败

注意：Promise对象一旦被兑现或拒绝，状态无法再改变