Ajax

Ajax是Prototype很耀眼的东西,很多人喜欢他就是因为他封装了Ajax,先给出他的基本用法的一个例子

Ajax 的基本调用格式(Ajax.Request) new Ajax.Request(url[,options])

var oAjax=new Ajax.Request(
    'response.aspx',//需要请求的url
    {
         method:'get',//get 方式提交
         parameters:'i=1&q=2',//提交参数
         onSuccess:successHandler,//异步调用成功则执行successHandler
         onError:function(req){alert("发生错误,HttpStatus:"+req.status);}//调用发生错误执行
    }
);

function successHandler(req)
{
      //req 是请求的xmlHttpRequest对象,req==oAjax
      alert(req.responseText); //也可以为alert(oAjax.responseText)
}

Ajax Opstions Ajax选项

选项 默认 描述
asynchronous true 是否异步
contentType 'application/ x-www-form-urlencoded' 请求类型
encoding 'UTF-8' 编码
method 'post' 提交方式
parameters '' 请求参数
postBody None 类似parameters通常不用
requestHeaders 当前的Header再加上默认的两个头
X-Requested-With:'XMLHttpRequest'.  
X-Prototype-Version
Prototype当前版本 (e.g. 1.5.0).
默认的时候会将当前页面中的header发送,有需要的时候可以自己添加
Header 可以是Object和Array类型
contentType和encoding就是附加在这里

Ajax callback Ajax回调接口

Callback回调接口 描述
onComplete 这些接口都是根据XmlHttpRequest的状态而调用的,自然有些接口是不能保证被调用,详细的信息请读者参阅XmlHttpRequest的相关资料
onException
onFailure
onInteractive
onLoaded
onLoading
onSuccess
onUninitialized
onXYZ XYZ是Http Status
 

Ajax生命周期

1.Created

2.Initialized

3.Request sent

4.Response being received (can occur many times, as packets come in)

5.Response received, request complete

Ajax接口调用顺序

1.onCreate (this is actually a callback reserved to AJAX global responders)

2.onUninitialized (maps on Created)

3.onLoading (maps on Initialized)

4.onLoaded (maps on Request sent)

5.onInteractive (maps on Response being received)

6.onXYZ (numerical response status code), onSuccess or onFailure (see below) (此部分接口不一定调用,要使用的话在onComplete是判断status)

7.onComplete

 

Ajax.Updater:更新部分页面,调用格式 new Ajax.Updater(container,url[,options]) 他在onComplete时$(container).innerHTML=XmlHttpRequest.responseText

AjaxUpdater的options在上述的基础上添加了evalScript和insertion两个属性:

evalScript是bool类型默认为false,意为是否执行返回的字符串中的Javascript,但是他只会执行行如下面的js
var functionName=function (args){...}
而不会执行行如下面的函数
function functionName(args){...}

insertion是类型为Insertion的枚举值,关于Insertion 可以参见Insertion.html

var oAjax=new Ajax.Updater(
    "divId",
    'response.aspx',
    {
         parameters:'s=890',
         insertion:Insertion.Bottom//还可以是Insertion.Top,Insertion.Before,Insertion.After
    }
);

Ajax.PeriodicalUpdater:周期刷新container,调用格式 new Ajax.Updater(container,url[,options])

他的options相对于Ajax.Updater有两个不同 frequency和decay

frequency是刷新频率,默认为2,单位为s,默认为每2s刷新一次

decay同样单位为s,默认为1s,即如果得到了相同的响应字符串,则在decay时间里不请求

var oPu=new Ajax.PeriodicalUpdater('divId','response.aspx',{
method:'get',frequency:3,decay:2
});
//刷新时间间隔为3s若得到相同的响应两次,则2s不请求

oPu.stop();//停止刷新
oPu.start();//开始周期执行刷新

Ajax.Responders:可以动态注册XmlHttpRequest方法,他是全局的,这意味着可以为所有的异步请求定义统一的错误处理函数或者开始响应函数,还可以在任何时候使用

Ajax.Responders.register(
    onCreate:function()
    {
        showLoading();
        Ajax.activeRequestCount++;// Ajax.activeRequestCount是Prototype自带的变量
    } ,
    onComplete:function(req)
    {
        hideLoading();
        if(req.status==200){alert("出错!");}
        else Ajax.activeRequestCount--;
    }
);

Ajax.Responders.unregister(...)