Beispiel - AJAX der XML http request

Beispiel - update Data in Backened mit AJAX, no page refresh

Der wesentliche Vorteil von AJAX (asynchronous JavaSscript and Xml) besteht darin,
nicht die ganze Webseite zum WebServer zu senden,
sondern nur einzelne Werte oder Objekte zu übertragen.

Die AJAX Technologie, ist wie der Name schon sagt, ein XML http request,
welcher das HTTP Protokoll nutzt.
Dabei werde Daten zwischen den Client-Browser und dem Server (Webseite) ausgetauscht
und Content auf der Webseite dynamisch geändert.

Die neue (moderne) Variante, macht man mit JSON für XML und Jquery.
Welche ein paar andere Vorteile im Vergleich zur älteren AJAX Methode hat.
Außerdem ist die herkömmliche XMLHttpRequest genau genommen ein ActiveXObject
und kann aufgrund Sicherheitseinschränkungen im Browser zu Problemen führen.
Da ActiveXObjecte immer mehr bei dem Browser verdrängt werden (aufgrund der Angreifbarkeit (vulnerability)).
Daher kann die neue (moderne) Variante mit JSON für XML und Jquery schon Sinn machen.

Aber zunächst zurück zur alt bewährten (klassischen) AJAX Methode.
Im Grunde ist es nicht nur eine Technologie,
sondern eine Gruppe aus verschiedenen Technologien.
Die zusammen kombiniert werden, um dynamische Inhalte auf der Webseite zu präsentieren.

Der JavaScript Code und das XMLHttpRequest Objekt,
bieten eine hilfreiche Methode an,
um Daten asynchron zwischen Client-Browser und Webserver auszutauschen.
Dadurch vermeidet man die vollen Seiten reloads oder refreshs.
Das verbessert zum einen die Server Performance
aber auch im wesentlichen die Usability einer Webseite. 2. Ajax (XML http request) AjaxCall.docx

Beispiel - JavaScript Code um den XMLHttpRequest zu starten (Request)

Durch ein beliebiges JavaScript-Event ruft man die JavaScript function auf.
Hier könnte man einen Paramter oder das ganz Objekt gleich mit in die Funktion übergeben.
Man kann aber auch direkt aus der Form die Werte holen,...also je nach belieben.

Nach dem Event-call kommen also nur ein paar wenige Zeilen Code
um den XMLHttpRequest zu starten
und eine Java Public Class Funktion auf dem WebServer aufzurufen:

  function updateMyValueInBackend(){
        var sEinBeispielParameter = "testdata";
        var param = "prtmode=saveNewValueInBackend&myparameter=" + sEinBeispielParameter;
        AjaxUtil.callRequest( "POST", "myJavaPath.JavaClassName", param, true, "doResponseFromServer" );
  }

Beispiel - JavaScript Code um den XMLHttpRequest (Response)

   function doResponseFromServer(rtv){
                 alert(doResponseFromServer + rtv);
                 /* und dann einfach die Response verarbeiten */
   }

Beispiel - JavaScript AjaxUtil die Hilfsfunktion

Also der obige JavaScript Code funktioniert nicht ohne die Hilfsfunktionen.
Man könnte die Code so direkt in jedes HTML Dokument kopieren,
aber ich empfehle den folgende Code in eine separate JavaScript file zu machen
und nur die JavaScript File als Libary einzubinden.
Bsp: MyAjaxUtil.js (die wird später im ServerScript auch benötigt)

         <script src="MyAjaxUtil.js" ></script>

XMLHttpRequest AjaxUtil Libary

im Grunde besteht die Libary AjaxUtil nur aus 2 Funktionen:
1. AjaxUtil.callRequest
2. AjaxUtil.callback

mehr brauchen wir ja auch nicht...

function AjaxUtil(){};

/**
* ajax  XMLHttpRequest use ActiveXObject
*/

AjaxUtil.HttpReq = false;
AjaxUtil.FuncName = null;

