ProtoType框架的使用

最新推荐文章于 2018-07-15 19:25:00 发布

飞歌

最新推荐文章于 2018-07-15 19:25:00 发布

阅读量3.1k

点赞数

文章标签： prototype xmlhttprequest asynchronous parameters function javascript

本文链接：https://blog.csdn.net/chen__jinfei/article/details/6523891

版权

ProtoType框架的使用

(2008-10-13 15:37:18)

转载

标签：

name

分类： JavaScript

//当有调用<script language src="prototype.js"></script>时在protoType框架中才会有用(prototype.js开发笔记)

//prototype.js是一个javascript的一段代码编写成的框架,网上有下载(http://www.prototypejs.org/api/ajax/request)
$() 方法是在DOM中使用过于频繁的 document.getElementByIdx() 方法
多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象

//document.getElementByIdx('').value一样的功能。
$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值，如文本框或下拉框。

//使用Request()的用
function search()
{
var url="newPage.axps";
new Ajax.Request(
  url,{method:'get',parameters:"ID=222&name=chen",onComplete:showResponse}
);
}
url：是要执行跳转的页面。 method：跳转的方法（post,get两种）。
parameters：传递的参数。 onComplete：执行完成后执行的事件。onLoading：在加载时的事件。
onLoaded：加载页面后的事件。 Interactive：交互时的事件。onFailure：在失败后的事件。
onSuccess:加载成功后的事件。
function showResponse(Req)
{
alert('OnComplete is even;');
$('result').value=Req.responseText;
}
<input type="text" id="result"/>
----------------------------------------Updater的使用和一些参数-----------------------------------------------
通过这个JS类库，将很容易的应用AJAX技术
ajax.updater应用
new Ajax.Updater('id',"url",{options});
id:你要更新的目标id
url:你要执行的操作，也可以是cgi
options:
属性类型默认描述
method Array 'post' HTTP 请求方式。
parameters String '' 在HTTP请求中传入的url格式的值列表。
asynchronous Boolean true 指定是否做异步 AJAX 请求。
postBody String undefined 在HTTP POST的情况下，传入请求体中的内容。
requestHeaders Array undefined 和请求一起被传入的HTTP头部列表，这个列表必须含有偶数个项目，任何奇数项目是自定义的头部的名称，接下来的偶数项目使这个头部项目的字符串值。例子:['my-header1', 'this is the value', 'my-other-header', 'another value']
onXXXXXXXX Function(XMLHttpRequest) undefined 在AJAX请求中，当相应的事件/状态形成的时候调用的自定义方法。例如 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 这个方法将被传入一个参数，这个参数是携带AJAX操作的 XMLHttpRequest对象。
onSuccess Function(XMLHttpRequest) undefined 当AJAX请求成功完成的时候调用的自定义方法。这个方法将被传入一个参数，这个参数是携带AJAX操作的 XMLHttpRequest对象。
onFailure Function(XMLHttpRequest) undefined 当AJAX请求完成但出现错误的时候调用的自定义方法。这个方法将被传入一个参数，这个参数是携带AJAX操作的 XMLHttpRequest对象。
insertion Function(Object, String) null 为了把返回的文本注入到一个元素中而执行的方法。这个方法将被传入两个参数，要被更新的对象并且只应用于 Ajax.Updater的响应文本。
evalScripts Boolean undefined, false 决定当响应到达的时候是否执行其中的脚本块，只在 Ajax.Updater 对象中应用。即要用到目标对象的JS代码必须设定true。
decay Number undefined,1 决定当最后一次响应和前一次响应相同时在 Ajax.PeriodicalUpdater 对象中的减漫访问的次数，例如，如果设为2，后来的刷新和之前的结果一样，这个对象将等待2个设定的时间间隔进行下一次刷新，如果又一次一样，那么将等待4次，等等。不设定这个只，或者设置为1，将避免访问频率变慢。
parameters:Form.serialize(formObj);会把表单的数据提交到后台去。
-----------------------------------------------------------------------------------------------------------------
new Ajax.Updater("datalist", url, {method:'post',onComplete:function(request){$('cs_title').hide();location.href=location.href;},asynchronous:true, evalScripts:true, parameters:Form.serialize(formObj) });
parameters:Form.serialize(formObj)：是传本页面上的参数到后台如：<input type="text" name="cards.info"/>
------------------------------------new Ajax.Request的运用--------------------------------------------------
<html>
My View contents for Home/Index
<body>
//加载了prototype.js框架类
<script src="file:///D:/cheng/Aptana/TextAdjx/prototype.js"></script>
<script language="javascript">
function searchDiv()
{
//alert('responseText');
$('result').innerText="Load...";
var url = 'newPage.page';
var pars = 'ids=' + 111;
var myAjax = new Ajax.Request(
     url,{method: 'post', parameters: pars, onComplete: showResult},asynchronous:false
);
//asynchronous:false：指定是否是同步的
//evalScripts:true：是否执行脚本代码。
//执行完就直接加载数据到<div id='result'></div>层中
//parameters:{two:222},参数还可以这样添加。
//new Ajax.Updater('result',url,{method:'post',parameters:pars});
//parameters:Form.serialize(this)：提交表单的信息到另一页面上，可以把<input type="text" name="txt1"/>等的值一并传到另一方法内接收。
}
//originalRequest：参数如同Ajax中的XMLHttpRequest一样
function showResult(originalRequest)
{
//$('result').innerText=originalRequest.responseText;
//innerText会显示newPage整个页面
//innerHTML会显示文本内容
$('result').innerHTML=originalRequest.responseText;
alert('responseText');
}
</script>
<input type="button" value="Requset" οnclick="searchDiv();"/>
<div id='result'></div>
</body>
</html>
-------------------------------------------------------------------------------------------------------
new Ajax.Updater('divTip', url, {method:'get', onComplete: function(){document.getElementByIdx('divTip').className = "";}});
===＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝controls/HomeControl类中================
public void NewPage(int ids)
{
IList its=new ArrayList();
its.Add(ids);its.Add("newPage");
this.ProperyBag.Add("its",its);

//当有RenderText就无须要建ＶＭ页面就会有返回的值　
this.RenderText("aaaaaa"+ids);
}
=================================Home/newPage.vm页面上=====================================
//在Castle框架中是用页面的数据来加载数据，用前台的脚本来接收的
#foreach($it in $its)
$it
#end
------------------------------提交表单的用法-----------------------------------------------------------
<form method="post" οnsubmit="new Ajax.Updater('pos', 'AddPosition.page', {method:'post', parameters:Form.serialize(this), onComplete:function(request){ $('editposition').hide(); } }); return false;">
  <span id="postitle">请输入添加职位的名称</span>
  <a href="javascript:void(0);" οnclick="$('editposition').hide();">x</a>
  <input type="hidden" name="id" value="$!{positionId}"/>
  <input type="hidden" name="listType" value="List"/>
  部门名称<input type="text" id="positionName" name="positionName" value="$!{position.PositionName}"/>
  <input type="submit" value="保存"/>
  <input type="button" value="关闭" οnclick="$('editposition').hide();"/>
