zoukankan      html  css  js  c++  java
  • 原生ajax

    function ajax(params) {
        params = params || {};
        if (!params.url) {
            throw new Error('Necessary parameters are missing.'); //必要参数未填
        }
        var options = {
            url: params.url || '',
            type: (params.type || 'GET').toUpperCase(),
            timeout: params.timeout || 5000,
            async: true,
            complete: params.complete || function() {},
            error: params.error || function() {},
            success: params.success || function() {},
            dataType: params.dataType || 'json',
            data: params.data || {},
            jsonp: 'callback',
            jsonpCallback: ('jsonp_' + Math.random()).replace('.', '')
        };
        var formatParams = function(json) {
            var arr = [];
            for (var i in json) {
                arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(json[i]));
            }
            return arr.join("&");
        };
        if (options.dataType == 'jsonp') {
            //插入动态脚本及回调函数
            var $head = document.getElementsByTagName('head')[0];
            var $script = document.createElement('script');
            $head.appendChild($script);
            window[options.jsonpCallback] = function(json) {
                $head.removeChild($script);
                window[options.jsonpCallback] = null;
                hander && clearTimeout(hander);
                options.success(json);
                options.complete();
            };
            //发送请求
            options.data[options.jsonp] = options.jsonpCallback;
            $script.src = options.url + '?' + formatParams(options.data);
            //超时处理
            var hander = setTimeout(function() {
                $head.removeChild($script);
                window[options.jsonpCallback] = null;
                options.error();
                options.complete();
            }, options.timeout);
        } else {
            //创建xhr对象
            var xhr = new(self.XMLHttpRequest || ActiveXObject)("Microsoft.XMLHTTP");
            if (!xhr) {
                return false;
            }
            //发送请求
            options.data = formatParams(options.data);
            if (options.type == 'POST') {
                xhr.open(options.type, options.url, options.async);
                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                xhr.send(options.data);
            } else {
                xhr.open(options.type, options.url + '?' + options.data, options.async);
                xhr.send(null);
            }
            //超时处理
            var requestDone = false;
            setTimeout(function() {
                requestDone = true;
                if (xhr.readyState != 4) {
                    xhr.abort();
                }
            }, options.timeout);
            //状态处理
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && !requestDone) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        var data = options.dataType == "xml" ? xhr.responseXML : xhr.responseText;
                        console.log(data)
                        if (options.dataType == "json") {
                            try {
                                data = JSON.parse(data);
                            } catch (e) {
                                data = eval('(' + data + ')');
                            }
                        }
                        options.success(data);
                    } else {
                        options.error();
                    }
                    options.complete();
                }
            };
        }
    }

    技术交流QQ群:15129679

  • 相关阅读:
    Siri
    ArcSDE和Geodatabase10.1抢先版谍照介绍(3)——ArcToolbox工具和其他功能
    ‘马太’效应
    Linux琐屑下Resin JSP MySQL的布置和设置配备陈设2
    平安防御:分级防御对Linux服务器的攻击
    Linux无法解析域名的处理活动
    Ubuntu Linux Server的用户僻静后果分析
    大概要领确保确保Linux体系中SSH的安适性
    无错版Vsftpd Mysql Pam设置虚拟用户要领
    Redhat Linux AS4下的LAMP与Discuz装置1
  • 原文地址:https://www.cnblogs.com/yeminglong/p/6066354.html
Copyright © 2011-2022 走看看