全回顾扫盲之封装ajax

附加的一些理解和解释,源码在下面

  • 首先要明确,ajax通讯用的是XMLHttpRequest对象(兼容ie的window.ActiveXObject('Microsoft.XMLHTTP')),必须要有的参数是请求地址与请求方式,可以附加的参数是,请求参数对象以及成功和失败后的回调。其他更多的参数是不需要的 ,所以我的extend方法是以遍历的opt对象,根据opt对象的key值判断是否有需要覆盖的新参数。其中判断参数是否存在我用的是 (args[item] !== undefined) 而不是简单的(opts[item]) 是因为,如果 传入的参数对应值是0或者'0',同样会转成false来做判断,这样就会出现问题。
  • 我设置了对url的判断,(typeof opt.url === 'string' && opt.url),因为url只能是字符串,如果误传如对象,就没必要往下走了。
  • var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP'),这是对低版本ie的兼容性处理,后面这个单词好难记,太长了,尤其是还要传进去一个字符串Microsoft.XMLHTTP
  • 如果是get或者post的时候,分别走传不同的格式的参数,其中get方式下,下面这段代码我得考虑是,首先要判断url中是否已经存在'?',如果已存在我就认为之前是已经有参数了,所以加一个'&',如果不存在,那我要在 最前面加一个'?'声明后面是参数部分。
  • opt.success.call(xhr, res),通过call()方法,继承构造函数的内容,执行回调。
url += (url.indexOf('?') > -1) ? '&' : '?'
url += dataArr.join('&')

以下是源码

    Ajax({
    aa:'123',
    url: 'http://mazhaoyang.cn/index.php/Home/Output/RedpocketAjaxList.html?userid=null',
    data: {
        name: '小明',
        age: '27'
    }
})
function Ajax(options) {
    var opt = {
        url: '',
        type: 'get',
        data: {},
        success: function () {},
        error: function () {}
    }
    extend(opt, options)
    if (typeof opt.url === 'string' && opt.url) {
        var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP')
        var data = opt.data,
            url = opt.url,
            type = opt.type.toUpperCase(),
            dataArr = [];
        for (item in data) {
            dataArr.push(item + '=' + data[item])
        }
        if (type === 'GET') {
            url += (url.indexOf('?') > -1) ? '&' : '?'
            url += dataArr.join('&')
            console.log(url)
            xhr.open(type, url.replace(/\?$/g, ''), true )
            xhr.send()
        }
        if (type === 'POST') {
            xhr.open(type, url, true)
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
            xhr.send(dataArr.join('&'))
        }
        xhr.onload = function () {
            if (xhr.status === 200 || xhr.status === 304) {
                var res;
                if (opt.success instanceof  Function) {
                    res = xhr.responseText
                    if (typeof res === 'string') {
                        res = JSON.parse(res)
                        opt.success.call(xhr, res)
                    }
                }
            } else {
                if (opt.error instanceof  Function) {
                    opt.error.call(xhr, res)
                }
            }
        }
    }
}

util.extend = function (opt, args) {
    for (var item in opt) {
        if (args[item] !== undefined) {
            opt[item] = args[item]
        }
    }
}

随机浏览