Ajax demo

 
 

<script type="text/javascript" src="http://www.dse.se/pulsar/js/"></script>
AjaxDemo - Examples with Pulsar

Call method on server
This example shows how simple it is to call a Java-method from Javascript. By using the annotation "@PulsarMethod" on a Java-method you make the method callable from the browser. The attribute "JavaScript=true" makes Pulsar create a Javascript-method that handles the communication with the server. The Javascript-functions is included in the HTML-template with the "/pulsar/js" URL.


Java-source
@PulsarMethod(JavaScript = true)
public String hello() {
return "Hello! I'm using Pulsar version " + Core.getPulsarVersion();
}
HTML-template
<script type="text/javascript" src="/pulsar/js/"></script>
...
<input type="button" οnclick="alert(hello())" value="Hello server"/>

Call method on server with arguments
This example show how you can send information to the server just by passing it as an argument to the Javascript-function. The Javascript-function is created by Pulsar to match the Java-function.
Your name: 

Java-source
@PulsarMethod(JavaScript = true)
public String checkName(String name) {
return "Hello " + name +
", your name has " + name.length() +" characters" +
", and your hashCode is " + name.hashCode();
}
HTML-template
<script type="text/javascript" src="/pulsar/js/"></script>
...
Your name: <input type="text" id="name"/>
<input type="button" value="Check name..."
οnclick="alert(checkName(document.getElementById('name').value))" />

