Zur Navigation

Ajax: Daten per POST schicken

1 Tilman

Hallo, ich möchte auf meiner Webseite ein Feld, wo man eine kurze Nachricht eingeben kann. Allerdings sollen die Daten mit Ajax verschickt werden, damit die Site nicht extra neu geladen werden muss. Dafür habe ich schon auf http://www.php.de/html-usability-und-barrierefreiheit/44838-ajax-open-mit-post-und-get.html einen Code dazu gefunden. Soviel, wie ich davon verstanden habe, müsste der Code jetzt so aussehen (Die Variable MyName heißt bei mir message):
var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject()
{
        var xmlHttp;

        // IE
        if(window.ActiveXObject)
        {
                try
                {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                        xmlHttp = false;
                }

        } else {
                // other
                try
                {
                        xmlHttp = new XMLHttpRequest();
                } catch (e) {
                        xmlHttp = false;
                }
        }

        if(!xmlHttp)
                alert("Error creating the XMLHttpRequest object.");
        else
                return xmlHttp;
}

function process()
{
        // 0 - uninitialized
        // 1 - loading
        // 2 - loaded
        // 3 - interactice
        // 4 - complete

        if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
        {
                name = encodeURIComponent(document.getElementById("message").value);
param='name=' + name;
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.open("POST", "quickstart.php"+'?'+Math.random(), true);

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", param.length);
xmlHttp.setRequestHeader("Connection", "close");

// make the server request
xmlHttp.send(param);
        } else
                setTimeout('process()', 1000);
}

function handleServerResponse()
{
        if(xmlHttp.readyState == 4)
        {
                if(xmlHttp.status == 200)
                {
                        xmlResponse = xmlHttp.responseText;
//                        xmlDocumentElement = xmlResponse.documentElement;
//                        helloMessage = xmlDocumentElement.firstChild.data;
                        document.getElementById("divMessage").innerHTML = '' + xmlResponse + '';
                        setTimeout('process()', 1000);
                } else {
                        alert("There was a problem accessing the server: " + xmlHttp.statusText);
                }
        }
}

Leider funktioniert der Code nicht...

19.04.2009 15:49

2 Jörg

Wie sieht denn das Formular dazu aus?

Und was heißt "funktioniert nicht" - kommt nichts an? gibt die JavaScript-Konsole Fehler aus?

19.04.2009 16:46

3 Tilman

Oh, ich habe den Code jetzt noch mal neu an mein Projekt angepasst... Geht jetzt :-)

Allerdings läuft das Script weiter. Ich würde aber gerne wollen, dass das Script nach Empfangen der PHP-Daten stoppt. Wie kann ich das machen?

19.04.2009 17:23

4 Jörg

Wie wird das Script denn aufgerufen, d.h. wie sieht das betreffende Formular aus?

19.04.2009 18:03

5 Tilman

Es ist eigentlich kein richtiges Formluar, nur ein Textfeld:
 <input type="text" id="message" onkeydown="return controlSN(event);" maxlength="150">

Die Funktion controlSN:
function controlSN(event) {
keycode = event.keyCode;

         if (keycode == 13 || keycode == 76) {
         process();
         }
}

20.04.2009 14:01

6 Jörg

Was sendet quickstart.php denn als Antwort?

20.04.2009 14:36

7 Tilman

quickstart.php sendet die richtige Antwort. Also da klappt alles. Aber das Script läuft weiter :-(

20.04.2009 15:10

8 Jörg

Du rufst nach dem Empfang der Antwort process() erneut auf:

function handleServerResponse()
{
        if(xmlHttp.readyState == 4)
        {
                if(xmlHttp.status == 200)
                {
                        xmlResponse = xmlHttp.responseText;
//                        xmlDocumentElement = xmlResponse.documentElement;
//                        helloMessage = xmlDocumentElement.firstChild.data;
                        document.getElementById("divMessage").innerHTML = '' + xmlResponse + '';
                        setTimeout('process()', 1000);
                } else {
                        alert("There was a problem accessing the server: " + xmlHttp.statusText);
                }
        }
}

20.04.2009 15:41

9 Tilman

Ja, danke, funktioniert jetzt.

Allerdings habe ich ein Problem mit Sonderzeichen: Z.B. Die Eingabe München wird als München ausgegeben. Wie kann man dieses Problem lösen?

20.04.2009 19:16

10 Jörg

Wo kommt das "München" denn her - vom Server?

Du musst halt schauen, in welchem Zeichensatz der Server die Daten überträgt und gegebenfalls in den Zeichensatz, den die HTML-Seite verwendet, konvertieren

20.04.2009 22:17 | geändert: 20.04.2009 22:20