ajax原生js封装

代码如下(带注释的):

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

不带注释的:

       //未注释版
        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);
                    }
                }
            }

猜你喜欢

转载自www.cnblogs.com/husanr/p/13374771.html