javascript原生框架(八)--ajax异步请求和jsonp跨域

Ajax请求流程

1. 创建一个请求对象

2. 格式化数据

   • 将格式化后的数据，参数与值都要重新编码

3. 与服务器建立连接

4. 监听请求状态

5. 发送请求

Jsonp请求

1. 跨域 只能发送 GET请求。一种不安全的请求方式。

2. 原理：由于dom元素的 src属性 具有跨域功能。在实现跨域请求时，为了方便就使用script标签来做。

3. 流程

   • 创建请求对象，就是 创建一个script标签
   • 将上述创建的script标签添加到页面的head标签下
   • 格式化数据
   • 创建全局回调函数
   • 设置超时时间，如果超过此时间，也没有得到数据，表示请求失败。否则，请求成功。
   • 删除
   • 发送请求：指定script标签的src属性值。

代码

//ajax 模块
    moyas.extend({
        ajaxSetting: {
            url: '',
            type: 'GET',
            dataType: 'text',
            contentType: 'application/x-www-form-urlencoded',
            jsonp: 'callback',
            jsonpCallback: '',
            data: null,
            async: true,
            success: null,
            fail: null,
            timeout: 0
        },
        ajax: function(config) {
            //过滤无效的参数
            if (!config || !config.url) {
                console.warn("参数异常");
                return;
            }

            if (config.dataType.toLowerCase() === 'jsonp') {
                jsonp(config);
            } else {
                ajax(config);
            }
        }

    });

    function jsonp(config) {
        var scriptElem,
            headElem,
            context = {},
            callbackName;

        //过滤无效的参数
        if (!config || !config.url) {
            console.warn('参数异常');
            return;
        };

        moyas.extend(moyas.ajaxSetting, context);
        moyas.extend(config, context);

        //1 创建对象
        scriptElem = document.createElement('script');

        //2 将创建的script标签添加到页面的head下
        headElem = document.getElementsByTagName('head')[0];
        headElem.appendChild(scriptElem);

        //3 格式化数据
        context.url += '?' + formatData(context.data);

        //4 创建全局回调函数的名字
        callbackName = context.jsonpCallback ? context.jsonpCallback :
            'jsonp_' + (+new Date);

        //把全局回调函数的名字发给服务器
        context.url += '&' + context.jsonp + '=' + callbackName;

        window[callbackName] = function(data) {
            //请求成功
            //删除动态创建的script 标签
            headElem.removeChild(scriptElem);
            //删除全局回调函数
            delete window[callbackName];
            //清除超时的延迟函数
            window.clearTimeout(scriptElem.timer);
            //执行用户指定的成功的回调函数
            context.success && context.success(data);
        };

        //设置超时时间
        if (context.timeout) {
            scriptElem.timer = window.setTimeout(function() {
                //请求失败
                //删除动态创建的script标签
                headElem.removeChild(scriptElem);
                //删除全局回调函数
                delete window[callbackName];
                //执行用户指定的失败的回调函数
                context.fail && context.fail({
                    'message': '请求超时'
                });
            }, context.timeout);
        }

        //发送请求
        scriptElem.src = context.url;
    }



    function createRequest() {
        return window.XMLHttpRequest ? new window.XMLHttpRequest() :
            new ActiveXObject('Microsoft.XMLHTTP');
    }

    function formatData(data) {
        var ret = [];
        for (var k in data) {
            ret.push(window.encodeURIComponent(k) + '=' + window.encodeURIComponent(data[k]));
        }

        //如果不想从服务器缓存中读取数据
        ret.push(('_=' + Math.random()).replace('.', ''));
        return ret.join('&');
    }

    function ajax(config) {
        var context = {},
            xhr,
            postData = '';
        //过滤无效的参数
        if (!config || !config.url) {
            consloe.warn('参数异常');
            return;
        }

        //获取默认配置信息
        moyas.extend(moyas.ajaxSetting, context);
        //用户配置信息 覆盖默认配置
        moyas.extend(config, context);

        //1 创建请求对象
        xhr = createRequest();
        //2 格式话数据
        if (context.data) {
            postData = formatData(context.data);
        }
        //3 与服务器建立链接
        if (context.type.toUpperCase() === 'GET') {
            xhr.open('GET', context.url + '?' + postData, context.async);
            postData = null;
        } else {
            //模拟表单提交 设置请求头信息
            xhr.setRequestHeader('content-Type', context.contentType);
            xhr.open('OPST', context.url, contex.async);
        }

        //监听请求状态
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                    //获取到请求回来的数据
                    var text = xhr.responseText;
                    //如果指定的数据格式为 json 那么就将其转换成json 对象
                    text = context.dataType.toLowerCase() === 'json'?JSON.parse(text) : text;

                    context.success && context.success(text);
                } else {
                    context.fail && context.fail({
                        "errorCode": xhr.status,
                        "massage": "请求超时"
                    });
                }
            }
        };
        //发送请求
        xhr.send(postData);
    }

最后

jQuery框架就介绍到这里了

前面封装的整体代码:

github 地址:https://github.com/moyas/Tutorial/tree/master/my-jQuery

点击链接