最详细的原生js实现ajax的封装

Posted 2020-11-21 木柁

1. ajax的介绍

1.1 含义

ajax 的全称是Asynchronous javascript and XML
简单理解下:ajax就是异步的js和服务端的数据

1.2 组成

异步的js:事件,对象等
其他js:数据处理和解析的js
服务器的载体:xhr对象
服务端的数据:json,xhr,html,txt等字符型数据

1.3 作用

它作为前端向后端发送数据请求的重要手段,可以实现网页无刷新加载数据.

1.4 利弊

与传统的form表单的get和post方式相比较,ajax的优点很明显

优点:1.提升加载速度,实现局部加载
     2.节省性能,能很好提升用户体验

当然,事物都是相对的,缺点如下

缺点:1.破坏了浏览器的前进后退功能
     2.破坏了seo的网络优化

2. ajax的书写

2.1.1 ajax的GET请求方式

GET请求的数据会附在URL之后， 以 ? 分割URL和传输数据， 参数之间以 & 相连

//1.创建xhr对象
var xhr = new XMLHttpRequest();
//2.xhr的发送方式:get  
xhr.open("GET", url, true)
//参数1:请求方式
//参数2:url是后端文件所在服务器的位置
//参数3:异步true;同步false
//3.监听xhr对象的状态
xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //客户端状态码为4:响应内容解析完成,可以调用
            //服务端的状态码为200:交易成功
            console.log(xhr.responseTxt)
            //返回响应信息
        }
        //4.发送信息
        xhr.send();

2.1.2 小bug

以上是最基本的ajax代码,有两处小bug, 在封装过程中会解决

bug1:传的参数为空时,会报错
bug2:浏览器的缓存干扰使得数据无法刷新

2.1.3 ajax的Get方式封装

//接收三个参数:后端文件地址,回调函数和数据(对象格式)
function ajaxGet(url, callback, data) {
    //1.解析发送的数据
    data = data || {};
    //修复bug1:参数为空变为空对象
    var str = "";
    for (var i in data) {
        str += `${i}=${data[i]}&`;
        //拼接get的数据格式
    }
    //2.拼接url
    var d = new Date();
    url = url + "?" + str + "__sjc=" + d.getTime();
    //修复bug2:拼接一个不会重复的时间戳,欺骗缓存;
    //时间戳的命名应该尽量复杂,防止后端读取到.
    //3. 准备ajax
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(xhr.responseText);
        }
    }
    xhr.send();
}

2.2.1 ajax的POST请求方式

ajax的POST和GET的结构大体相同,但有以下三点区别

区别1:post发送数据位置是send()内,而不是拼接在url后
区别2:open的请求方式变为POST
区别3:send会原样发送数据,为确保后端能识别,必须设置数据格式为表单格式

2.2.1 ajax的POST方式封装

function ajaxPost(url, callback, data) {
    data = data || {};
    var str = "";
    for (var i in data) {
        str += `${i}=${data[i]}&`;
    }
    //不必拼接时间戳
    var xhr = new XMLHttpRequest();
    //区别2
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(xhr.responseText);
        }
    }
    //区别3:发送前设置数据格式
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //区别1:数据发送在send内
    xhr.send(str);
}