PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : AJAX und ü etc.

ravage
2009-07-07, 10:40:51
Moin.

Ich habe ein eigenes Gästebuch, dass komplett ohne javascript auskommt.

Jetzt bin ich grad dabei das ding auf links zu ziehen (Web 2.0 und AJAX und so ;))

Zuerst mal: Es funktioniert soweit alles, nur nicht wie es soll.

Zur erklärung: In der Eingabemaske des Gästebuchs gibt es eine Textbox in der die Nachricht eingegeben werden kann. Aus dieser Textbox wird durch das Javascript tool tinyMCE ein kleiner editor. Dieser wandelt automatisch ein eingegebenes "ö" in "ö" um, was ja erst mal kein Problem ist. Beim betätigen des "Abschicken" Buttons wird das Formular nicht wie normal üblich abgeschickt (submit) sondern es wird eine Javascript funktion aufgerufen. In dieser Funktion hole ich mir den Inhalt der Textbox und speicher diesen in eine Variable .
var gb_main = document.editForm.gb_main.value;In dieser Variable ist auch der komplette Inhalt der Textbox vorhanden. Hätte ich also zb. "test ö test" eingegeben, würde in der Variable gb_main jetzt "<p>test &ouml; test</p>" stehen.

Jetzt kommt der AJAX Teil: Ich erzeuge ein XMLHttpRequestObject mit dem Namen resObjekt und übergebe den Inhalt der Variable gb_main (und noch ein paar andere Variablen) per "GET" an eine PHP Datei.
resObjekt.open('get', 'gbook_ajax.php?task=editSQL&gb_id='+gb_id+'&gb_autor='+gb_autor+'&gb_hp='+gb_hp+'&gb_email='+gb_email+'&gb_main='+gb_main+'&gb_date='+gb_date, true);
resObjekt.onreadystatechange = handleResponse5;
resObjekt.send(null);

In der PHP Datei "gbook_ajax.php" kann ich auch auf alle übergebenen Variablen zugreifen. Nur der Inhalt der Variable "$_GET[gb_main]" ist jetzt nicht mehr "<p>test &ouml; test</p>" sondern nur noch "<p>test "

Muss ich die Umlaute ( &ouml; ) vor dem abschicken mit GET irgendwie maskieren oder in eine andere Form bringen?
ravage
2009-07-07, 10:43:42
Mal ein Test:

http://ravage.dyndns.org/javascript.test.php

javascript.test.php:
<html>
<head>
<script language="javascript">
<!--
function erzXMLHttpRequestObject() {
var resObjekt = null;
try {
resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(Error) {
try {
resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
}
catch(Error) {
try {
resObjekt = new XMLHttpRequest();
}
catch(Error) {
alert( "Erzeugung des XMLHttpRequest-Objekts ist nicht möglich");
}
}
}
return resObjekt;
}

resObjekt=erzXMLHttpRequestObject();

function test() {
var text = document.test1.text1.value;
alert( text );
resObjekt.open('get', 'javascript.test.2.php?text1='+text, true);
resObjekt.onreadystatechange = handleResponse;
resObjekt.send(null);
}


function handleResponse() {
if(resObjekt.readyState == 4) {
document.getElementById("ausgabe1").innerHTML = resObjekt.responseText;
document.getElementById("text1").value = "";
}
}
//-->
</script>
</head>
<body>
<form method="get" action="javascript.test.php" name="test1">
<input name="text1" id="text1" type="text">
<input type="submit" value="Mit submit">
<input type="button" value="Mit Javascript" onClick="test()">
</form>
<textarea id="ausgabe1"><?php echo $_GET['text1'] ?></textarea>
</body>
</html>

javascript.test.2.php:
<?php
echo $_GET['text1'];
?>

Das gleiche Problem, sobald man die Daten per Javascript abschickt.

/EDIT:
Ich seh grad, der Submit Button macht aus dem "&ouml;" ein "%26ouml%3B". Ich denk mal die Umwandlung werd ich mit Javascript selbst machen müssen.
The_Invisible
2009-07-07, 11:01:26
& ist ein trennzeichen für GET variablen, damit dürfte das klar sein.

ich würde die daten zudem per POST versenden (bei GET gibts ein limit der parameter und größe) sowie mit encodeURIComponent() maskieren.

ich habe dazu selbst ne kleine javascript klasse geschrieben falls es dir interessiert, gibt natürlich auch große frameworks die ich für meine bisherigen projekte aber zu oversized waren.


function objAjax(url, funcCallback)
{
var keys = new Array();
var values = new Array();

var xmlgw = url;
var xmlhttp = false;
var callback = funcCallback || null;

this.status = 0;
this.objData = null;
this.finished = 0;
var that = this;

function init()
{
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}
}

init();

this.get = function(v)
{
return eval(v);
}

this.add_param = function(key, value)
{
keys.push(key);
values.push(value);
}

this.build_param_url = function()
{
data = "";

for(i=0; i<keys.length; i++)
{
data += keys[i] + "=" + encodeURIComponent(values[i]) + "&";
}

return data;
}

this.query = function()
{
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Pragma", "no-cache");
xmlhttp.setRequestHeader("Cache-Control", "must-revalidate");
xmlhttp.setRequestHeader("If-Modified-Since", document.lastModified);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
that.finished = 1;
that.status = xmlhttp.status;
that.objData = JSON.parse(xmlhttp.responseText);

if(callback)
{
callback(that, xmlhttp.status, JSON.parse(xmlhttp.responseText));
}
}
}
xmlhttp.send(this.build_param_url());
}
}


verwendung zb:


ajax = new objAjax("gb_add.php", callbackFunction);
ajax.add_param("name", "bla");
ajax.add_param("text", "blablabla");
ajax.query();


mfg
ravage
2009-07-07, 11:12:54
encodeURIComponent() war genau das, was gefehlt hat. Danke!

Ich habe das ganze auch schon versucht mit POST zu schicken, aber ohne encodeURIComponent() hatte ich das gleiche Problem. :)