封装一个Ajax工具函数

/*封装一个ajax工具函数*/

window.$ = {};

/*通过$定义一个ajax函数*/

/*

* 1. type   string   请求的方式  默认是get

* 2. url    string   请求地址  接口地址

* 3. async  boolean  默认的是true

* 4. data   object   {}请求数据

*

* 5.success function  成功回调函数

* 6.error   function  失败的回调函数

* */

$.ajax = function(options){

    if(!options) return false;

    /*options 参数传递*/

    var type = options.type || 'get';

    var url = options.url || location.pathname;

    var async = options.async === false ? false : true;

    var data = options.data || {};

    /*data 选要转化成  name=xjj&age=10*/

    var dataStr = '';

    for(var key in data){

        //console.log(data[key]);

        dataStr += key+'='+data[key]+'&';

    }

    /*如果就数据  就裁剪掉最后一个&*/

    dataStr = dataStr && dataStr.slice(0,-1);

    /*ajax 编程*/

    /*初始化*/

    var xhr = new XMLHttpRequest();

    /*请求行*/

    /*如果是get请求那么就要拼接数据在url后面 ?*/

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

    /*请求头*/

    /*如果是post请求需要设置 content-type application/x-www-form-urlencoded*/

    if(type == 'post'){

        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    }

    options.beforeSend && options.beforeSend();

    /*请求主体*/

    /*如果是post请求需要把数据字符传过去  否则是null*/

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

    /*监听响应状态的改变*/

    xhr.onreadystatechange = function(){

        /*响应成功*/

        if(xhr.readyState == 4){

            if( xhr.status == 200){

                /*处理响应成功函数*/

                var result = '';

                /*接受数据*/

                /* json  xml  string*/

                var contentType = xhr.getResponseHeader('Content-Type');

                if(contentType.indexOf('xml') > -1){

                    /*服务端返回的是xml数据格式*/

                    result = xhr.responseXML;

                }else if(contentType.indexOf('json') > -1){

                    /*服务端返回的是json数据格式*/

                    /*json字符串*/

                    var str  = xhr.responseText;

                    result = JSON.parse(str);

                }else{

                    result = xhr.responseText;

                }

                /*调用回调函数*/

                options.success && options.success(result);

            }

            /*响应失败*/

            else{

                /*处理响应失败函数*/

                options.error && options.error('request fail code' + xhr.status);

            }

            options.complete &&  options.complete();

        }

    }

};

$.get = function(options){

    options.type = 'get';

    $.ajax(options);

};

$.post = function(options){

    options.type = 'post';

    $.ajax(options);

};

原文地址:https://www.cnblogs.com/landofpromise/p/5719513.html