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

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的封装。