­

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>

带注释的

// 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);
                }
            }
        }

 

Tags: