非常适合新手的jq/zepto源码分析07---ajax的封装

复习下ajax吧！

　1.创建XMLHttpRequest对象

xmlhttp=new XMLHttpRequest();

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //ie7以下

xmlhttp.open("GET","test1.txt",true);   参数 method,url,async()

xmlhttp.send();

xmlhttp.setRequestHeader(name,value);
Accept: 浏览器能够处理的内容类型。
Accept-Charset: 浏览器能显示的字符集。
Accept-Language: 浏览器当前设置的语言。
Connection: 浏览器与服务器之间连接的类型
Cookie: 当前页面设置的任何Cookie.
Host: 发出请求的页面所在的域。
Referer: 发出请求的页面的URI
User-Agent: 浏览器的用户代理字符串。
Content-type：请求数据类型
Cache-Control ：指定请求响应的缓存机制
Content-Length：内容长度
Date：发送请求时间
等

xmlhttp.onreadystatechange  状态改变出发该函数

xmlhttp.readyState 　　状态
0 ： 请求未初始化
1 ： 服务器连接已建立
2 ： 请求已接收
3 ： 请求处理中
4 ： 请求已完成

xmlhttp.status
2xx ： 成功
3xx ： 转向或者缓存
4xx ： 未找到页面等
5xx ： 服务器报错

        $.ajaxSettings = {
            // 默认请求类型
            type: 'GET',
            // 请求执行前的回调函数
            beforeSend: empty,
            // 执行成功后的回调函数
            success: empty,
            // 服务器返回错误的回调函数
            error: empty,
            // 请求完成的回调函数
            complete: empty,
            // 回调函数的上下文
            context: null,
            // 是否绑定一个全局事件
            global: true,
            // Transport
            xhr: function () {
                return new window.XMLHttpRequest()
            },
            // 接受的类型
            accepts: {
                script: 'text/javascript, application/javascript, application/x-javascript',
                json:   jsonType,
                xml:    'application/xml, text/xml',
                html:   htmlType,
                text:   'text/plain'
            },
            // 是否是跨域
            crossDomain: false,
            // 请求超时时间
            timeout: 0,
            // 是否序列化
            processData: true,
            // 是否缓存
            cache: true,
            dataFilter: empty
        }

　　

        $.ajax = function(options){
            var settings = $.extend({}, options || {}),
                deferred = $.Deferred && $.Deferred(),   //检查是有延时函数，有则创建一个
                urlAnchor, hashIndex
　　　　　　　　//设置默认参数
            for (key in $.ajaxSettings) if (settings[key] === undefined) settings[key] = $.ajaxSettings[key]
　　　　　　　　//创建Event对象，初始化ajaxStart事件，并且执行该事件
            ajaxStart(settings)
　　　　　　　　//检查是否跨域
            if (!settings.crossDomain) {
                urlAnchor = document.createElement('a')
                urlAnchor.href = settings.url
                // cleans up URL for .href (IE only), see https://github.com/madrobby/zepto/pull/1049
                urlAnchor.href = urlAnchor.href
                settings.crossDomain = (originAnchor.protocol + '//' + originAnchor.host) !== (urlAnchor.protocol + '//' + urlAnchor.host)
            }

            if (!settings.url) settings.url = window.location.toString()  //如果不存在url，直接提交到当前路径
            if ((hashIndex = settings.url.indexOf('#')) > -1) settings.url = settings.url.slice(0, hashIndex)  //去掉hash  #后面的hash
　　　　      //序列化数据，如果是get/jsonp，直接把数据绑定在url上面
            serializeData(settings)

            var dataType = settings.dataType, hasPlaceholder = /\?.+=\?/.test(settings.url)  //  查看url是否有 callback定义  如果定义了，就设置为jsonp请求
            if (hasPlaceholder) dataType = 'jsonp'
　　　　　　　　//如果不缓存，就在后面添加当前请求时间，每次请求不同就不会缓存
            if (settings.cache === false || (
                    (!options || options.cache !== true) &&
                    ('script' == dataType || 'jsonp' == dataType)
                ))
                settings.url = appendQuery(settings.url, '_=' + Date.now())
　　　　　　　　//如果是jsonp，则url后面添加 &callback=?
            if ('jsonp' == dataType) {
                if (!hasPlaceholder)
                    settings.url = appendQuery(settings.url,
                        settings.jsonp ? (settings.jsonp + '=?') : settings.jsonp === false ? '' : 'callback=?')
                return $.ajaxJSONP(settings, deferred)
            }

            var mime = settings.accepts[dataType],  //获取接收的数据类型
                headers = { },
                setHeader = function(name, value) { headers[name.toLowerCase()] = [name, value] },
                protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol, //得到url协议或者当前协议
                xhr = settings.xhr(), //获得xmlthttprequest对象
                nativeSetHeader = xhr.setRequestHeader, //获取设置 头部信息的方法
                abortTimeout

            if (deferred) deferred.promise(xhr)  //设置延时器

            if (!settings.crossDomain) setHeader('X-Requested-With', 'XMLHttpRequest')  //设置当前请求为ajax 异步请求
            setHeader('Accept', mime || '*/*')  //设置可接收的数据类型
            if (mime = settings.mimeType || mime) {
                if (mime.indexOf(',') > -1) mime = mime.split(',', 2)[0]
                xhr.overrideMimeType && xhr.overrideMimeType(mime)   //设置可接收的类型
            }
            if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() != 'GET'))
　　　　　　　　　　//设置提交数据的方式
　　　　　　　　　　//application/x-www-form-urlencode   将提交的数据进行urlencode   （form表单提交的默认方式）    ?name=value1&name2=value2
　　　　　　　　　　//multipart/form-data      数据每一条都用  boundary 分割符隔开    (form传输file文件时候 一般用这个)  
　　　　　　　　　　//application/json　　　　直接提交json
                setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded')  //设置提交方式

            if (settings.headers) for (name in settings.headers) setHeader(name, settings.headers[name]) //设置头部信息
            xhr.setRequestHeader = setHeader
　　　　　　　　//监听 readyState 改变的函数
            xhr.onreadystatechange = function(){
　　　　　　　　　　// 当readyState 为4 时候请求完成
                if (xhr.readyState == 4) {
                    //清除该监听
                    xhr.onreadystatechange = empty
                    clearTimeout(abortTimeout)  //清除超出时间的 定时器
                    var result, error = false
　　　　　　　　　　　　//200-300  成功
　　　　　　　　　　　　//304  检查响应的last-modified 和 if-modified-since  如果相等  直接用本地缓存的数据
　　　　　　　　　　　　//
                    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 || (xhr.status == 0 && protocol == 'file:')) {
                        dataType = dataType || mimeToDataType(settings.mimeType || xhr.getResponseHeader('content-type'))
　　　　　　　　　　　　　　//接受的数据类型  script/xml/json
                        if (xhr.responseType == 'arraybuffer' || xhr.responseType == 'blob') //二进制数据
                            result = xhr.response
                        else {
                            result = xhr.responseText  //文本数据

                            try {
                                // 这里是要用 setting 配置里面的 dataFilter和content 来处理数据
                                result = ajaxDataFilter(result, dataType, settings)
                                if (dataType == 'script')    (1,eval)(result)   // (1,eval) 兼容低版本IE  其实就是eval
                                else if (dataType == 'xml')  result = xhr.responseXML    //如果是xml 直接返回xml
                                else if (dataType == 'json') result = blankRE.test(result) ? null : $.parseJSON(result)  //非空的话  直接解析result
                            } catch (e) { error = e }

                            if (error) return ajaxError(error, 'parsererror', xhr, settings, deferred)   //错误，调用setting里面error
                        }

                        ajaxSuccess(result, xhr, settings, deferred)  //调用成功函数
                    } else {
                        ajaxError(xhr.statusText || null, xhr.status ? 'error' : 'abort', xhr, settings, deferred)  //错误，调用setting里面的error
                    }
                }
            }
　　　　　　　　//如果在 setting 的before函数中 返回false 直接返回，断开请求
            if (ajaxBeforeSend(xhr, settings) === false) {
                xhr.abort()
                ajaxError(null, 'abort', xhr, settings, deferred)
                return xhr
            }

            var async = 'async' in settings ? settings.async : true
　　　　　　　　//创建一个请求
            xhr.open(settings.type, settings.url, async, settings.username, settings.password)
　　　　　　　　//添加请求字段信息
            if (settings.xhrFields) for (name in settings.xhrFields) xhr[name] = settings.xhrFields[name]
　　　　　　　　//nativeSetHeader 设置头部信息  xhr.setRequestHeader(name,value)
            for (name in headers) nativeSetHeader.apply(xhr, headers[name]) //headers[name] ->[name,value]
　　　　　　　　// 超时后执行
            if (settings.timeout > 0) abortTimeout = setTimeout(function(){
                xhr.onreadystatechange = empty
                xhr.abort()
                ajaxError(null, 'timeout', xhr, settings, deferred)
            }, settings.timeout)

            // 发送数据返回，当前xmlHttpRequrest对象
            xhr.send(settings.data ? settings.data : null)
            return xhr
        }

　　

这个是主要的对象ajax的封装。

代码仅供参考，具体功能可以自己扩展。

http://www.cnblogs.com/jiebba/p/6529854.html

http://www.cnblogs.com/jiebba    我的博客，来看吧！

如果有错误，请留言修改下 哦！