ajax原生js封装教程

<script>
function ajax(json) {
        json.type = json.type ? json.type : 'get';
        json.async = json.async == false ? false : true;
        json.contentType = json.contentType ? json.contentType : 'application/x-www-form-urlencoded';
        json.data = json.data ? json.data : '';
        var ajax = new XMLHttpRequest();
        if (json.type.toLowerCase() == 'post') {
            ajax.open('post', json.url, json.async);
            ajax.setRequestHeader('Content-type', json.contentType + ';charset=utf-8');
            ajax.send(json.data);
        } else {
            ajax.open('get', json.url + '?' + json.data, json.async);
            ajax.send();
        }
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                json.success(ajax.response);
            }
        }
    }
</script>

带注释的

<script>
// ajax封装 
        /* 
            请求方式: type 非必传，默认get
            请求地址: url 必传
            是否异步: async 非必传
            设置头请求: contentType 非必传
            请求数据: data 非必传
        */
        function ajax(json) {
             // 如果没传类型，则默认get方式
            json.type = json.type ? json.type : 'get'; 
            // 是否异步传送  布尔值
            json.async = json.async == false ? false : true;
            //设置头请求 get非必须  post方式必须设置
            json.contentType = json.contentType ? json.contentType : 'application/x-www-form-urlencoded';
            //传送数据
            json.data = json.data ? json.data : '';
            //创建异步对象
            var ajax = new XMLHttpRequest();
            // 判断是get还是post请求
            //如果是post请求
            if (json.type.toLowerCase() == 'post') {
                //设置请求类型、请求地址、是否异步
                ajax.open('post', json.url, json.async);
                //post请求一定要在send前设置请求头才行，不然会报错 + 编码方式
                ajax.setRequestHeader('Content-type', json.contentType + ';charset=utf-8');
                //发送请求，数据作为参数传入
                ajax.send(json.data);
            } else {//不是post就为get（第一步设置的）
                //设置请求类型、请求地址（可以带参数）、请求数据、是否异步
                ajax.open('get', json.url + '?' + json.data, json.async);
                //发送请求
                ajax.send();
            }
            //注册事件 onreadystatechange状态改变就会调用
            ajax.onreadystatechange = function () {
                //判断服务器是否正确响应
                if (ajax.readyState == 4 && ajax.status == 200) {
                    //用success作为成功后的回调函数
                    json.success(ajax.response);
                }
            }
        }
</script>