我们先说一下使用AJAX发起一个请求的过程
- 创建一个XMLHttpRequest对象的实例,
var xmlHttpRequest = new XmlHttpRequest();
//完整的过程
var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器,比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
- 设置该实例请求发向目标,发起的方式,get还是post,并可以配置一些ajax的选项
xhttp.open("get/post", "url", true);
//true表示是否为同步,true则为同步,否则为异
- 设置该实例的响应函数
req.onreadystatechange = function () {
//代码先略过不写,后面再具体细说
}
- 发送请求
xhttp.send();//发送请求
- 使用XmlHttpRequest对象的responseText或responseXML属性获得服务器响应报文,
- 获得状态码。表示请求未被初始化 1表示服务器连接成功 2表示请求被服务器接收 3表示处理请求 4表示请求处理完成
xhttp.status == 200 && xhttp.onreadystatechange==4
手动封装一个类似jQuery类似的AJAX方法(简单版)
myAjax(options).success(成功时执行的回调函数).fail(失败时执行的回调函数)
1.建立一个myAjax对象类
var myAjax = function (options) {
//创建一个空对象,之后将返回它
var obj = {}
//分别表示成功和失败时,执行函数的变量
var successCallback = function () {}
var failCallback = function () {}
//回调函数作为参数传入,赋值给内置的变量
//由于可以连写,因此确保done和fail两个方法,在执行后的返回值也需要是obj对象(不然无法连写了)
obj.success = function (success2) {
successCallback = success2;
return obj;
}
obj.fail = function (fail2) {
failCallback = fail2;
return obj;
}
//...
// 一些中间省略掉的代码
return obj;
}
2.options 属性检查
//对象类型检查,首先要求参数必须是对象
//然后如果url或者type类型需要是字符串
if (!(options instanceof Object) || (typeof options.url !== 'string') || (typeof options.type !== 'string')) {
//给个报错的提示信息呗
console.error("error arguments for ajax");
return obj;
}
3.data属性检查判断
//只有有data属性的时候才需要进行处理,
//假如data属性是一个函数,那么跳过,就当没有
if (typeof options.data === "undefined" && typeof options.data === "function") {
// 加入data属性是不是get方法,则data直接放进请求头
if (options.type.toLowerCase() !== "get") {
if (typeof JSON.stringify !== "function") {
console.error(
"can't use JSON.stringify(), so can't Ajax by post when type of data is object"
);
return obj;
}
//转化为json字符串,放进data请求头中去。
var data = JSON.stringify(options.data);
} else {
//肯定是get方法
//data属性是string类型或number类型的话,则直接放进url中
if (typeof options.data == "string" || typeof options.data == "number") {
var data = options.data;
} else if (options.data instanceof Object) {
//data属性是object类型,将对象改为&连接的形式放进url中
var tempArray = [];
for (j in options.data) {
if (typeof options.data[j] !== "object" && typeof options.data[j] !== "function") {
tempArray.push(j + "=" + options.data[j]);
}
}
if (tempArray.length > 0) {
var data = tempArray.join("&");
}
}
}
}
4.创建ajax实例
var req = new XMLHttpRequest();
req.onreadystatechange = function () {
console.log(this);
//当属性值不是4的时候,说明ajax没有完成,因此返回不做处理
if (this.readyState !== 4) {
return;
}
// 当ajax的请求完成后,status状态码会发生改变
// 其值来源于Http的头部的Status Code属性
// 可以打开chrome控制台,查看network;
// 然后选择一项请求后查看Headers选项卡中,General中的Status Code属性
// 当值为200时,说明成功获取,否则失败
if (this.status === 200) {
//success是用户自己写的处理回调函数,我们将返回值作为参数传递
//并执行用户自定义的回调函数
successCallback(this.response);
} else {
//fail则是用户写的失败处理函数,同样将错误文本作为参数传递,并执行之
failCallback(this.statusText);
}
}
if (options.type.toLowerCase() === 'get') {
if (typeof data !== 'undefined') {
req.open(options.type, options.url + "?" + data, true);
//发送请求,并返回
req.send();
} else {
req.open(options.type, options.url, true);
req.send();
}
} else {
req.open(options.type, options.url, true);
if (typeof data !== 'undefined') {
//如果存在,那么显然是JSON格式字符串(因为我们前面已经处理过了)
//但是在发送前,我们需要设置一下请求头的Content-Type属性,告诉服务器我们发送的是一个json
req.setRequestHeader("Content-Type", "application/json");
//然后再发送
req.send(options.data)
} else {
//不然直接发送就行
req.send();
}
}
这是对ajax采用myAjax(options).success(successCallback).fail(failCallbacl)的方式进行的一次封装,方法可能较为之简单,大家有什么疑惑欢迎留言,谢谢各位