Ajax-6. Ajax 的封装

自定义 Ajax 的封装

myajax.js

function myAjax(obj) {
	let defaults = {
		type: "get",
		url: "#",
		dataType: "json",
		data: {},
		async: true,
		success: function(result) {
			console.log(result);
		}
	};

	//obj中的属性，覆盖到defaults中的属性
	//1、如果有一些属性只存在obj中，会给defaults中增加属性
	//2、如果有一些属性在obj和defaults中都存在，会将defaults中的默认值覆盖
	//3、如果有一些属性只在defaults中存在，在obj中不存在，这时候defaults中将保留预定义的默认值
	for (let key in obj) {
		defaults[key] = obj[key];
	}
	// 创建对象
	let xhr = null;
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	} else {
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	//得到params
	// data:{
	// 	uname:"zhangsan",
	// 	age:"18"
	// }//  uname=zhangsan&age=18
	let params = "";
	for (let attr in defaults.data) {
		params += attr + "=" + defaults.data[attr] + "&";
	}
	if (params) {
		params = params.substring(0, params.length - 1);
	}
	if (defaults.type == "get") {
		defaults.url += "?" + params;
	}
	// 准备发送
	xhr.open(defaults.type, defaults.url, defaults.async);
	// 执行发送
	if (defaults.type == "get") {
		xhr.send(null);
	} else if (defaults.type == "post") {
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send(params);
	}
	// 判断是否为异步
	if (defaults.async) {
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4) {
				if (xhr.status == 200) {
					let result = null;
					if (defaults.dataType == "json") {
						result = xhr.responseText;
						result = JSON.parse(result);
					} else if (defaults.dataType == "xml") {
						result = xhr.responseXML;
					} else {
						result = xhr.responseText;
					}
					defaults.success(result);
				}
			}
		};
	} else {
		if (xhr.readyState == 4) {
			if (xhr.status == 200) {
				let result = null;
				if (defaults.dataType == "json") {
					result = xhr.responseText;
					result = JSON.parse(result);
				} else if (defaults.dataType == "xml") {
					result = xhr.responseXML;
				} else {
					result = xhr.responseText;
				}
				defaults.success(result);
			}
		}
	}
}

调用方法

1. 引入 myajax.js 文件
2. myAjax(type,url,params,dataType,callback(result),async);

   type：请求方式，get 和 post，默认为 get
   url：地址
   params：传递参数，形式为：data: {key: value,...}
   dataType：数据格式，默认为 json 数据格式
   callback(result)：回调函数 success: function(result) {console.log(result);}
   async：同步或异步，默认 true 异步
   

let usernameValue = username.value;
let type = "get";
let url = "./server/checkUsername.php";
// let params = "uname=" + usernameValue;
let dataType = "text";

myAjax({
	url: url,
	data: {
		uname: usernameValue
	},
	dataType: "text",
	success: function(result) {
		let username_result = document.querySelector("#username_result");
		if (result == "ok") {
			username_result.innerText = "用户名可以使用";
		} else {
			username_result.innerText = "用户名已经被注册";
		}
	},
	async: false
});

jQuery 中封装的 Ajax

引入 jQuery 文件

1. $.ajax() 常用的与自定义封装基本类似

2. $.get()

   let params = "uname=" + usernameValue;
   $.get(url + "?" + params, function(result) {
   	console.log(result);
   });
   

3. $.post()

   $.post(url ,{e:emailValue}, function(result) {
   	console.log(result);
   });