// ajax操作
/*options = {
type : "get|post", // 请求方式，默认 "get"
url : "xxx.php", // 请求资源的URL
async : true, // 是否异步请求，默认为 true
data : {}, // 向服务器传递的数据{username:"xiaoming", password:"abc", phone:"123"}
dataType : "text|json", // 预期从服务器返回的数据格式
success : function(data){}, // 请求成功执行的函数
error : function(errMsg){} // 请求失败执行的函数
}*/
function ajax(options) {
if (!options) // 未传递参数，结束函数执行
return;
// 获取请求的URL
var url = options.url;
if (!url) // 没有请求的服务器资源，结束函数执行
return;
// 获取请求方式
var method = options.type || "get";
// 是否异步
var async = options.async;
if (async === undefined)
async = true;
// 处理查询字符串
var queryString = null;
if (options.data) { // 有向服务器传递的数据，则连接查询字符串
queryString = [];
for (var attr in options.data) {
queryString.push(attr + "=" + options.data[attr]);
}
queryString = queryString.join("&");
}
// 如果是 get 提交数据，将数据用 ? 号串联在 url 中
if (method === "get" && queryString) {
url += "?" + queryString;
queryString = null;
}
// 创建核心对象
var xhr;
if (window.XMLHttpRequest)
xhr = new XMLHttpRequest();
else
xhr = new ActiveXObject("Microsoft.XMLHTTP");
// 建立连接
xhr.open(method, url, async);
// 如果要像表单一样POST提交数据，则设置请求头
if (method === "post")
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 发送请求
xhr.send(queryString);
if (async) { // 异步
// 处理响应
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 获取响应文本
var data = xhr.responseText;
// 判断预期返回的数据格式
if (options.dataType === "json")
data = JSON.parse(data);
// 请求成功时数据处理业务
options.success && options.success(data);
} else {
// 请求失败处理情况
options.error && options.error(xhr.statusText);
}
}
}
} else { // 同步
if (xhr.status === 200) {
// 获取响应文本
var data = xhr.responseText;
// 判断预期返回的数据格式
if (options.dataType === "json")
data = JSON.parse(data);
// 请求成功时数据处理业务
options.success && options.success(data);
} else {
// 请求失败处理情况
options.error && options.error(xhr.statusText);
}
}
}
//封装完成后，根据自身情况选择
// 用于处理get请求
function get(url, data, success, dataType) {
ajax({
type : "get",
url : url,
data : data,
dataType : dataType,
success : success
});
}
// 用于处理post请求
function post(url, data, success, dataType) {
ajax({
type : "post",
url : url,
data : data,
dataType : dataType,
success : success
});
}
// 用于处理get请求，响应数据的格式为json格式
function getJSON(url, data, success) {
ajax({
type : "get",
url : url,
data : data,
dataType : "json",
success : success
});
}
