Reading Note about Pro ajax and java. Part 2 library and toolkit

Part 2 library and toolkit

Chapter 3 Java无关的工具包

Prototype

1.       $()

Var myElement =$(‘foo’)  à var myElement = document.getElementById(‘foo’)

Var myValue=$F(‘foo’) à var myValue = document.getElementById(‘foo’).value;

 

Prototype 游泳的表单函数：

getElements(form)   getInputs(form,typeName,name)  disable(form)  enable(form) focusFirstElement(from)    reset(form)    serialize(from)

2.       对DOM的操作

Onclick=”element.toggle(‘hideShow’)

Element.remove(name)

Insertion.bottom // insert a object under another object the user given

Insertion.top

Insertion.after

Insertion.before

Field.clear(‘newItem’) // clear the text field named ‘newItem’

3.       对Ajax的支持

创建Ajax.Request类，用它来向服务器发送请求

创建Ajax.Updatet类，用它来向服务器更新数据

 

Script.aculo.us

1.       script.aculo.us 依赖于Prototype,首先先安装Prototype

Effect.Opacity

Effect.Scale

Effect.Highlight

Effect.Parallel

2.       自动完成

New Ajax.autocompleter(textField,div,url,options)

       Dojo

1.       动画

事件和函数注册监听：

Var element = document.getElementById(“foo”);

Dojo.event.connect(element,”onclick”,object,”bar”)

2.       效果

效果的方法：

Fadeout(element,duration)

fadeHide(element,duration)

fadeShow(element,duration)

fade(element,duration,startOpacity,endOpacity)

slideTo(element,endcoords,duration)

slideBy(element,cords,duration)

slide(element,startCoords,endCoords,duration)

colorFadeIn(element,startColor,duration)

colorFadeOut(element,endColor,duration)

wipeIn(element,duration)

wipeout(element,duration)

3.       dojo.ip.bind

dojo.io.bind({

url :url,

load:function(type,ovalObj){// do something, callback function },

….

});

使用dojo.io.bind 代替冗余复杂的XMLHttpRequest对象

再jodo.io.bind可以截获前进、后退，所以可以实现“前进”与“后退”按钮事件，只需要再dojo.io.bind 中加入：backButton: function(){doBack();}

        forwardButton: function(){doForward();}

Chapter 4 特定于Java的框架

1.       DWR（Direct Web Remoting）

Dwr.xml:

<!DOCTYPE dwr PUBLIC

    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"

    "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>

    <allow>

        <create creator="new" javascript="RemoteBean">

            <param name="class" value="com.proajax.chapt4.RemoteBean"/>

        </create>

        <convert converter="bean" match="com.proajax.chapt4.Person">

            <param name="include" value="firstName, lastName, age, addresses"/>

        </convert>

    </allow>

</dwr>

Creator 属性告诉dwr使用new关键字可以远程创建这个对象

BeanName.methodName([parameters,],  callbackFunction); // the last parameter is the function name is calledback

 

Util.js 可以帮助我们访问DWR的dom函数

 

function getSumOfCharactersInString() {

    DWRUtil.useLoadingMessage();

    var textInput = $("textInput").value;      //而不是document.getElementById方法，$()类似于Prototype

    RemoteBean.calculateCharacterSum(textInput, handleGetSumOfCharactersInString);

}

 

 

JavaScript 闭包函数

function getLuckyNumber() {

    var name = $("nameInput").value;  //取得文本域中name的值

    var password = $("passwordInput").value;

        RemoteBean.getLuckyNumber(name, password, callbackFunction);

    var callbackFunction = function(luckyNumber) { //闭包函数，起到代理作用，因为只有他才能“见到”name,password的值，然后才可以回调handleGetLuckyNumber将值传出

        handleGetLuckyNumber(luckyNumber, name, password);

    };   

}

 

function handleGetLuckyNumber(luckyNumber, name, password) {

    var message = "Name /"" + name + "/" and password /""

        + password + "/" produce a lucky number of " + luckyNumber;

    DWRUtil.setValue("luckyNumberResponse", message);

}

2.       DWR传递对象参数

可以自定义的对象封装数据来自定义浏览器和服务器之间的交互

<convert converter="bean" match="com.abc.bean ">

      <param name=”include” value=”name,age”/>  //include指出Bean中开放的属性 exlude 反之

</convert>

   <create creator="new"  javascript="operate">

      <param name="class" value="com.bjzfy.zfzj.zfzj.xt.operate"/>

      <include method="getZeResult"/>      //指出operate类中开放的方法

      <include method="getMxResult"/>

      <include method="getCzy"/>

   </create>

Create 标签定义了可以被远程访问的类，而createor属性告诉dwr使用new关键字创建这个远程对象。

DWR可以讲java集合转换成javascript数组，但是反之不可以

 

用Javascript 转换为一个对象传递

步骤：1. 使用new创建一个javascript的对象，单要注意，javascript中对象的每个属性和java中的属性名一致  2.通过再方括号中的引号中声明属性，把每个属性添加到对象中。每个属性的值都是通过$()函数从输入框中取得。如：

Function saveAddress(id){

Var address = new Object();

Address[“city”]=$(“city”).value;   //红色部分要注意，要和java中属性名一致

Address[“zip”]=$(“zip”).value;

}

我自己认为是将address看成是个数组，将数组赋值，然后传递给java对象

自己写的一个 例子：

<html>

<head>

  <script type='text/javascript' src='/ajax_java/dwr/interface/remoteBean.js'></script>

  <script type='text/javascript' src='/ajax_java/dwr/engine.js'></script>

  <script type='text/javascript' src='/ajax_java/dwr/util.js'></script>

<script type='text/javascript'  >

     function saveAddr(){

            var addrObj = new Object();

            addrObj["username"]=$(form1.username).value;

            addrObj["addr"]=$(form1.addr).value;

            addrObj["zip"]=$(form1.zip).value;

            remoteBean.saveAddr(addrObj,rtnString);

     }

     function rtnString(data){

            alert(data.length);

     }

</script>

</head>

<body>

<form name="form1">

         <input type="text" name="username" value="" />

         <input type="text" name="addr" value="" />

         <input type="text" name="zip" value="" />

         <input type="button" name="save" value="save" onclick="saveAddr()" />

</form>

</body>

</html>

 

remoteBean：

public class remoteBean {

  public remoteBean() {

  }

  public String saveAddr(Address addr){

    StringBuffer sb = new StringBuffer();

    sb.append("username :" + addr.getUsername());

    sb.append("/naddress :" + addr.getAddr());

    sb.append("/nzip :" + addr.getZip());

    System.out.println( sb.toString());

    return sb.toString();

  }

}

3.       JavaScript Templates (JST)

下载： http://trimath.com/project/wiki/javascripttemplates

他是一个js 名称为 template.js 可以很好的解决DWR DOM的问题

JST的核心是上下文对象（Context Object） 有点想Struts中ActionForm对象搜索表单中的属性值。

 

 

4.       AjaxTag

 

    再AjaxTag中，autocomplete标签中必须的属性

                   BaseUrl source target parameters className minimumCharacters