新闻资讯

新闻资讯 媒体报道

前端学习笔记-AJAX

编辑:013     时间:2021-07-29
MDN:通过交互式网站和现代 Web 标准,AJAX正在逐渐被 JavaScript 框架中的函数和官方的 Fetch API 标准取代。

流程5点
先参考一下 HTTP 请求:

设置目标网址、请求方法(get/post)。
提交请求的数据、请求主体。
接收响应回来的内容。
发送 Ajax 请求的5点:

创建xhr对象,即 new 一个 XMLHttpRequest();
调用open(method, url, async=true)设置请求参数:请求方法、目标url、是否异步。async默认 true。
调用send()发送请求:
定义事件回调:onreadystatechange = callback(),状态改变时就会调用。
服务端响应,在回调函数中获取返回的数据。
看看一般情况下GET的代码即可,正好5步骤对应5行

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api', true);
xhr.send(null);
xhr.onreadystatechange = function () { 
/* 可拿到xhr.responseText 或 xhr.responseXML*/
};

如果使用POST方法,就需要在send之前调用 xhr对象的 setRequestHeader() 来添加header。然后给 send()传入要发送的数据:

xhr.open('POST', '/api', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('name=LXY&son=MR');

xhr.readyState,表达的是request的状态:
从0~4共有5个:

state 状态 助记
0 unsent 未初始化 open()没被调用,请求还未初始化
1 opened 正在加载 open()被调用,已建立服务器链接
2 headers_received 加载成功 send()被调用,请求已接受
3 loading 交互 正在处理请求,下载中
4 done 完成 请求已完成 并且响应已准备好
直接看示例代码:

var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.readyState); // readyState will be 0

xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState); // readyState will be 1

xhr.onprogress = function () {
    console.log('LOADING', xhr.readyState); // readyState will be 3
};

xhr.onload = function () {
    console.log('DONE', xhr.readyState); // readyState will be 4
};

xhr.send(null);

呃,看起来很难在状态2 也就是headers_received的瞬间做什么事情……

但这段代码提醒我们,还有两个事件可以注册回调:onprogress和onload ,顾名思义吧。

xhr.status,表达的是response的状态
它的默认值取0 (完成前 或 出错后),正常情况返回的是HTTP status codes (比如200、404那些)。

综上,当 readyState 等于 4 且状态码为 200 时,可判断请求响应的过程成功结束。

两个属性各自表示不同的状态,不要弄混,示例代码:

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log('收到:' + JSON.stringify(xhr.responseText));
        // 后续操作:document.querySelector('h1').innerHTML = xhr.responseText;
    }
};

封装
function myAjax(url, callback, failback) {
    // 1、创建XHR对象 new
    const xhr = new XMLHttpRequest();
    // 2、发送请求 open & send
    xhr.open('GET', url, true);
    xhr.send();
    // 3、服务端响应 readyState & status 
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            const obj = JSON.parse(xhr.responseText);
            console.log('返回数据:', obj);
            callback && callback(xhr.responseText);
        } else {
            failback && failback(new Error('请求失败'));
        }
    };
}

// 单次调用
myAjax('a.json', (res) => { console.log(res); });

// 多次调用,给大家表演一个回调地狱
myAjax('a.json', (resA) => {
    console.log(resA);
    myAjax('b.json', (resB) => {
        console.log(resB);
        myAjax('c.json', (resC) => {
            console.log(resC);
        });
    });
});
————————————————
版权声明:本文为CSDN博主「科粒」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/melxy1997/article/details/119141945
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

回复列表

相关推荐