zepto.js之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)
    }
    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
    //请求出错了
    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
  }