封裝ajax原理

1. 首先處理 用戶如果不傳某些參數，設置默認值
   • type默認get
   • 默認url為當前頁
   • 默認async方式請求
   • data數據默認為{}
2. 處理用戶傳進來的參數對象
   • 遍歷，拼接成key=value&key=value形式,加入數組
3. 通過XMLHttpRequest對象創建xhr，早期的IE瀏覽器不支持XMLHttpRequest對象,通過var xhr = new ActiveXObject('Msxm12.XMLHTTP')創建
4. 判斷用戶請求的方法
   • get:將數據拼接在url后面，
   • post：需要加一個請求頭，并且用send方法傳遞數據
5. 判斷數據是否請求成功
   • xhr.readyState == 4 && xhr.status == 200表示請求成功
6. 根據服務器端返回的數據類型進行加工，再用callback傳遞出去
   • 如果返回的是json格式的數據，就轉換成js對象json.parse
   • 如果是xml格式，就將DOM文檔對象返回
   • 將處理好的數據用callback傳遞出去
7. 優化！！！
   • 將用戶需要傳入的參數掛載到options對象上，用戶只需要傳入一個對象就可以使用了

function ajax(options){
			//默認值的處理，用戶不傳某些參數的時候，設置一些默認值
			//設置type的默認值為get
			options.type = options.type || "get";
			//設置請求地址的默認值為當前頁地址
			options.url = options.url || location.href;
			// //設置async的默認值
			options.async = options.async || "true";
			//設置options.data的默認值
			options.data = options.data || {};

			//處理用戶傳進來的請求參數（data）對象
			//{key: "123", age: 1, gender: "male"}
			//key=123&age=1&gender=male
			var dataArr = [];
			for(var k in options.data){
				dataArr.push(k + "=" + options.data[k]);
			}
			var dataStr = dataArr.join("&");


			var xhr = new XMLHttpRequest();
			xhr.open(options.type, options.type == "get"? options.url + "?" + dataStr : options.url, options.async);

			if(options.type == "post"){
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			}
			xhr.send(options.type == "get"? null : dataStr);

			if(options.async){
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						var type = xhr.getResponseHeader("Content-Type");
						var result;
						if(type.indexOf("json") != -1){
							result = JSON.parse(xhr.responseText);
						}else if(type.indexOf("xml") != -1){
							result = xhr.responseXML;
						}else{
							result = xhr.responseText;
						}
						options.success(result);
					}
				}
			}else{
				var type = xhr.getResponseHeader("Content-Type");
				var result;
				if(type.indexOf("json") != -1){
					result = JSON.parse(xhr.responseText);
				}else if(type.indexOf("xml") != -1){
					result = xhr.responseXML;
				}else{
					result = xhr.responseText;
				}
				options.success(result);
			}
		}

		function get(options){
			options.type = "get";
			ajax(options);
		}

		function post(options){
			options.type = "post";
			ajax(options);
		}

		// ajax({
		// 	url: "json.php",
		// 	data: {key: "123", age: 1, gender: "male"},
		// 	success: function(data){
		// 		console.log(data);
		// 	}
		// });

		get({
			url: "json.php",
			success: function(data){
				console.log(data);
			}
		})

		// ajax({
		// 	url: "xml.php",
		// 	type: "get",
		// 	data: {key: "123", age: 1, gender: "male"},
		// 	success: function(data){
		// 		console.log(data);
		// 	}
		// });