Kategorie: JavaScript

Orte anzeigen mit Bing Maps

Microsoft bietet mit Bing Maps einen Kartendienst, ähnlich zu Google Maps, an. Für Webmaster bietet Bing Maps jedoch den Vorteil, dass man keinen domain-spezifischen API-Key braucht (so wie es für Google Maps erforderlich ist) und derselbe Code somit auf beliebig vielen Domains verwendet werden kann. Bing Maps ermöglicht auch die Ansicht in der Vogelperspektive (Bird’s eye view) und ist unglaublich einfach einzubinden.
Orte anzeigen mit Bing Maps weiterlesen

W3C valides JavaScript

Wer das Tag <script type="text/javascript"> direkt im <head> Teil seiner HTML-Seite verwendet, der kann Probleme bei der W3C-Validierung seines Dokumentes bekommen, wenn innerhalb des JavaScript-Tags nach dem HTML-Standard unerlaubte Elemente enthalten sind.

Typische Fehlermeldungen dafür sind:

  • character „&“ is the first character of a delimiter but occurred as data
  • cannot generate system identifier for general entity „document.getElementById“
  • general entity „document.getElementById“ not defined and no default entity
  • reference not terminated by REFC delimiter
  • reference to entity „document.getElementById“ for which no system identifier could be generated
  • character „;“ not allowed in attribute specification list
  • element „navRoot.childNodes.length“ undefined
  • end tag for „navRoot.childNodes.length“ omitted, but OMITTAG NO was specified

Man kann dieses Manko umgehen, wenn man diese Deklaration ändert:

1
2
3

<script type="text/javascript">
/* My Code */
</script>

Undzwar in:

1
2
3

<script type="text/javascript"><!--//--><![CDATA[//><!--
/* My Code */
//--><!]]></script>

Webseite mit JavaScript bearbeiten

Möchte man eine Webseite direkt im Browser bearbeiten, so reicht es, wenn man folgenden JavaScript-Code in die Adresszeile des Browsers eingibt und ausführt:

JavaScript Live-Editor:

javascript:document.body.contentEditable='true';document.designMode='on';void 0

Ajax.Autocompleter mit scriptaculous

Autovervollständigungen erleichtern dem Benutzer die Eingabe und sehen zudem sehr schick aus. Eine Möglichkeit um Autocomplete zu realisieren ist die Verwendung von scriptaculous.

Dabei müssen folgende Regeln beachtet werden:

  1. Zuerst „Prototype“ im head-Bereich einbinden
  2. Danach „script.aculo.us“ im head-Bereich einbinden
  3. Dem, für die Autocompletion gewünschten, Textfeld eine ID zuweisen
  4. Einen leeren DIV-Container mit ID für die Autocomplete-Ergebnisse erstellen
  5. Liste für die Werte zur Vervollständigung erstellen
  6. Den new Ajax.Autocompleter(...)-Aurfruf im body-Tag (!) durchführen

Bei Nichteinhaltung kann es zum Fehler this.element is null in control.js (Zeile 53) bei this.oldElementValue = this.element.value; kommen.

Ein weiterer beliebter Fehler ist Ajax.Autocompeter is not a constructor. Dieser Fehler basiert im Wesentlichen darauf, dass die Abhängigkeiten nicht gefunden wurden.

Die häufigsten Gründe dafür sind:

  • prototype.js und/oder scriptaculous.js wurden nicht eingebunden
  • prototype.js wurde nicht vor scriptaculous.js eingebunden
  • scriptaculous.js befindet sich ohne abhängige Includes (z.B. control.js) auf dem Server
  • Das DOM ist nicht valide

Ajax.Autocompleter mit scriptaculous weiterlesen

HTTP-POST Request mit JavaScript

Häufig wird in Foren gefragt, wie man mit JavaScript gezielt Daten über einen HTTP-Request an eine bestimmte Datei senden kann. Weil dieser Vorgang in der Web-Entwicklung besonders wichtig ist, habe ich ein kurzes Beispiel programmiert, dass diese Funktionalität besitzt.
HTTP-POST Request mit JavaScript weiterlesen

JEE und AJAX

Exemplarischer Ablauf für die Verwendung von AJAX in JEE:

Servlet.java definiert die zulässigen Aktionen. Beim Auftreten einer Aktion im Servlet, wird die entsprechende ActionClass.java aufgerufen. Die ActionClass.java leitet dann über einen RequestDispatcher an die ajax.jsp weiter und definiert über Request Attributes (request.setAttribute(…)) die jeweiligen Template-Tags, die daraufhin in der ajax.jsp mit der Expression Language (@{…}) angezeigt werden können. Beim Aktivieren eines Links, der auf einen JavaScript-Befehl verweist, in der ajax.jsp, wird ein Request an das AjaxServlet.java gesendet. Das AjaxServlet.java generiert daraufhin aus den erhaltenen Daten einen neuen Output, der dann aktualisiert in der ajax.jsp dargestellt wird.

An dieser Stelle folgt ein Quelltext-Beispiel für ein AjaxServlet.java und eine ajax.jsp. Die ajax.jsp arbeitet mit MooTools 1.2.1 (mootools-1.2.1-core.js), welches als JavaScript eingebunden werden muss.

Quellcode:

ajax.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Title</title>
    <script type="text/javascript" src="mootools-1.2.1-core.js"></script>
    <script type="text/javascript">
    function getSongs(moovar)
    {
        var songRequest = new Request.HTML(
            {
                url: "ajaxservlet",
                update: $('targetBox')
            }).get({'variable': moovar});
    }
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
    <body>
        <a href="#" onclick="getSongs('BAM!!!')">Shoot!</a>
        <div id="targetBox">Target</div>
    </body>
</html>

AjaxServlet.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

package controller.web;
 
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
@WebServlet(name="AjaxServlet", urlPatterns={"/ajaxservlet"})
public class AjaxServlet extends HttpServlet
{
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try
        {
            out.println(request.getParameter("variable"));
        }
        finally
        {
            out.close();
        }
    }
 
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException
    {
        processRequest(request, response);
    }
 
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException
    {
        processRequest(request, response);
    }
 
    @Override
    public String getServletInfo()
    {
        return "Short description";
    }
}