码迷,mamicode.com
首页 > Web开发 > 详细

封装一个Ajax工具函数

时间:2016-07-29 21:07:59      阅读:375      评论:0      收藏:0      [点我收藏+]

标签:

/*封装一个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);

};

 

/*封装一个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);};

 

封装一个Ajax工具函数

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!