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');
}

/**
* 注册全局事件处理，Ajax.Responders全局监听器仓库
* register（）注册一个全局ajax事件处理器（包含系列方法如：onCreate,onComplete,onException）。
* unregister（）删除一个已经注册的ajax事件处理器
* dispatch（）遍历注册的处理器列表
*/

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>

秒客网

web应用Ajax之prototype

相关文章