原生js封装Ajax

  【转载请注明出处】


  1 /**
* @fileoverview ajax请求公用组件
* @author Limo
* @date 2015/08/07
* Native package ajax method, make it like the ajax of zepto Lib.
*/
var querystring = require('querystring');
function ajax( opts ) {
    // 创建ajax对象
    var xhr = null,
    abortTimeout = null,
    empty =function(){},
    ajax_url = "",
    opts = {
        type : ( opts.type && opts.type.toUpperCase() ) || 'GET',
        url : opts.url || "",
        data : opts.data || "", //query
        dataType : opts.dataType || 'json',
        success : opts.success || empty,
        error : opts.error || empty,
        timeout : opts.timeout || 30000 //默认超时时间：30S ，与产品交互保持一致
    };

    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }

    opts.data = querystring.stringify( opts.data );

    if (opts.type == 'GET') {
        if(opts.url.indexOf("?")>-1){
            if( opts.data =="" ){
                ajax_url = opts.url;
            } else {
                ajax_url = opts.url + '&' + opts.data; 
            }
        } else {
            ajax_url = opts.url + '?' + opts.data;
        }
        xhr.open('GET', ajax_url , true);
 41         xhr.send();

    } else if (opts.type == 'POST') {
        xhr.open('POST', opts.url, true);
        // 如果需要像 html 表单那样 POST 数据，请使用 setRequestHeader() 来添加 http 头。
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send( opts.data );
    }

    // 处理返回数据
 51     xhr.onreadystatechange = function () {
    /*
    ** 每当readyState改变时，就会触发onreadystatechange事件
 54     ** readyState属性存储有XMLHttpRequest的状态信息
    ** 0 ：请求未初始化
    ** 1 ：服务器连接已建立
    ** 2 ：请求已接受
    ** 3 : 请求处理中
    ** 4 ：请求已完成，且相应就绪
    */
        if (xhr.readyState == 4) {
            var res,
                error;
            xhr.onreadystatechange = empty;
            clearTimeout( abortTimeout );
            // console.log( "xhr.status: " , xhr.status );
            /*
            ** Http状态码
            ** 1xx ：信息展示
            ** 2xx ：成功
            ** 3xx ：重定向
 72             ** 4xx : 客户端错误
 73             ** 5xx ：服务器端错误
            */
            // var protocol = /^([\w-]+:)\/\//.test(opts.url) ? RegExp.$1 : window.location.protocol;
            // if ( (xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 || (xhr.status == 0 && protocol == 'file:') ) {
            if ( (xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 ) {
                res = xhr.responseText; // xhr.responseText 和 xhr.response 结果相同
                try {
                    // console.info( "snsnav request success" );
                    if( opts.type == 'GET' ){
 82                         if( opts.dataType == "json" ){
 83                             res = JSON.parse( xhr.responseText );
                        } else if ( opts.dataType == 'script' ) {
                            // http://perfectionkills.com/global-eval-what-are-the-options/
                            (1,eval)(res);
                        } else if ( opts.dataType == 'xml' ) {
                            res = xhr.responseXML;
                        }
                    }
                    // else if( opts.type == 'POST' ){
                    // }
                } catch (e) {
                    error = e;
                }
                if( error ){
                    opts.error( error, 'parsererror' , xhr );
                } else {
                    opts.success( res );
                }
            } else {
                // opts.error( xhr.statusText || 'unknown' , xhr.status ? 'error' : 'abort' , xhr );
103                 // xhr.status=0时，相关介绍：http://www.w3.org/TR/XMLHttpRequest/
                // The status attribute must return the result of running these steps:
                // 1、If the state is UNSENT or OPENED, return 0.
                // 2、If the error flag is set, return 0.
                // 3、Return the HTTP status code.
                // var xhr_status = xhr.status || 'unknown';
                opts.error( xhr.statusText || 'unknown' , 'status:'+xhr.status , xhr );
            }
            // console.log( "xhr.statusText: " , xhr.statusText );
        }
    };

    // function ajaxError( error, type, xhr ){ }
    // opts.error( error, 'parsererror',xhr );
    // type: "timeout", "error", "abort", "parsererror"

    if (opts.timeout > 0){ //设置超时时间
        abortTimeout = setTimeout(function(){
            xhr.onreadystatechange = empty;
            //取消当前响应，关闭连接并且结束任何未决的网络活动
            xhr.abort();

            //请求时间 超过前端设置的超时时间
            opts.error('Request.timeout','timeout',xhr);
        }, opts.timeout);
128     }
    return xhr;
}
module.exports = ajax;
/*
//ajax调用方法：
var ajax = require('../../common/util/ajax.js');
ajax({
    url: url,
    dataType: 'json',
    data : {
        'param1' : '111',
        'param2' : '222'
    },
    success: function (result) {
        console.log( "result:" , typeof result );
144         //success callback
    },
    timeout : 30000, //超时时间：30s
    error: function ( error, type, xhr ) {
        console.error( "error:",error, "type:",type, "xhr:",xhr );
        //error callback
    }
});
*/