if (window.XMLHttpRequest) AjaxUtil.HttpReq = new XMLHttpRequest();
else AjaxUtil.HttpReq = new ActiveXObject("Msxml2.XMLHTTP");

if(!AjaxUtil.HttpReq){
                alert("Error initializing XMLHttpRequest");
        }

AjaxUtil.callRequest = function( method, url, param, isAsync, functionName ){
        AjaxUtil.FuncName = functionName;

        if(method.toUpperCase() == "POST") {
                AjaxUtil.HttpReq.open(method.toUpperCase(), url, isAsync);
                AjaxUtil.HttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charaset=UTF-8");
                AjaxUtil.HttpReq.setRequestHeader("Cache-Control", "no-cache, must-revalidate");
                AjaxUtil.HttpReq.setRequestHeader("Pragma", "no-cache");
                AjaxUtil.HttpReq.setRequestHeader('Content-length', param.length);
                AjaxUtil.HttpReq.setRequestHeader("Connection", "close");
                AjaxUtil.HttpReq.send(param);
        }else {
                AjaxUtil.HttpReq.open(method, url + "?" + param, isAsync);
                AjaxUtil.HttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charaset=UTF-8");
                AjaxUtil.HttpReq.setRequestHeader("Cache-Control", "no-cache, must-revalidate");
                AjaxUtil.HttpReq.setRequestHeader("Pragma", "no-cache");
                AjaxUtil.HttpReq.send("");
        }

        AjaxUtil.HttpReq.onreadystatechange = AjaxUtil.callback;
};

AjaxUtil.callback = function(){
        if(AjaxUtil.HttpReq.readyState == 4)
         {
                if(AjaxUtil.HttpReq.status == 200){
                        var resultData = AjaxUtil.HttpReq.responseText;
                        eval(AjaxUtil.FuncName + "(" + resultData + ")");
                } else if(AjaxUtil.HttpReq.status == 404)
                        alert("Request URL does not exist");
                else
                        alert("ERROR:status code is" + AjaxUtil.HttpReq.status);
        }
};

Beispiel - Implementierung auf dem Serverseitigem Script via JAVA

public class BeispielServerJavaClass {
        /*
         * Ajax call from mySite.jsp
         */
        public void doSaveNewValueInBackend(IPortalComponentRequest request, IPortalComponentResponse response){

                String strMyParamter = request.getParameter("myparameter");

                try{
                        request.getServletResponse(true).reset();

                        PrintWriter writer = request.getServletResponse(true).getWriter();

                        String rtnValue = "1"; //hier könnte eine Unterfunktion aufgerufen werden

                        writer.write("\""+rtnValue+"\"");

                } catch (Exception e) {
                        try{
                                PrintWriter writer = request.getServletResponse(true).getWriter();
                                writer.write("'0'");
                        } catch (Exception e1) {
                                e1.printStackTrace();
                        }
                }
        }
}

Nach ein paar Tipps

Im Grunde war Oben alles beschrieben,
was man für einen JavaScript XMLhttpRequest so braucht,
um eine JAVA Serverfunktion auf dem Webserver aufzurufen.

Je nach dem mit welchem System oder Programmiersprache man arbeitet,
könnten noch Zusatzanpassungen oder Libaries nötig sein.

Einen davon wäre zum Beispiel die Java Funktion doOnNodeReady
denn die wird noch vor dem doContent aufgerufen.

Hier wird quasi die Verbindung hergestellt
damit der XMLResponse auch weis,
wo in welche JavaScript Methode die Rückgabe der Werte erfolgen soll.

Weiter oben hatten wir ja bereits die MyAjaxUtil.js Libary erstellt,
welche nun hier wieder aufgerufen wird.

        public void doOnNodeReady(IPortalComponentRequest request, IEvent event) {
                 super.doOnNodeReady(request, event);
                 includeResource(request, request.getResource(".here project-folder path.", IResource.SCRIPT, "MyAjaxUtil.js"));
         }