非常適合新手的jq/zepto源碼分析07---ajax的封裝

複習下ajax吧！ 1.創建XMLHttpRequest對象代碼僅供參考，具體功能可以自己擴展。 http://www.cnblogs.com/jiebba/p/6529854.html http://www.cnblogs.com/jiebba 我的博客，來看吧！如果有錯誤，請留言修改下哦！ ...

複習下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 我的博客，來看吧！

如果有錯誤，請留言修改下哦！