Ajax --day1

最新推荐文章于 2024-06-08 11:09:56 发布

L北杳

最新推荐文章于 2024-06-08 11:09:56 发布

阅读量47

点赞数

分类专栏：前端文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/qq_63961708/article/details/131740960

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Ajax原理: XMLHttpRequest(XHR) 对象用于与服务器交互,通过XHR在不断刷新页面的情况下请求特定URL,获取数据.

其中: axios内部采用XHR与服务器进行交互.

使用XMLHttpReques步骤:

1. 创建XMLHttpReques对象.

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

3. 监听loadend事件,接收响应结果

4. 发起请求
const xhr = new XMLHttpReques()

xhr.open('请求方法', 'URL地址')

xhr.addEventListener('loadend', () => {
    console.log(xhr.response)

    //转化为字符串
    //JSON格式字符串转换为js对象
    JSON.parse(xhr.response)
})

xhr.send()

XMLHttpReques查询参数:

浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据.

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

将js转化为查询参数的字符串类型的:

//1. 创建 URLSearchParams对象
const paramsObj = new URLSearchParams({
    参数名1: 值1,
    参数名2: 值2
})

//2. 生成指定格式查询参数 字符串
const queryString = paramsObj.toString()
//结果: 参数名1 = 值1 & 参数名2 = 值2

XMLHttpReques数据提交:

const xhr = new XMLHttpReques()

xhr.open('请求方法', 'URL地址')

xhr.addEventListener('loadend', () => {
    console.log(xhr.response)

    //转化为字符串
    JSON.parse(xhr.response)
})

// 告诉服务器,我传递的内容类型,是JSON字符串
xhr.setRequestHeader('Content-Type', 'application/json')

// 准备数据并转化为JSON字符串
const user = {username: 'ly', password: '123'}
//JSON.stringify()先将对象转换为字符串
const userStr = JSON.stringify(user)
// 发送请求数据
xhr.send()

Promise-三种状态:

1. 待定(pending) :初始状态,既没有被兑现,也没有被拒绝

2. resolve()已兑现(fulfilled) :意味着,操作成功完成 ---> .then(回调函数)

3. reject()已拒绝(rejected) : 意味着,操作失败 ---> .catch(回调函数)

注意: promise对象一旦被兑现|拒绝就是已敲定了,状态无法再改变.

案例: 获取省份列表

<!DOCTYPE html>
<html lang="en">
<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>简易axios获取省份列表</title>
</head>
<body>
    <p class="mp"></p>
    <!-- 
        目标: 封装_简易axios函数_获取省份列表
        1. 定义myAxios函数,接收配置对象,返回Promise对象
        2. 发起XHR请求,默认请求方法为GET
        3. 调用成功/失败的处理程序
        4. 使用myAxios函数,获取省份列表
     -->
     <script>
        function myAxios(config){
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                // 判断是否有查询参数
                if(config.params){
                    // 存在查询参数,需要将js参数改为查询参数
                    const paramsObj = new URLSearchParams(config.params)
                    const queryString = paramsObj.toString()
                    // 把查询字符串拼接到url?后面
                    config.url += `?${queryString}`
                }
                xhr.open(config.method || 'GET', config.url);
                xhr.addEventListener('loadend',() => {
                    if(xhr.status >= 200 && xhr.status < 300){
                    resolve(JSON.parse(xhr.response))
                    }else{
                        reject(new Error(xhr.response))
                    }
                })
                xhr.send()
            })
        }

        myAxios({
            url:'http://hmajax.itheima.net/api/area',
            params:{
                pname:'四川省',
                cname:'成都市'
            }
        }).then(result => {
            console.log(result);
            document.querySelector('.mp').innerHTML = result.list.join('<br>')
        }).catch(errpr => {
            console.log(error);
            document.querySelector('.mp').innerHTML = error.message
        })
     </script>
</body>
</html>

L北杳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Ajax --day1

2. resolve()已兑现(fulfilled) :意味着,操作成功完成 ---> .then(回调函数)3. reject()已拒绝(rejected) : 意味着,操作失败 ---> .catch(回调函数)语法: http://xxx.com/xxx/xxx?参数名1 = 值1&参数名2 = 值2。注意: promise对象一旦被兑现|拒绝就是已敲定了,状态无法再改变.1. 待定(pending) :初始状态,既没有被兑现,也没有被拒绝。2. 配置请求方法和请求url地址。
复制链接

扫一扫