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"; } } |
Auf http://compressor.ebiene.de/ kann man seine CSS und JavaScript Dateien einfach und smart komprimieren. Es gibt dabei zwei unterschiedliche Stufen (basic compress und powerful compress), die die Leserlichkeit des Codes unterschiedlich stark einschränken. Falls man mit der CSS-Datei danach noch weiter arbeiten möchte, empfehle ich die Basis-Kompression.
Die CSS-Datei von bennyn.de (v1) konnte von 7028 Bytes auf 3879 Bytes geschrumpft werden. Das sind gut 45%. Die erweiterte Kompression würde nochmals 7% einbringen, was aber dazu führen würde, dass ich mich als Mensch ziemlich schwer tun würde, den Code noch zu entziffern. Einem Webserver macht sowas jedoch nichts aus, im Gegenteil.
Code-Beispiel: Ungültiges Ergebnis
alert(unescape(“Ung%FCltiges Ergebnis%21″));
Zur Bestimmung des Viewports gibt es ein JavaScript, dass die Breite in der Variablen viewportwidth und die Höhe in der Variablen viewportheight speichert.
<script type=”text/javascript”>
<!–var viewportwidth;
var viewportheight;// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != ‘undefined’)
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != ‘undefined’
&& typeof document.documentElement.clientWidth !=
‘undefined’ && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}// older versions of IE
else
{
viewportwidth = document.getElementsByTagName(‘body’)[0].clientWidth,
viewportheight = document.getElementsByTagName(‘body’)[0].clientHeight
}
document.write(‘<p>Your viewport width is ‘+viewportwidth+’x'+viewportheight+’</p>’);
//–>
</script>
Vielen Dank an Andy Langton.
Zum sofortigen Editieren einer Website muss man
lediglich die gewünschte Adresse im Browser öffnen und danach folgende
Adresszeile:
javascript: document.body.contentEditable = ‘true’; document.designMode = ‘on’; void 0
Dadurch kann man direkt im Browser editieren. Die Änderungen wirken sich jedoch nur temporär aus.
0