</form>

-----------------------用prototype.js的方法来隐藏和显示层------------------------------------------------------
//show(),hide()：是prototype.js提供的方法所特有的
<head>
<style type="text/css">
#relaWindow{
position: relative; top:-15px; left:256px;
}
.windows{ position:absolute;
border: 1px solid #FF5F1F;
background: #fff;
width: 300px;
w/idth: 270px;
padding: 10px 15px 20px 15px;
}
#relaWindow .windows h3{
font-size: 14px;
color: #FF5F1F;
}
#relaWindow .windows h3 a:link,#relaWindow .windows h3 a:visited,#relaWindow .windows h3 a:hover{
text-decoration: none;
float: right;
color: #FF5F1F;
}
.windows .inp{
width: 204px;
height: 21px;
w/idth: 200px;
he/ight: 17px;
border: 1px solid #D7D7D7;
padding: 2px 0 0 2px;
}
#relaWindow .windows .butt{
height: 18px;
background: #FFE7DD;
border: 1px solid #FF5F1F;
color: #FF5F1F;
}
</style>
</head>
//有样式层不会引响另外的层
<body>
  <a href="javascript:void(0);" οnclick="HideDiv();">层的出现</a>
  <div id="relaWindow">
  <div id="cs_title" class="windows" style="display:none">
   <h1>消费备注<a href="javascript:void(0);" οnclick="HideRemark();">×</a></h1>
   <div id="RemarkContent"></div>
   <div class="btn"><input type="button" value="关闭" οnclick="HideRemark();"/></div>
  </div>
  </div>
  <div>#######################################################################</div>
  <script language=JavaScript src="prototype.js"></script>
  <script language="JavaScript">
   function HideDiv()
   {
    //传统的用法
    //document.getElementByIdx('cs_title').style.display='block';
    $('cs_title').show();
   }
   function HideRemark()
   {
    //document.getElementByIdx('cs_title').style.display='none';
    $('cs_title').hide();
   }
  </script>
