前端开发 js原生Ajax实现

前端开发需要学五大框架吗 webapp开发前端框架 常见前端开发框架、类库

ajax原生方法,支持jsonp;

使用于jquery的$.ajax基本一致!

javascript 代码片段

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(‘content-type’, ‘application/x-www-form-urlencoded’)
            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
                    if (options.dataType == ‘json’) {
                        try {
                            data = JSON.parse(data)
                        } catch (e) {
                            data = eval(‘(‘ + data + ‘)’)
                        }
                    }
                    options.success(data)
                } else {
                    options.error()
                }
                options.complete()
            }
        }
    }
}

前端微信开发框架 前端开发框架 app开发前端框架

» 本文来自:前端开发者 » 《前端开发 js原生Ajax实现》
» 本文链接地址:https://www.rokub.com/5498.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!