【方法】原生js实现方法ajax封装

/* 参数说明
* type【String】 请求方式（'POST'或'GET'） 默认设置'GET'方式
* dataType【String】 获取到的后台数据格式 默认'JSON'格式
* async【String】 是否异步执行 默认true异步执行
* data【Object】 请求参数
* success【Function】 成功回调函数
* fail【Function】 失败回调函数
*/

function ajax({type, dataType, async, data, url, success, fail}) {

　　type = (type || "GET").toUpperCase();

　　dataType = dataType || 'json';

　　async = async || true;

　　var getParams = function (data) { // 将对象拼接成字符串形式

　　　　var arr = [];

　　　　for (var param in data) {

　　　　　　arr.push(encodeURIComponent(param) + '=' + encodeURIComponent(data[param]));

　　　　}

　　　　return arr.join('&');

　　}

　　var params = getParams(data),

　　xhr;

　　if (window.XMLHttpRequest) {

　　　　xhr = new XMLHttpRequest();

　　} else {

　　　　xhr = new ActiveXObject('Microsoft.XMLHTTP')

　　}

　　xhr.onreadystatechange = function () {

　　　　if (dataType === 'json') {

　　　　　　if (xhr.readyState == 4) {

　　　　　　　　var status = xhr.status;

　　　　　　　　if (status >= 200 && status < 300) {

　　　　　　　　　　success && success(xhr.responseText, xhr.responseXML); // 判断success回调函数的存在并执行函数

　　　　　　　　} else {

　　　　　　　　　　fail && fail(status); // 判断fail回调函数的存在并执行函数

　　　　　　　　}

　　　　　　}

　　　　} else {

　　　　　　if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

　　　　　　　　var oScript = document.createElement('script');

　　　　　　　　document.body.appendChild(oScript);

　　　　　　　　var callbackname = 'monoplasty'

　　　　　　　　oScript.src = opt.url + "?" + params + '&callback=' + callbackname;

　　　　　　　　window['monoplasty'] = function (data) {

　　　　　　　　　　success(data);

　　　　　　　　　　document.body.removeChild(oScript);

　　　　　　　　};

　　　　　　}

　　　　}

　　};

　　if (type == 'GET') {

　　　　xhr.open("GET", url + '?' + params, async);

　　　　xhr.send(null);

　　} else if (type == 'POST') {

　　　　xhr.open('POST', url, async);

　　　　xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

　　　　xhr.send(params);

　　}

}

【调用示例】

ajax({
    url: "",
    type: 'GET',
    data: {
        name: 'monoplasty',
        age: '23',
        email: 'monoplasty@aliyun.com'
    },
    success: function(response, xml) {
        console.log(response);
    },
    fail: function(status) {
        console.log('状态码为' + status);
    }
});

【参考地址】https://blog.csdn.net/monoplasty/article/details/80315147