<script type="text/javascript"> function flipText(id, flip) { if (flip) $(id).innerHTML = 'This text is changed by a Javascript function'; else $(id).innerHTML = 'Changed text!'; //setTimeout("flipText('" + id + "')", 1000); setTimeout("flipText('" + id + "', " + !flip + ")", 1000); } setTimeout("flipText('flip', true)", 1000); </script>
Call method on server asynchronous
This is an example of an asynchronous call from the browser to the server. When you annotate a Java-function, Pulsar actually creates two Javascript functions, one that is called syncronous, and one that is called asynchronous. For the java-function foo(), Pulsar creates the Javascript functions foo() and fooASync(). This example showes how the browser is frozen when you call a slow function synchronous. If you call the function asyncronous, you don't notice anything.




Java-source
@PulsarMethod(JavaScript = true)
public void slowFunc() {
try {
Thread.sleep(5000);
} catch (InterruptedException e) { }
}
HTML-template
<script type="text/javascript" src="/pulsar/js/"></script>
...
<script type="text/javascript">
var flip = true;
function flipText() {
var element = document.getElementById('flip');
if (flip) element.innerHTML = 'This text is changed by a Javascript function';
else element.innerHTML = 'Changed text!';
flip = !flip;
setTimeout("flipText()", 1000);
}
setTimeout("flipText()", 1000);
</script>
...
<input type="button" οnclick="slowFunc()" value="Call slow method syncronous"/>
<input type="button" οnclick="slowFuncASync()" value="Call slow method asyncronous"/>
<label id="flip"> </label>

<script type="text/javascript"> setTimeout("flipText('flip2', true)", 1000); function setPrime(req) { $('prime').innerHTML = req.responseText; } </script>
Call method on server asynchronous with a callback function
This example shows how you can get the result back when you call an asynchronus method. You simply add an extra parameter with a function that should be called with the result from the Java-function.




Java-source
@PulsarMethod(JavaScript = true)
public String prime() {
long l_startTime = System.currentTimeMillis();
while (System.currentTimeMillis() < l_startTime + 5000) {
prime = prime.nextProbablePrime();
}
return "" + prime + " is probable prime...";
}
HTML-template
<script type="text/javascript" src="/pulsar/js/"></script>
...
<script type="text/javascript">
function flipText() {
...
}
setTimeout("flipText()", 1000);

function setPrime(req) {
document.getElementById('prime').innerHTML = req.responseText;
}
</script>
<input type="button" οnclick="document.getElementById('prime').innerHTML = prime()"
value="Calc prime synchronous"/>
<input type="button" οnclick="primeASync(setPrime)"
value="Calc prime asynchronous"/>
<label id="prime"> </label>
<label id="flip2"> </label>

Update a part of page with a Java-method
This example show how simple it is to reload a part of the page with the result of a ordinary Java-function.
Current time on the server is: 3:18:30 AM CEST   

Java-source
@PulsarMethod
public String getTime() {
return DateFormat.getTimeInstance(DateFormat.LONG).format(new Date());
}
HTML-template
Current time on the server is: <pulsar:method id="time" method="getTime"/>
<input type="button" οnclick="reloadPulsarTag('time')" value="Update"/>

Update a part of page by including another page
This example shows how you can update a part of a page with another template.
Current time on the server is: 3:18:30 AM CEST
This method has been called 13344 times
   

Java-source
static int methodCount = 0;

@PulsarMethod
public String getMethodCount() {
methodCount++;
return "" + methodCount;
}
HTML-template
<pulsar:include id="time2" template="AjaxDemoInclude.html"/>
<input type="button" οnclick="reloadPulsarTag('time2')" value="Update"/>
HTML-template - AjaxDemoInclude.html
Current time on the server is: <pulsar:method method="getTime"/>
This method has been called <pulsar:method method="getMethodCount"/> times

Dependent drop-downs
This is a classic example of dependent drop-downs. The left example shows the old school-solution, that reloads the whole page when you select an item. The right example shows how Pulsar can reload just a part of the page. This makes the solution faster, without any unnecessary scrolling of the page.
Country
Region
City

Country
Region
City

Java-source
@PulsarMethod
public XMLRepresentation getCountries() {
return new XMLConverter(countries);
}

@PulsarMethod
public XMLRepresentation getRegions(Long countryId) {
if (countryId == null) return null;
Country l_country = countries.get(countryId);
return new XMLConverter(l_country.regions);
}

@PulsarMethod
public XMLRepresentation getCities(Long regionId) {
if (regionId == null) return null;
Region l_region = regions.get(regionId);
return new XMLConverter(l_region.cities);
}
HTML-template
<table>
<tr>
<td>Country</td>
<td>
<pulsar:method method="getCountries">
<stylesheet name="select.xsl">
<param name="id" value="country"/>
<param name="name" value="countryId"/>
<param name="selectedId" variable="countryId"/>
<param name="onchange" value="$('city').options.length=0;
reloadPulsarTag('regions', 'countryId=' + $F('country'))"/>
</stylesheet>
</pulsar:method>
</td>
</tr>
<tr>
<td>Region</td>
<td>
<pulsar:method id="regions" method="getRegions">
<stylesheet name="select.xsl">
<param name="id" value="region"/>
<param name="name" value="regionId"/>
<param name="selectedId" variable="regionId"/>
<param name="onchange"
value="reloadPulsarTag('cities', 'regionId=' + $F('region'))"/>
</stylesheet>
</pulsar:method>
</td>
</tr>
<tr>
<td>City</td>
<td><pulsar:method id="cities" method="getCities">
<stylesheet name="select.xsl">
<param name="id" value="city"/>
<param name="name" value="cityId"/>
<param name="selectedId" variable="cityId"/>
</stylesheet>
</pulsar:method>
</td>
</tr>
</table>

Note: In this example we use the function $() and $F() from the Javascript Framework prototype. $() is just a
shortcut of document.getElementById() and $F() returns the value of any field input control.
select.xsl
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="no" encoding="iso-8859-1" omit-xml-declaration="yes"/>

<xsl:param name="name"/>
<xsl:param name="id"/>
<xsl:param name="selectedId"/>
<xsl:param name="onchange"/>

<xsl:template match="/">
<select name="{$name}" id="{$id}" οnchange="{$onchange}">
<option/>
<xsl:apply-templates/>
</select>
</xsl:template>

<xsl:template match="/*/*">
<option>
<xsl:attribute name="value"><xsl:value-of select="id"/></xsl:attribute>
<xsl:if test="$selectedId = id">
<xsl:attribute name="selected"/>
</xsl:if>
<xsl:value-of select="name"/>
</option>
</xsl:template>

</xsl:stylesheet>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值