Ajax demo _ajax中转站-优快云博客

AjaxDemo - Examples with Pulsar

The following examples demonstrates the support for Ajax that exists in Pulsar.

If you have any questions, suggestions, or if you want an e-mail when you can download your own copy of Pulsar, don't hesitate to contact us!

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" onclick="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..."
          onclick="alert(checkName(document.getElementById('name').value))" />

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.

Changed text!

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" onclick="slowFunc()" value="Call slow method syncronous"/>
<input type="button" onclick="slowFuncASync()" value="Call slow method asyncronous"/>
<label id="flip"> </label>

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.

Changed text!

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" onclick="document.getElementById('prime').innerHTML = prime()"
          value="Calc prime synchronous"/>
<input type="button" onclick="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" onclick="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" onclick="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}" onchange="{$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>