原生ajax的封装

1.原生ajax的封装

		//四个参数：请求方式、请求地址、请求体、回调函数
		function ajax(method, url, params, fn) {
			//这里解决请求方式大小写问题
            method = method.toUpperCase();
            var xhr = new XMLHttpRequest();
            // 将 object 类型的参数转换为 key=value&key=value
            if (typeof params === 'object') {
                var tempArr = [];
                for (var key in params) {
                    var value = params[key];
                    tempArr.push(key + '=' + value);
                }
                // tempArr => [ 'key1=value1', 'key2=value2' ]
                params = tempArr.join('&');
                // params => 'key1=value1&key2=value2'
            }
            if (method === 'GET') {
                url += '?' + params;
            }
            xhr.open(method, url);
            var data = null;
            if (method === 'POST') {
            	//设置post方法的Content-Type请求头
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                data = params;
            }
            xhr.send(data);
            xhr.onreadystatechange = function () {
                if (this.readyState !== 4) return;
                // 由于异步模式下 这里的代码最后执行 所以不可能在外部通过返回值的方式返回数据，利用回调函数来解决
                fn(this.responseText);
            };
        }

2.封装之后的调用方法

		ajax('get',
            '06users.php', {
                id: 2
            },
            function (res) {
            	var data = JSON.parse(res);
            	console.log(data);
            }
        );