jquery 中AJAX的實現

1.通過ajax傳輸boolean型到服務器時會變成字符串型，如：

//客戶端
false
//服務器
"false"

2.ajax的baseHeaders

  ajax插件中的baseHeaders對象的是http請求頭部的信息

    var mime = settings.accepts[dataType],   //希望服務器返回的數據類型。
        baseHeaders = { },       
        protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol,
        xhr = $.ajaxSettings.xhr(), abortTimeout
    if (!settings.crossDomain) 
        //x-requested-with為XMLHttpRequest是Ajax異步請求方式。
        //為null，是同步請求方式。
        baseHeaders['X-Requested-With'] = 'XMLHttpRequest'
    if (mime) {
      baseHeaders['Accept'] = mime
      if (mime.indexOf(',') > -1) mime = mime.split(',', 2)[0]
      //重寫服務器響應的MIME類型,以欺騙瀏覽器避免瀏覽器格式化服務器返回的數據。
      //如果dataType = "json",那么請求頭：Accept:application/json,指示服務器我接受json數據
　　　　xhr.overrideMimeType && xhr.overrideMimeType(mime)
    }
     // 有contentType，只對Post請求有效。
    if (settings.contentType || (settings.data && settings.type.toUpperCase() != 'GET'))
      //為post請求，Content-Type為application/x-www-form-urlencoded
      baseHeaders['Content-Type'] = (settings.contentType || 'application/x-www-form-urlencoded')
      settings.headers = $.extend(baseHeaders, settings.headers || {})
    for (name in settings.headers)
      //設置http請求頭部信息 
      xhr.setRequestHeader(name, settings.headers[name])

來看看例子：

var dataType = dataType ? dataType : 'json';
$.ajax({
    type: 'post',
    url: config.URL,
    data: JSON.stringify(params),
    dataType: dataType,
    success: function(data) {
        callback(data);
    },
    error: function(data) {
        errCallback(data);
    }
});

http請求頭部：

3.ajax的事件

ajax的事件是根據ajax的過程和狀態來注冊的。

過程或者狀態	函數名	參數
請求發送前	ajaxBeforeSend	xhr, settings
請求開始	ajaxStart	settings
請求終止	ajaxStop	settings
請求成功	ajaxSuccess	data, xhr, settings
請求出錯	ajaxError	error, type, xhr, settings
請求完成	ajaxComplete	status, xhr, settings

 所以事件的參數都含有： settings，下面列出各個參數的含義：

 xhr:XMLHttpRequest對象。

 data: ajax請求中的data對象，即請求body中的數據。

 error:有兩種情況，一是在請求成功，解析獲得的數據，與dataType類型不一致而報錯，其他的error都是null。

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 || (xhr.status == 0 && protocol == 'file:')) {
    dataType = dataType || mimeToDataType(xhr.getResponseHeader('content-type'))
    result = xhr.responseText
    //解析返回的數據格式
    try {
         if (dataType == 'script')    (1,eval)(result)
         else if (dataType == 'xml')  result = xhr.responseXML
         else if (dataType == 'json') result = blankRE.test(result) ? null : JSON.parse(result)
    } catch (e) { error = e }
        if (error) ajaxError(error, 'parsererror', xhr, settings)
        else ajaxSuccess(result, xhr, settings)
    } else {
        ajaxError(null, 'error', xhr, settings)
    }

type:出錯的類型，"timeout", "error", "abort", "parsererror"，四種情況的一種。

status: 請求完成的狀態。  "success", "notmodified", "error", "timeout", "abort", "parsererror"，六種請求中的一種，

           這就表示ajaxComplete有六種情況可以觸發，其實在代碼中我只看到了四種，和type一樣的四種狀態。

每個事件都要觸發triggerGlobal事件，也就是要觸發triggerAndReturn事件。

  // trigger an Ajax "global" event
  function triggerGlobal(settings, context, eventName, data) {
    //默認為true
    if (settings.global) 
        return triggerAndReturn(context || document, eventName, data)
  }

  // trigger a custom event and return false if it was cancelled
  function triggerAndReturn(context, eventName, data) {
    var event = $.Event(eventName) $(context).trigger(event, data)
 //非默認事件 return !event.defaultPrevented }

4.ajax的jsonp

通過script標簽來發起URL請求，實現跨域。可以在$.ajax中設置jsonp請求，也可以直接調用$.ajaxJSONP,

$.ajaxJSONP = function(options){
    var callbackName = 'jsonp' + (++jsonpID),
      script = document.createElement('script'),
      abort = function(){
        $(script).remove()
        if (callbackName in window) window[callbackName] = empty
        ajaxComplete('abort', xhr, options)
      },
      xhr = { abort: abort }, abortTimeout
    //監聽srcipt請求,如果出錯了，執行onerror。
    if (options.error) script.onerror = function() {
      xhr.abort()
      options.error()
    }
    //定義請求成功，服務器需要設置返回的數據中執行callback函數。
    window[callbackName] = function(data){
      clearTimeout(abortTimeout)
      $(script).remove()
      delete window[callbackName]
      ajaxSuccess(data, xhr, options)
    }
    //通過data拼湊一個URL，該URL最后的情況是：?callbackName=jsonp1或者?callbackName=jsonp2....
    serializeData(options)
    script.src = options.url.replace(/=\?/, '=' + callbackName)
    //該URL通過script標簽放入html。
    $('head').append(script)
    //請求超時
    if (options.timeout > 0) abortTimeout = setTimeout(function(){
        xhr.abort()
        ajaxComplete('timeout', xhr, options)
      }, options.timeout)

    return xhr
  }