note: 使用prototype中的ajax (1)
使用prototype中的ajax
一、prototype 中的ajax调用部分分析
author: fallseir fallseir [at] gmail.com
tags:prototype,ajax,参考
Ajax
getTransport() 获取一个基本的Request对象
自动从 XMLHttpRequest Msxml2.XMLHTTP Microsoft.XMLHTTP 中选择,如果创建失败则返回false
activeRequestCount 当前的活动reqeust数量 默认为0
Ajax.Responders 全局
responders[] responder列表
_each() 对每一个 responder 执行指定的操作
register() 注册一个 responder
unregister() 注销一个 responder
dispatch() 触发每个 responder 中指定的callback动作
继承了 Enumerable 的操作
添加默认处理 onCreate 和 onComplete 对 Ajax.activeRequestCount 进行增减操作
Ajax.Base 基本ajax类
setOptions 设置Ajax选项
使用指定的参数值覆盖默认值，每次设置会重新初始化而不会保留原有值
responseIsSuccess() 判断transport的执行状态是否为 2xx
responseIsFailure() 返回transport执行是否成功 !responseIsSuccess()
Ajax.Request 远程请求
Ajax.Request.Events[] 事件表 = ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete']
继承 Ajax.Base
initialize() 初始化
初始化一个 transport 通过 Ajax.getTransport()
设定 options 通过 指定的 options
通过 request 请求指定的 url
request() 请求远程地址
从 options 中获取参数
options.parameters 参数表
用于发送到请求的url中 使用 xx=xx&xx=xx格式
options.method 请求方式
post | get 当使用其他方式时 请求采用post形式 并将 method 以 _method=method形式追加到parameters上。
options.asynchronous 指定是否使用异步方式请求
触发 onCreate 事件 Ajax.Responders.dispatch('onCreate', this, this.transport);
打开远程请求连接 this.transport.open(this.options.method, this.url,this.options.asynchronous);
设置异步请求的定时回调处理 setTimeout(function() { this.respondToReadyState(1) }.bind(this), 10);
设置transport的状态回调处理 this.transport.onreadystatechange = this.onStateChange.bind(this);
设置请求头信息 this.setRequestHeaders();
发送请求 this.transport.send(this.options.method == 'post' ? body : null);
body 如果 options.postBody 存在就使用 options 中的设置 否则使用 parameters 的值
更新状态 this.onStateChange(); 如果使用非同步方式或overrideMimeType形式的请求
处理过程中如果发生异常将导致 this.dispatchException(e)
setRequestHeaders() 设置 http 请求头信息
如果 options.method 为 post 则通过 options.contentType 设置请求的 Content-type
如果 overrideMimeType 存在则设置 Connection 为 close
使用 options.requestHeaders 中的值覆盖默认值
设置 transport 的头信息 this.transport.setRequestHeader(requestHeaders[i], requestHeaders[i+1]);
onStateChange() 更新 Reqeust 状态
当 transport.readyState 不为 1 (loading) 时，触发状态更新动作 this.respondToReadyState(this.transport.readyState)
header() 从 transport 的 response 中获取指定的 header 项的值
evalJSON() 使用 eval 执行( this.header('X-JSON') )中包含的 javascript 字面形式数据
evalResponse() 使用 eval 执行 response 中包含的 javascript 字面形式数据
出错时触发 dispatchException
respondToReadyState() 处理请求状态
获取状态值对应的状态名
设置 json为 this.evalJSON()
如果当前状态为 Complete 则根据优先顺序选择处理方式
如果 options中包含 'on' + this.transport.status 命名的回调函数
或 'on' + (this.responseIsSuccess() ? 'Success' : 'Failure' 命名的回调函数
则尝试执行回调
如果 response 的 content-type 为javascript 则执行返回的内容
if((this.header('Content-type') || '').match(/^text\/javascript/i)) this.evalResponse();
如果 options 中包含对应的 'on'+event 回调函数 则进行回调
触发全局的Responders 事件 Ajax.Responders.dispatch('on' + event, this, transport, json);
如果当前状态为 Complete 则 清空 transport 的状态回调函数
dispatchException() 处理异常
调用 options 中的异常处理函数 如果存在的话 (this.options.onException || Prototype.emptyFunction)(this, exception);
触发异常处理事件 Ajax.Responders.dispatch('onException', this, exception);
Ajax.Updater 自动更新处理
继承 Request
initialize() 初始化
建立回显区域 containers{success,failure}
container|container.success[,container.failure]
如果指定的container包含success 则设置success为container.success指定的htmldom元素
如果指定的container包含container.failure 则设置 failure
创建 transport
设置请求选项 setOptions
重置完成时的回调 onComplete
增加 updateContent
开始请求 request
updateContent() 更新回显区域
根据状态设定回显区域 receiver
获取回显内容 response
清除response中的js脚本,如果选项中没有设定执行js options.evalScripts
更新内容
如果选项中指定了回显操作options.insertion 则调用指定的回显操作进行回显
否则使用默认方式更新回显区域 Element.update(receiver, response);
如果 responseIsSuccess 设定延时执行 onComplete
Ajax.PeriodicalUpdater
继承 Ajax.Base
initialize() 初始化
设置参数 setOptions
设置请求回调 onComplete=options.onComplete
设置循环周期 frequency
设置衰减 decay
初始化 updater
设置 container
设置 url
开始进行处理 start
start() 开始处理
重置回调处理 options.onComplete = updateComplete
触发计时器事件 onTimerEvent
stop() 停止循环处理
清除 updater 的回调函数 this.updater.options.onComplete = undefined;
清除计时器 clearTimeout(this.timer);
回调 onComplete (this.onComplete || Prototype.emptyFunction).apply(this, arguments);
updateComplete() 重置请求
当updater完成一次请求时，自动回调此函数
根据返回的内容是否存在设定本次的衰减值 decay
设定lastText
重新设定定时器 onTimerEvent
onTimerEvent() 创建 updater
创建updater并执行一次远程请求
参考:
最新prototype.js下载
prototype 类图
prototype.js开发笔记
Developer Notes for prototype.js
js加油站：prototype 源码解读（一）
