首次接触web前端,遇到一些技术问题,随手记录下来。
Ajax( Asynchronous JavaScript and XML),异步的 JavaScript 和 XML。Ajax是利用javascript语言,在不重新加载整个页面的情况下,与服务器交换数据并更新部分内容的方法,核心思想是采用异步请求的方式与服务器交换数据。XMLHttpRequest对象是Ajax的基础。
Javascript有许多库都封装实现了Ajax方法。Ajax.Request()便是Prototype.js库(貌似这个库已经比较老,资料也比较少,很多文章都是07、08年的)的一个Ajax请求类。
Ajax.Request(
url,
{
method:method,
parameters:para,
postBody:xmlString,
asynchronous:true,
setRequestHeader:Object,
onComplete:completeFun,
onError:errorFun
}
}
参数
url
必选项。数据发送的目标地址。
method
可选项。数据提交的方式,默认值为get。常用的还有post。
parameters
当 method 为 get 时是可选项,为 post 时是必选项。参数构造形式为{key1:value,key2:value2, .......}。发送的数据,其形式为: name1=valeu1& name2=value2&name3=value3......
postBody
可选项。客户端发送的 xml 格式字符串。如果启用 postBody,那么 parameters 将被忽略。
asynchronous
可选项。指定请求是否异步,默认为true(异步)。
setRequestHeader
指定请求的头部字串。其值类型为“名称值对”形式的对象,比如:{"If-Modified-Since":"0", "SOAPAction":"http://tempuri.org/SBS_WebService", ... ... }
onComplete
可选项。请求成功时执行的回调函数,该函数默认把当前使用 xmlhttp 对象作为第一个参数。
onError
可选项。请求异常时执行的回调函数,该函数默认把当前使用 xmlhttp 对象作为第一个参数。
返回值
当前使用的 xmlhttp 对象。
描述
发送异步请求,并返回 xmlhttp 对象,该对象内置有 abort() 方法,用于提前终止请求。异步请求成功则执行 onComplete,失败则执行 onError 。并返回 xmlhttp 对象。
Prototype 的 AJAX 对象定义了完整的回调系列,它们按照下述的顺序被触发:
1、onCreate(实际上这是被 AJAX 全局响应器 保留的回调)。
2、onUninitialized(对应于“创建”[Created])
3、onLoading(对应于“初始化”[Initialized])
4、onLoaded(对应于“请求发送”[Request sent])
5、onInteractive(对应于“响应接收”[Response being received])
6、onXYZ(XYZ 表示响应的状态代码,参见状态代码)对应于指定的响应状态代码回调、onSuccess 或 onFailure(见下文)
7、onComplete
最后两步对应于响应接收完成(Response received)。如果定义了一个与指定状态代码相关的回调函数,它将会被调用。否则,如果 onSuccess 被定义并且响应被认为是成功的(见下文),onSuccess 就会被调用,如果响应不成功并且定义了 onFailure,则调用 onFailure。onComplete 在上述回调结束后才会被调用。
几个代码示例:
var myrequest = new Ajax.Request('/rules/enable1/check_capture',{method:'POST', parameters:{'Id':10000,'user':'Joe'},onComplete:dosome});
function dosome(x){
if (x.responseText == "1"){
//do something
}else if(x.responseText == "0"){
//do something
}
貌似回调函数只能传入一个参数,所以如果想用其他参数可以这样。
var ct='this is a test'
var myrequest = new Ajax.Request('/rules/enable1/check_capture',{method:'POST', parameters:param,onComplete:function(x){
if (x.responseText == "1"){
//do something about ct
}else if(x.responseText == "0"){
//do something about ct
}});
function(x)里的x参数不能省略,不能直接调用myrequest。
参考资料:Ajax选项