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
}