web应用Ajax之prototype
1、文章目的：了解prototype对Ajax的支持
2、简单记忆: 实际工作中或多或少都会用到。
3、js应用编写及方法提示：
/**
* html文本框元素id="textField",id="sageField" div id="out"[获取元素]
*/
function handler(){
var name=$('textField','sageField');
for ( var i = 0; i < name.length;) {
$('out').innerHTML+=name[i].value+" "
i+=1;
}
return false;
}
/**
* checkbox组成的数组, name="checkBox" div id="view"[集合变数组]
*/
function checkBox(){
var filedList=document.getElementsByName("checkBox");
var fieldArray=$A(filedList);
for ( var i = 0; i < fieldArray.length;) {
$('view').innerHTML=fieldArray[i].value+" "
i+=1;
}
return false;
}
/**
* 获取输入文本域表单的任何元素的值[$F()函数][表单元素的值]
*/
function findValue(){
var title=$F('title');
var content=$F('content');
$('view').innerHTML="文章标题为："+title+"内容："+content;
return false;
}
/**
* Try.these() 获取返回值
* 语法 Try.these(function1,function2,..........);任意一个函数执行成功就返回
*/
function returnValue(){
var str="";
return Try.these(
function(){
str="new XMLHttpRequest";
return new XMLHttpRequest();
},
function(){
str="new ActiveXObject('Msxml.XMLHTTP')";
return new ActiveXObject('Msxml.XMLHTTP')
},
function(){
str="new ActiveXObject('Microsoft.XMLHTTP')";
return new ActiveXObject('Microsoft.XMLHTTP')
}
);
}
/**
*prototype 自定义对象和类
*（1）addClassName（element，className）-------设置css类样式
*（2）classNames(element)-----------返回给定element的CSS名称的描述
*（3）empty（element）-----检测是否为空
*（4）getHeight(element)-----返回offsetHeight值
*（5）getStyle(element)------返回css的属性值
*（6）inspect（element)------返回一个格式良好的字符串
*（7）match（element）------检测是否给定的css选择器
*（8）remove（element）-----从Document对象中移除
*（9）visible（element）----元素是否可见，返回true or false
*/
//示例：添加css样式
//.solid{
// color:red;
// border:solid 1px;
//}
function addClass(){
Element.addClass('divId','solid');
}
/**
* enumerable 对象在页面中显示数组元素
* （1）each(iterator) 反复调用给定的iterator。iterator==function（value，index）；
* （2）collect（iterator） 对集合中的每个元素调用iterator函数并将结果收到数组中返回。
* （3）detect（iterator） 获取集合中第一个满足某个条件的元素。函数调用依次处理集合中的元素
* （4）include（object） 尝试在集合中查找给定的集合元素对象，返回true（found） or false(not found)
* （5）zip(collection1,collection2,collection3..........)将给定的集合与当前的集合合并。
* ----------------合并操作返回一个数组和新的集合
*/
function foo(v,i){
$('result').innerHTML="value: "+v+"Index: "+i;
return true;
}
function fool(a,v,i){
a+=i+"："+v+" ";
return a;
}
function showExample(){
var testArray=[2,4,6,8];
$('result').innerHTML="数组元素为："+testArray+"<br/>"
testArray.each(foo);
var arr=testArray.grep(/3/); //grep()函数，正则表达式匹配含有3的字符串
for ( var i = 0; i < arr.length;) {
$('result').innerHTML="arr["+i+"]"+arr[i]+"<br/>";
i+=1;
}
//测试inject方法
var injectArr=testArray.inject("inject方法返回结果：",fool);
$('result').innerHTML+=injectArr;
}
/**
* Filed 对象操作表单域
* （1）clear（field1，field2，field3.........）清除所有表单元素的值
* （2）focus（field）将焦点移到指定的表单域。
* （3）select(field)用于选中表单元素的文本。
* （4）activate(field) 同select但比select多一个功能，如果目标元素没有内容，则将焦点移至目标元素。
* （5）present（field1，field2，field3........）判断参数表单域是否为空 true (not null)
*/
function clearTextarea(){
Field.clear('textArea');
}
function judgeTextarea(){
if(!Field.present('textArea')){
alert("此文本为空!");
}else{
alert("此文本不为空!");
}
}
function focusTextarea(){
Field.focus('textArea');
}
function selectTextarea(){
Field.select('textArea');
}
/**
* Form对象实现让表单元素失效
* （1）enable(form）表单生效
* （2）disable（form）表单失效
* （3）serialize(form)返回指定的表单域的名字和值组成的字符串
* （4）getElements(form)以数组形式返回表单中的所有的表单域的值
* （5）findFirstElement(form ).....返回第一个有效的表单域
* （6）rest(form)重置表单
*/
function getInput(){
var obj=Form.getInputs('form1');
for ( var i = 0; i < obj.length; ) {
alert(obj[i]);
i+=1;
}
}
function setEnable(){
Form.enable('form1');
}
function setDisable(){
Form.disable('form1');
}
function getElements(){
var obj=Form.getElements('form1');
for ( var i = 0; i < obj.length; ) {
alert(obj[i].value);
i+=1;
}
}
/**
* Form.Element返回特定表单域的值
* (1)activate(element) 移动焦点并且选择支持文本选择的表单元素的值。
* (2)clear(element) 将表单元素值清空
*（3)disable（element）禁用表单元素
*（4）enable（element）启用表单元素
*（5）focus（element）....
* (6)getValue（element） 返回值
*（7）present（element）仅当所有表单元素包含非空时返回true
*（8）serialize(element) 将名称和值转化为"name=value"的形式
*/
function getTest(text){
alert(Form.Elememt.serialize(text));
}
function getValue(){
alert(Form.Elememt.getValue("textField"));
}
/**
* prototype对Ajax的支持
* method ‘post’ 提交方式 get和post
* encoding UTF-8 内容编码
* parameters '' 参数
* asynchronous true 默认为true[ 是否异步提交]
* onComplete ‘’ 用于请求的回调函数
*/
function showResponse(){
$('result').innerHTML=originalRequest.responseText;
Element.show('result');
}
function searFruit(){
var url="tips.jsp";
var params=Form.Element.serizlize('favorite');
var myAjax=new Ajax.Request(
url,{
method:'post',
parameters:params,
onComplete:showResponse,
asynchronous: true
});
}
//tips.jsp
//<%
// String re=request.getParameter("result");
// if("apple".equals(re)){
// out.println("喜欢苹果！");
// }
// ...............
//%>
/**
* 注册全局事件处理，Ajax.Responders全局监听器仓库
* register（） 注册一个全局ajax事件处理器（包含系列方法如：onCreate,onComplete,onException）。
* unregister（） 删除一个已经注册的ajax事件处理器
* dispatch（） 遍历注册的处理器列表
*/
var globleHandler={
onCreate:function(){
Element.show("loading....");
},
onFailure:function(){
alert("对不起！"+"\n"+"页面加载出错！");
},
onComplete:function(){
if(Ajax.activeRequestCount==0){
Element.hide("loading....");
}
}
};
Ajax.Responders.register(globleHandler);
/**
* 定时刷新时间，Ajax.PeriodicalUpdater类定时刷新
* method post/get
* parameters ...
* frequency 多久发送一次Ajax请求
* decay 若两次响应完全相同，则减慢发送频率
* onSuccess 成功时执行函数
* onFailure 失败时执行函数
* evalScripts 是否执行服务器响应非JavaScript脚本 true or false
*/
function execute(){
var url="date.jsp";
var myAjax=new Ajax.PeriocalUpdater(
'time',url,{
method:'post',
parameters:null,
frequency:1
});
}
//date.jsp
//<body>
//<%
// out.print( new Date());
//%>
//</body>
