赖同学


  • 首页

  • 标签

  • 分类

  • 归档

  • 站点地图

  • 留言

  • 搜索

原生js实现Ajax

发表于 May 16, 2018|分类于 javaScript相关|阅读次数: –
字数统计: 195|阅读时间: 1 min

原生js实现Ajax

function ajax() {
    var ajaxData = {
        type: arguments[0].type || 'GET',
        url: arguments[0].url || '',
        aysnc: arguments[0].async || 'true',
        data: arguments[0].data || null,
        dataType: arguments[0].dataType || 'text',
        contentType: arguments[0].contentType || 'application/x-www-form-urlencoded',
        beforeSend: arguments[0].beforeSend || function() {},
        success: arguments[0].success || function() {},
        error: arguments[0].error || function() {},
    }
    ajaxData.beforeSend() {
        var xhr = createxmlHttpRequest();
        xhr.responseType = ajaxData.dataType;
        xhr.open(ajaxData.type, ajaxData.url, ajaxData.async);
        xhr.setRequestHeader("Content-Type", ajaxData.contentType);
        xhr.send(convertData(ajaxData.data));
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    ajaxData.success(xhr.response)
                } else {
                    ajaxData.error()
                }
            }
        }
    }

    function createxmlHttpRequest() {
        if (window.ActiveXObject) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        }
    }

    function convertData(data) {
        if (typeof data === 'object') {
            var convertResult = "";
            for (var c in data) {
                convertResult += c + "=" + data[c] + "&";
            }
            convertResult = convertResult.substring(0, convertResult.length - 1)
            return convertResult;
        } else {
            return data;
        }
    }
}

// 调用
ajax({
    type: "POST",
    url: "ajax.php",
    dataType: "json",
    data: {
        "val1": "abc",
        "val2": 123,
        "val3": "456"
    },
    beforeSend: function() {
        //some js code 
    },
    success: function(msg) {
        console.log(msg)
    },
    error: function() {
        console.log("error")
    }
})
JavaScript
react-day1
position四个属性的区别
  • 文章目录
  • 站点概览
  1. 1.原生js实现Ajax
© 2018 — 2023赖彬鸿
1.6k
载入天数...载入时分秒...
0%