您的位置:首页 > Web前端 > JavaScript

封装的ajax工具函数

2016-09-27 00:00 417 查看
/**
* Created by liyinghao on 2016/9/22.
*/
/*封装ajax工具函数*/

/*请求方式get post   数据格式xml json*/
/*考虑确定有哪些不确定的参数
* 1.请求方式  type   get post   没有传递参数的时候 get方式
* 2.接口地址  url   地址如果没有传递,默认是当前的地址
* 3.是否异步   async  true  false  默认是true异步
* 4.请求数据不确定  data  {}对象的形式  默认为空
* 5.请求成功之后做的事情  success 回调函数  callback
* 6. 请求失败回调函数     error
* 7.请求发送前要做的事情  beforeSend
* */
window.$ = {
// ajax:function(){}
};

/*定义一个ajax工具函数*/
/*options是一个对象var options = {}*/
$.ajax = function (options) {
/*如果没有传递参数,就停止执行*/
if (!options || typeof options != 'object') return false;
/*如果传递了参数*/
var type = options.type || 'get';//如果有就用用户传递的
// var url=options.url||window.location.href;//如果没有传递地址就使用当前路径(是一个绝对路径)
var url = options.url || location.pathname;//如果没有传递地址就使用当前的路径(是一个相对路径)
var async = options.async === false ? false : true;//只有传递进来的参数确实是false才是false
var data = options.data || {};//向后台传递的参数 不能直接传递对象,需要转化为
/*需要把data数据转化为ajax传递数据的格式 name=xx&age=18 */
var dataStr='';
for (key in data) {
dataStr +=key + '=' + data[key] + '&';
}
dataStr = dataStr || dataStr.slice(0, -1);//把dataStr最后一个&去掉

/*ajax变成*/
/*初始化*/
var xhr = new XMLHttpRequest();
/*如果是get请求,采纳数应该拼接在url后面*/

xhr.open(type, type == 'get' ? url+'?' + dataStr : url, async);

/*设置请求头*/
if (type == 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-urlencoded');
}

/*设置请求内容*/

xhr.send(type = 'get' ? null : dataStr);

/*相应部分*/
console.log(111);
xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {  /*首先确定通讯完全完成*/
if (xhr.status == 200) { /*只有这种情况才是通讯成功*/

/*成功*/
/*确定后台想要返回什么数据类型*/
/*application/xml  appliaction/json  text/xml text/json text/css*/
var contentType = xhr.getResponseHeader('content-Type')
var result = null;//接收返回的值
if (contentType.indexOf('xml') > -1) {//说明返回的contentType包含xml后台返回的数据类型为xml
result = xhr.responseXML;

} else if (contentType.indexOf('json') > -1) {
result = xhr.responseText;
result = result && JSON.parse(result);//转化为js对象
console.log(result );
} else {
result = xhr.responseText;
/*当做字符串不做任何处理*/
}
/*执行成功回调函数*/
options.success && options.success(result);

} else {
/*失败*/
/*失败的时候提示信息*/
options.error && options.error({
status: xhr.status,
statusText: xhr.statusText
});
}

}
};

};

/*get*/
$.get = function (options) {
options.type = 'get';
$.ajax(options);
};

/*post*/
$.post = function (options) {
options.type = 'post';
$.ajax(options);
};
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ajax javascript