</body>
--------------------------------------------------------------------------------------------------------------
<div id='divMsg'></div>
//with取得层并对其属性进行操作，方便不用多次重用该层即可。
with($('divMsg')){
innerHTML='请输入姓名！！';
className='aa';
}
-----------------------------------------------------------------
<input type="button" id="btn1" value="disabled" οnclick="disable1();"/>
function disable1()
{
$('btn1').disabled=true
}
------------------------------------each用来迭代循环用的-------------------------------------------------------
function each()
{
var simpsons=['Homeer','Marge','Lisa','Bart','Meg'];
//如同用for一样的循环(familyMember是自己定义的随便取名即可。)。
simpsons.each(function(familyMember){ alert(familyMember); });
}
-----------------------------------$R()-------------------------------------------------------
function deomDollar_R()
{
//$R(lowerBound,upperBound,excludeBounds);结果会显示10-13之间的数：10，11，12，excludeBounds是否包含upperBound这个数
var range=$(10,13,false);
//value:会显示数值。index:会显示循环的次数（从0开始）。
range.each(function(value,index){alert(value);});
}
-------------------------------关于Ajax.Request与Ajax.Updater的区别-------------------------------
关于protetype.js中的Ajax.Request与Ajax.Updater的区别，个人理解Ajax.Request适用于对返回数据要进行比较复杂的处理的情况；Ajax.Update则适用于用返回的数据更新当前页中的某个Html元素的内容。
例子如：csm/Sale/editReturn.page页面
//提交表单，用AJAX来提交。
function actionFrom(ele)
{
  if(vaildateEditReturn(ele))
  {
   var url = "SaveReturn.page?rnd=" + Math.random();
   new Ajax.Updater('divReturn',url, {method:'post',asynchronous:true, evalScripts:true, parameters:Form.serialize(ele)});
   //new Ajax.Request(url, {method:'post',asynchronous:true, evalScripts:true, parameters:Form.serialize(ele)});
   //两个的提交是不一样的。Updater是可以提交，并在后台的会有脚本的提示出来。
   //Request是不无法提交的。要注意！！！！！！
  }
  return false;
}
++++++++相应的方法。
  public void SaveReturn(int salereturnId,int[] orderId,int[] productId,int[] oldquantity, int[] quantity)
  {
   string operater = Operater;
   if (productId.Length != quantity.Length || productId.Length != orderId.Length)
   {
    ClientAlertAndCloseRefresh("产品数量匹配不足!");
    return;
   }
   //判断是否还可以退货
   for (int i = 0; i < productId.Length; i++)
   {
    ProductSaleReturn psr = ProductReturnService.GetProductSaleReturn(orderId[i],productId[i]);
    if(psr!=null && psr.SaleQuantity-psr.ReturnedQuantity+oldquantity[i]-quantity[i]<=0)
    {
     //会在页面上显示出一个对话框，但没有刷新页面
     ClientAlert(string.Format("第{0}行的产品数量不能大于{1}!",i+1,psr.SaleQuantity-psr.ReturnedQuantity+oldquantity[i]));
     return;
    }
   }
   SaleReturn salereturn;
   if (salereturnId > 0) //编辑
   {
    salereturn = SaleReturnService.Get(salereturnId);
   }
   else //新增
   {
    salereturn = new SaleReturn();
    salereturn.ReturnDate = System.DateTime.Now;
    salereturn.OwnerId = merchantName;
    salereturn.ReturnState = ReturnState.Open;
    salereturn.Operater = operater;
    salereturn.OwnerName = LoginName;
   }
   BindObjectInstance(salereturn, ParamStore.Form, "salereturn");

   IList productReturn = new ArrayList();

   for (int i = 0; i < productId.Length; i++)
   {
    ProductReturn preturn = new ProductReturn();
    SaleOrder saleOrder = _saleorderService.Get(orderId[i]);
    preturn.Product = new Product();
    ProductSale productSale = _productSaleService.GetProductSale(orderId[i],productId[i]);

    preturn.Return = salereturn;
    preturn.OrderId = orderId[i];
    preturn.Product.Id = productId[i];
    preturn.CreateDate = System.DateTime.Now;
    preturn.Quantity = quantity[i];
    preturn.UnitPrice = productSale.UnitPrice;
    preturn.Amount = preturn.UnitPrice * quantity[i];
    preturn.Discount = productSale.Discount;
    preturn.OrderDiscount = saleOrder.Discount;
    preturn.Operater = operater;

productReturn.Add(preturn);
}

   //保存退货单和退货单细项
   int res = _saleReturnService.Save(salereturn,productReturn);
   if(res>0)
   {
    //也是会弹出对话框，也是没有刷新到页面。
    ClientAlertAndCloseRefresh(salereturnId>0?"产品退货单修改成功!":"产品退货单添加成功!");
   }
   else
   {
    ClientAlert(salereturnId>0?"产品退货单修改失败!":"产品退货单添加失败!");
   }
  }
