Cvičení AJAX

Z FI WIKI
Přejít na: navigace, hledání



V tomto cvičení si ukážeme práci s AJAXem. Využijeme k tomu

Příprava prostředí

Využijeme náš projekt z Spring ve webových aplikacích nebo Cvičení Stripes. Stáhněte si z webu soubor prototype.js a dejte ho vedle souboru index.jsp. To je celá příprava.

Zpracování na serveru bez reloadu stránky

Vytvořte JSP stránku ajax.jsp s jednoduchým formulářem, a využívající knihovnu prototype.js:

 
<%@ page pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="s" uri="http://stripes.sourceforge.net/stripes.tld" %>
 
<s:layout-render name="/rozvrh.jsp" titulklic="users.titul">
    <s:layout-component name="hlavicka">
<script type="text/javascript" src="${pageContext.request.contextPath}/prototype.js"></script>
<script type="text/javascript">
    function addNumbers() {
             new Ajax.Request('<c:url value="/mujajax/add"/>',
                    {
                        method:'get',
                        parameters: {
                            'a' : $F('num_a'),
                            'b' : $F('num_b')
                        },
                        onSuccess: function(transport) {
                            var o = eval(transport.responseText);
                            alert('o=' + o.toSource());
                            $('result').update('and the result is: '+o.sum);
                        },
                        onFailure: function() {
                            alert('Chyba :-(')
                        }
                    }
                    )
            }
</script>
 
    </s:layout-component>
    <s:layout-component name="telo">
 
        <form action="#">
            a: <input type="text" id="num_a" /> <br/>
            b: <input type="text" id="num_b" /> <br/>
            <input type="button" onclick="addNumbers()" value="Add"/>
 
            <div id="result">
            </div>
        </form>
 
    </s:layout-component>
</s:layout-render>

a actionbean MujAjaxActionBean.java:

 
package cz.muni.fi.pa165.cv5;
 
import net.sourceforge.stripes.action.*;
import net.sourceforge.stripes.ajax.JavaScriptResolution;
 
import java.util.HashMap;
import java.io.File;
import java.io.FileFilter;
 
@UrlBinding("/mujajax/{$event}")
public class MujAjaxActionBean implements ActionBean {
 
    ActionBeanContext ctx;
 
    public ActionBeanContext getContext() {
        return ctx;
    }
 
    public void setContext(ActionBeanContext context) {
        ctx = context;
    }
 
    public Resolution add() {
        HashMap<String, Object> m = new HashMap<String, Object>();
        m.put("sum", getA() + getB());
        return new JavaScriptResolution(m);
    }
 
    private int a;
    private int b;
 
    public int getA() {
        return a;
    }
 
    public void setA(int a) {
        this.a = a;
    }
 
    public int getB() {
        return b;
    }
 
    public void setB(int b) {
        this.b = b;
    }
}

Zobrazte stránku a vyzkoušejte.

Nápověda hodnot

Vyzkoušíme si komponentu našeptavače (Google suggest) nabízející uživateli doplnění textového vstupu.

Využijeme hotovou komponentu Ajax.Autocompleter knihovny Scriptaculous. Stáhněte si Scriptaculous a umístěte soubory

builder.js  controls.js  dragdrop.js  effects.js  scriptaculous.js  slider.js

vedle souboru prototype.js.

Do hlavičky stránky přidejte

 
        <script src="${pageContext.request.contextPath}/scriptaculous.js" type="text/javascript"></script>
        <style type="text/css">
 
            div.autocomplete ul {
                background-color: beige;
                border:1px solid #888;
                list-style-type: none;
                margin: 0;
                padding: 0;
                width: 100%;
            }
 
            div.autocomplete ul li.selected {
                background-color: blue;
                color: white;
            }
 
            div.autocomplete ul li {
                list-style-type: none;
                display: block;
                margin: 0;
                padding: 2px;
                cursor: pointer;
            }
            div.autocomplete ul li span.informal {
                font-size: small;
            }
        </style>

a do těla stránky formulář a aktivaci objektu pro Autocompleter:

 
<hr>
        <form action="#">
            našeptavač: <input type="text" id="naseptavac" size="50">
            <div id="pisalek" class="autocomplete"></div>
            
        </form>
 
        <script type="text/javascript">
            new Ajax.Autocompleter(
                    "naseptavac",
                    "pisalek",
                    "${pageContext.request.contextPath}/mujajax/napoveda",
                    {   paramName: "kdoplneni", frequency: 0.1 }
                    );
        </script>

V implementaci actionbeanu přidáme generování seznamu:

 
private String kdoplneni;
 
    public String getKdoplneni() {
        return kdoplneni;
    }
 
    public void setKdoplneni(String kdoplneni) {
        this.kdoplneni = kdoplneni;
    }
 
    public Resolution napoveda() {
        StringBuilder sb = new StringBuilder("<ul>");
        File[] files = new File("/etc").listFiles(new FileFilter() {
            public boolean accept(File file) {
                return file.getName().startsWith(getKdoplneni());
            }
        });
        for (File f : files) {
            sb.append("<li>").append(f.getName())
                    .append("<span class=\"informal\"> (")
                    .append(f.isDirectory()?"dir":f.length())
                    .append(")</span></li>");
        }
        sb.append("</ul>");
        return new StreamingResolution("text/html", sb.toString());
    }

Vyzkoušejte.