web应用Ajax之prototype

时间:2021-11-15 18:43:19

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>