--------------------------------------------------------------------------------------------------------------
new Ajax.Request();提交是不会刷新页面的。
//如例子
http://biz.myking.cn/Cards/MerchantMember/CardLogConsume.page?cardId=6888102008162928&type=&dateFrom=2008-09-23&dateTo=2008-9-25&shopId=
的查看备注并保存的确
function SaveRemark(form, index){
  new Ajax.Request('SaveFillRemark.page?rd=' + Math.random(), {method:'post', parameters:Form.serialize(form), onComplete:function(request){alert('保存成功！');$('Remark'+index).hide();}});
  return false;
}

http://biz.myking.cn/cards/Customer/editCustomerInfo.page?customerId=648350&width=624&height=574页面上
创建分组会自动无刷新就把新的分组名放到客户分组中。
function showCategoryModule(){
new Ajax.Updater('addDiv', 'editCategory.page', {onLoading:function(request) { showWaiting(); } , onComplete:function(request) { hideWaiting();$('addDiv').show()} ,asynchronous:true, evalScripts:true});
}
----------------------------------------------------------------------------------------------
//Event.observe();为对象加上事件，参数为（对象名，响应事件，函数名）；
//例子是。kingcard/diffSale/editCouponPackages.vm
var newCoupon = document.createElement('li');
Event.observe(newCoupon, "click",selectLi);
fucntion selectLi(){}

---------------------------------------------------------------------------------------------

//$('').select();取得指定的对象的。document.getElementsByTagName_r();
function checkForm(frm)
{
  //frm.submit();
  var sels =$('form1').select('[type="select"]');
  alert(sels.length);
}
----------------------------------------------------------------------------
//serizlize()；方法是用来取得表单的参数，并生成一串参数如：merchantname=chen&merchantID=112
//<form id="testForm"><input type="text" name="merchantname"/></form>
alert($('testForm').serialize());