类似ajax封装函数,封装的ajax工具函数

/**

* 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);

};