ajax通用代码封装

概要

ajax通用封装代码的分析
- ajax实现
- ajax请求的缓存问题
- 异步编程模型
- 页面历史记录问题

编写ajax程序的基本过程：

1. 创建XMLHttpRequest对象
2. open,设置各类属性,method，async,url,url param data
3. send,post data
4. success,error,alwarys callback
5. timeout callback

调用示例，获取用户列表

ajax().get('/users').success(function(data){
    console.log(data);
});

通用ajax请求程序写法：

ajax(options) .before(callback(xhr)) .header(name,value) .headers({headers}) .get|post|other(url,[data],[contextType]) .success(callback(returnData,xhr),[jsonForceValidate=false]) .error(callback(statusCode,responseText,xhr)) .always(callback(statusCode,xhr)) .timeout(timeout,[callback(xhr)]) 

演示ajax请求的实现

演示ajax请求的实现：

Window.ajax = function (options){
    var defaultOptions = {
        async: true
    };

    options = extend(defaultOptions,options);

    //核心功能
    var _obj = {
        xhr: createXhr(),successCallbacks:[],errorCallbacks:[],alwaysCallback:[],options:options
    };

    //前置处理方法
    _obj.before = function(callback){
        typeof(callback) === 'function' && callback(_obj.xhr);
        return _obj;//为了支持链式操作，将原对象返回
    };

    //设置请求头
    //header方法在get|post之前执行
    _obj.header = function (name,value){
        _obj.xhr.setRequestHeader(name,value);
        return _obj;
    };

    //设置多个请求头
    _obj.headers = function(headers){
        if(object.prototype.toString.call(headers) === '[object Object'){
            for(var name in headers){
                _obj.xhr.setRequestHeader(name,headers[name]);
            }
        }
        return _obj;
    };

    //成功的回调
    _obj.success = function(callback,jsonForceValidate){
        _obj.jsonForceValidate = jsonForceValidate;

        if(typeof(callback) === 'function'){
            _obj.successCallbacks.push(callback);
        }
        return _obj;
    };

    //失败error的回调
    _obj.error = function(callback,jsonForceValidate){
        _obj.jsonForceValidate = jsonForceValidate;

        if(typeof(callback) === 'function'){
            _obj.errorCallbacks.push(callback);
        }
        return _obj;
    };

    //超时的回调
    _obj.timeout = function(timeout,callback){
        _obj.xhr.timeout = timeout;

        if(typeof(callback) === 'function'){
            _obj.xhr.ontimeout= function(){
                callback(_obj.xhr);
            }
        }
        return _obj;
    };

    //get method发起ajax请求

    // doAjax的操作
    function doAjax(_obj,method,data,contentType){
        var xhr = _obj.xhr;

        data = encodeData(data,contentType);

        if('get' === method){
            url += (url.indexof('?') == -1 ? '?' : '&') + data;
        }

        //绑定事件处理器
        bindEventHandler();

        //open 
        xhr.open(method,_obj.options.async);

        //send
        if('post' === method && data){
            xhr.setRequestHeader('content-Type',_obj.postContentType);
            xhr.send(data);
        }else{
            xhr.send();

        }
    };

    function encodeData(data,contentType){
        if(object.prototype.toString.call(data) === '[object Object]'){
            //json格式的处理
            if('json' === contentType.toLowerCase()
                && typeof(JSON) === 'object'
                && typeof(JSON.stringify)=== 'function'){

                _obj.postContentType = 'application/json';
                return JSON.stringify(data);
            } else{
                //其他情况用urlencode处理
                _obj.postContentType = 'application/x-www-form-urlencoded';
                return encodeParam(data);
            }
        }
    };


    function bindEventHandler(){

    };

    function extend(obj1,obj2){
        if(Object.prototype.toString.call(obj1) === '[object Object'
            && Object.prototype.toString.call(obj2) === '[object Object'){
            for (var pname in obj2){
                obj1[pname] = obj2[pname];
            }
        }
        return obj1;
    };
}

异步编程方法

异步编程方法

1. 异步编程容易犯的错误：搞不清楚回调callback
2. 多次请求仅仅允许最后一次有效
3. 多个异步请求依次执行
4. 多个异步请求同时执行

answer:

2.解决方法：请求放在全局变量中，第二次请求到来时，将第一次的全局变量abort（），后面的开始

3.

ajax().get('/req1',para).success(function(data){
    ajax.get('/req2',data).success(function(data2){
        ajax().get('/req3',data2).success(function(data3){
            //biz use data3
        });
    });
});

1. 并行处理，通过异步计数器完成

页面历史记录功能

页面历史记录功能

（点击浏览器“后退”可以重现数据）
实现此功能的要点：点击后退按钮 需要使url的地址改变，且要保证页面整体不可以刷新
技术：浏览器地址的锚点变化，可以实现url不刷新改变

需要添加window.onload

第二种实现方法：
html5中添加了一个方法是history.pushState可以实现url的无刷新变化

function beforeLoad(e){
        e && console.log(e.state);
        var search = window.location.search;
        if(search){
            search = search.substr(search.lastIndexOf('=') + 1);

        }
        loadData(search);
        btnState(search);
    }

    window.onload = window.onpopstate = beforeLoad;
    function hit(keyword){
        history.pushState({k:keyword},'new title','/cache.html?keyword=' + keyword);
        beforeLoad();
    }