Ajax封装

实现流程：
        1、得到核心对象XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
        2、准备/打开请求
            open(请求类型GET/POST,请求的路径,是否异步true/false);
        3、发送请求
            send(参数/null);
            注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;
                如果是post请求，有参数则设置参数，无参数设置为null;
        4、解析响应数据
            1、判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成功）
            2、得到后台响应数据  responseText

  var obj = {
        method:"GET",
        url:"js/data.json?aa=11",
        async:true,
        data:{
            uname:"zhangsan",
            uage:18
        },
        success:function(data){
            // 做想处理的事情
            console.log(data);
        }
    };

    调用 //ajax(obj);

function ajax(obj) {
		// 1、得到核心对象XMLHttpRequest对象
		var xhr = new XMLHttpRequest();
		var params = formatParam(obj.data);
		
		// 判断是否是get请求，如果是则将参数拼接在url后面
		if ("GET" == (obj.method).toUpperCase()) {
			//  js/data.json?uname=zhangsan&uage=18
			obj.url += (obj.url).indexOf("?") > 0 ? "&" +params : "?" + params;
		}
		
		// 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);
		xhr.open(obj.method,obj.url,obj.async);
		
		// 判断如果是POST请求
		if ("POST" == (obj.method).toUpperCase()) {
			// 由于Post请求的机制问题，需要模拟表单提交
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			// 3、发送请求  send(参数/null);
			xhr.send(params); // post请求如果有参数，需要将参数设置在send方法中
		} else {
			xhr.send(null); // get请求设置为null
		}
		
		// 判断是同步请求还是异步请求
		if (obj.async)  { // 异步请求
			// 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）
			xhr.onreadystatechange = function() {
				// 如果是异步请求，需要等待数据完全响应后再做处理
				if (xhr.readyState == 4) {
					// 处理响应结果
					callback();
				}
			}
		} else { // 同步请求
			// 处理响应结果
			callback();
		}
		
		// 处理响应结果
		function callback() {
			// 4、解析响应数据
			if (xhr.status == 200) { // 1、判断响应是否成功 status=200
				// 2、得到后台响应数据  responseText
				/* console.log(xhr.responseText);
				var user = JSON.parse(xhr.responseText);
				console.log(user); */
				obj.success(xhr.responseText);	
			} else {
				console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
			}
		}
	}

// formatParam({ uname:"zhangsan", uage:18 });
	
	
	/*将对象格式的参数转换成等号拼接的字符串*/
	function formatParam(data) {
		// 判断参数是否存在
		if (data == null) {
			return "";
		}
		// 定义数组，接收每个参数字符串
		var params = [];
		for(var key in data) {
			/* console.log(key);
			console.log(data[key]);
			console.log(key+"="+data[key]) */
			// js中通过push()方法向数组的最后追加
			params.push(key+"="+data[key]);
		}
		console.log(params.join("&"));
		var param = params.join("&");// uname=zhangsan&uage=18
			
		return param;
	}