自定义 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);
}
}
}
}
调用方法
- 引入 myajax.js 文件
- 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 文件
-
$.ajax() 常用的与自定义封装基本类似
-
$.get()
let params = "uname=" + usernameValue; $.get(url + "?" + params, function(result) { console.log(result); });
-
$.post()
$.post(url ,{e:emailValue}, function(result) { console.log(result); });