【JavaScript】Ajax封装

Ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

		//Ajax 的实现步骤
		// 1.创建ajax对象
		var xhr = new XMLHttpRequest();
		// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
		// 1)请求方式 2)请求地址
		xhr.open('get', 'http://localhost:3000/first');
		// 3.发送请求
		xhr.send();
		// 4.获取服务器端响应到客户端的数据
		xhr.onload = function (){
			console.log(xhr.responseText)
		}

        function ajax(options) {
            //存储默认值
            var defaults = {
                type:'get',
                url:'',
                data:{},
                header:{
                    'Content-Type': 'application/json'
                },
                success:function(){},
                error:function(){},
            }
            //使用options对象中的属性覆盖default对象中的属性
            Object.assign(defaults,options);

            //1、创建ajax对象
            var xhr = new XMLHttpRequest();
			
			//请求参数位置的问题
			//get 放在请求地址的后面 ；post 放在send方法中
			//请求方式为get，请求参数位置 放在请求地址的后面 地址?参数=参数值&参数=参数值
			
            // 拼接请求参数的变量
            var params = '';
            //循环用户传递进来的对象格式参数
            for (var attr in defaults.data) {
                //  将参数转换为字符串格式
                params += attr + '=' + defaults.data[attr] + '&';
            }
            //  将参数最后面的&截取掉
            // 当xhr对象接收完响应数据后触发
            params = params.substr(0, params.length - 1);
            // console.log(params);
			
            //判断请求方式
            if (defaults.type == 'get') {
                defaults.url = defaults.url + '?' + params;
            }
		
            //配置ajax对象
            xhr.open(defaults.type, defaults.url);
            
            //如果请求方式是post
            if (defaults.type == 'post') {
                var contentType = defaults.header['Content-Type'];
                console.log(contentType);
                xhr.setRequestHeader('Content-Type', contentType);
                // 判断用户希望的请求参数格式的类型
				// 如果类型为json
                if (contentType == 'application/json') {
                	// 向服务器端传递json数据格式的参数
                	//在函数内部对象数据类型转换为字符串数据类型更加方便
                    xhr.send(JSON.stringify(defaults.data));
                } else {
                    //发送请求
                    xhr.send(params);
                }
            } else {
                //发送请求
                xhr.send();
            }
            
            //监听xhr对象下面的onload事件
            //当xhr对象接收完响应数据后触发
            //4、获取服务器端响应到客户端的数据
            xhr.onload = function () {
                //获取响应头中的数据       
                var contentType =  xhr.getResponseHeader('Content-Type');
                // 服务器端返回的数据
                var responseText = xhr.responseText;
                // 如果响应类型中包含applicaition/json
                if( contentType.includes('application/json')){
                    //json字符串转为json对象
                    responseText = JSON.parse(responseText);
                }
                //当http状态码 == 200的时候
                if(xhr.status==200){
                    //请求成功
                    defaults.success(responseText,xhr);
                }else{
                    //请求失败
                    defaults.error(responseText,xhr);
                }
                
            }
        }
        ajax({
            url: 'http://localhost:3000/responseData',         
            success: function (data) {
                console.log("success:");
                console.log(data);
            },
           
        })