2021年前端基础面试题 12 AJAX

手写简易的ajax

const xhr = new XMLHttpRequest();
// method:要是用的HTTP方法,url:请求的主体,async(可选):false为同步,true为异步,默认为同步
xhr.open('GET', '/api', false);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            alert(xhr.responseText);
        };
    };
};
xhr.send(null); //如果请求方法是 GET 或者 HEAD,则应将请求主体设置为 null。

xhr.readyState

0 – (未初始化)还没有调用send()方法
1 – (载入) 已调用 send()方法,正在发送请求
2 – (载入完成) send()方法执行完成,已经接受到全部响应内容
3 – (交互)正在解析响应内容
4 – (完成)响应内容解析完成,可以在客户端调用

status 状态码

301 永久重定向
302 临时重定向
301表示旧地址A的资源已经被永久地移除了(这个资源不可访问了),搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址;302表示旧地址A的资源还在(仍然可以访问),这个重定向只是临时地从旧地址A跳转到地址B,搜索引擎会抓取新的内容而保存旧的网址。

304 缓存
404 未找到
403 无权限
5xx 服务端报错

若想设置POST请求版,则需更改

xhr.open里的参数为xhr.open(‘POST’, url, true/false);
xhr.send里的参数为xhr.send(p);,

浏览器同源策略 协议 域名 端口 三者缺一不可

jsonp实现跨越
window.callback=fn
callback({data:1})

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:231 次浏览