JavaScript代码如下,说明见注释:
var ajax = function(parameters) {
/*
* @description 用Ajax获取数据。
* @parameter {object} parameters 数据对象,属性如下:
* @property {string} url 请求地址
* @property {string} [method] 请求方式,默认【get】
* @property {object} [data] 发送的数据,默认【{}】
* @property {boolean} [async] 是否异步,默认【false】
* @property {function} [success] 请求数据成功的回调函数,默认【function(data){}】,【data】表示请求到的数据
* @property {function} [error] 请求数据失败的回调函数,默认【function(status){}】,【status】表示XHR的状态码
* @return {undefined}
*/
var url = parameters.url,
method = parameters.method || "get",
data = parameters.data || {},
async = parameters.async || false,
success = parameters.success || function(data){},
error = parameters.error || function(status){},
isEmptyObject = function(obj) { //判断是否为空对象
for (var prop in obj) {
return false;
}
return true;
},
formData = function(data) { //格式化数据,即将数据对象【data】转为【name=value&name2=value2】的形式
var newData = "";
for (var prop in data) {
newData += encodeURIComponent(prop); //对属性和(下面的)值都要编码
newData += "=";
newData += encodeURIComponent(data[prop]);
newData += "&";
}
return newData.substring(0, newData.length - 1);
};
if (typeof url !== "string") {
throw new Error("url must be a string");
}
if (typeof data !== "object") {
throw new Error("data must be a object");
}
if (!isEmptyObject(data)) { //在当前数据不为空的情况下
if (method === "get") { //【get】的方式下,通过【URL】传参,故将【data】里面的数据解析并格式化后放到【URL】后面去
if (url.indexOf("?") === -1) { //如果【URL】中没有“?”,避免【URL】后面重复添加“?”
url += "?";
} else if (url.indexOf("&") !== url.length - 1) { //如果【URL】中的最后一个字符不是“&”,避免【URL】在拼接数据字符串的地方重复添加“&”
url += "&";
}
url += formData(data);
data = null;
} else{ //【post】方法下,通过后面的【xhr.send(data)】方法传参,但是传参的数据格式也是和【get】方式的数据格式一样的,只不过【post】是通过将数据放在了【request body】里面传递到后台的
data = formData(data);
}
}
var xhr = new XMLHttpRequest(); //创建【XHR】对象。IE7+
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { //请求已完成,且响应已就绪
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { //数据请求成功。【2**】表示请求成功,【304】表示从浏览器缓存中获取数据
success(xhr.responseText); //【xhr.responseText】表示请求到的数据
} else{
error(xhr.status); //【xhr.status】表示请求失败是对应的HTTP状态码
}
}
};
xhr.open(method, url, async); //参数依次为:请求方式,地址,是否异步
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //设置发送过去的数据格式为表单形式的数据格式,在【post】方式时用到
xhr.send(data); //发送数据。在【get】方式时,通过【URL】传参,这里可以不用发送数据,但参数必须为【null】而不能为空,而通过【post】方式则需要通过此方法传参
};
使用示例:
ajax({
url : "test.php",
data : {
"id" : 1,
"name" : "Xiao?Ming",
"age" : 18
},
method : "get",
async : false,
success : function(data) {
console.log(data);
},
error : function(status) {
console.log(status);
}
});
test.php:
<?php
$id = $_GET["id"];
$name = $_GET["name"];
$age = $_GET["age"];
// $id = $_POST["id"];
// $name = $_POST["name"];
// $age = $_POST["age"];
echo $id;
echo $name;
echo $age;
?>