封装ajax原理

Posted 2020-10-04

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