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+"&nbsp;"
  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+"&nbsp;"
  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>