✔ AJAX liefert html und Javascript zurück und das JS soll sofort ausgeführt werden.

Hi,

bereite die Daten auf der Serverseite als JSON-String auf. Diesen kannst du clientseitig in ein Objekt überführen und auf die einzelnen Komponenten zugreifen und deren Inhalt in die Textfelder eintragen.

HTML-Dokument:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var objRequest = false;

function instanceRequest(){
  if(window.XMLHttpRequest){
    objRequest = new XMLHttpRequest();
  }else if(window.ActiveXObject){
    try{
     objRequest = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
      try{
      	objRequest = new ActiveXObject("Microsoft.objRequest");
      }catch(e){}
    }
  }

  if(!objRequest){
    alert('Es konnte keine XMLHTTP-Instanz erzeugt werden!');
    return false;
  }
}


function theRequest(intID) {
  if(!objRequest){
    instanceRequest();
  }

  objRequest.open('GET', 'json.php?id='+intID+'&'+new Date().getTime(), true);

  self.objRequest.onreadystatechange = function(){
    if(objRequest.readyState == 4){
      if(objRequest.status == 200){
        var strEval = unescape(objRequest.responseText);
        var objEval = eval("("+strEval+")");
        document.getElementById("txtName").value = (objEval['name']);
        document.getElementById("txtOrt").value = (objEval['ort']);
        document.getElementById("txtTel").value = (objEval['tel']);
      }else{
        alert("Anfrage nicht erfolgreich!");
      }
    }
  }
  objRequest.send(null);
}
 //-->
</script>
</head>
<body>
<button onclick="theRequest(0);">0</button>
<button onclick="theRequest(1);">1</button>
<form id="formID" method="" action="">
  <select onchange="theRequest(this.options[this.selectedIndex].value);">
    <option value="0">- wählen -</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select><br>
  Name: <input type="text" name="txtName" id="txtName" value=""><br>
  Ort: <input type="text" name="txtOrt" id="txtOrt" value=""><br>
  Telefon: <input type="text" name="txtTel" id="txtTel" value=""><br>
</form>
</body>
</html>
Serverseitiges Dokument - json.php:
Code: 
$arrData = array();
$arrData[0] = array('name'=>'', 'ort'=>'', 'tel'=>'');
$arrData[1] = array('name'=>'Alfred', 'ort'=>'Augsburg', 'tel'=>'12345');
$arrData[2] = array('name'=>'Berthold', 'ort'=>'Berlin', 'tel'=>'67890');

$strRet = "{";
foreach($arrData[$_GET['id']] as $strKey => $strEntry){
  $strRet .= "".$strKey.": '".$strEntry."',";
}

$strRet = substr($strRet, 0, strlen($strRet)-1) . "}";
echo(rawurlencode($strRet));
Ich hoffe, du kannst damit etwas anfangen.

Ciao
Quaese
 
Hallo

ich habe es jetzt hiermit mal versucht:

HTML: 
function theRequest(intID) 
{
  alert(intID);
  
  if(!objRequest)
  {
      alert("2");
    instanceRequest();
  }
  alert("3");
  objRequest.open('GET', 'IT/json.php?id='+intID+'&'+new Date().getTime(), true);

  self.objRequest.onreadystatechange = function(){
    if(objRequest.readyState == 4){
      if(objRequest.status == 200){
        var strEval = unescape(objRequest.responseText);
        var objEval = eval("("+strEval+")");
        document.getElementById("txtName").value = (objEval['name']);
        document.getElementById("txtOrt").value = (objEval['ort']);
        document.getElementById("txtTel").value = (objEval['tel']);
      }else{
        alert("Anfrage nicht erfolgreich!");
      }
    }
  }
  objRequest.send(null);
}

ich komme zwar in die function rein und kann die id ausgeben mit alert(intID);

aber zum zwieten und driten alert komme ich nicht. Wo kann dann ein Fehler vorkommen? oder kann man solche Scripte irgendwie anders debuggen?

grüsse
 
Quaese hat gesagt.:
Hi,

ich hab etwas mit dem Script von Sven experimentiert, mit folgendem Ergebnis:

Der IE hat offensichtlich nur dann Probleme, wenn der zurückkommende String mit einem script-Tag beginnt. In diesem Fall ist die innerHTML-Eigenschaft des Hilf-DIVs leer.

Als Lösung habe ich einfach ein br-Element an den Anfang des Hilfselements gesetzt und es hat zumindest in meinen Tests (IE6 und IE7) funktioniert.
Zum Vergrößern anklicken....

Die Probleme mit den Script Tags hatte ich auch bereits einmal , zwar nicht mit Sven Mintels funktion dafür traten die ab und zu auch mal im FF, IE und ab und zu im Safari. Nicht immer komischer weise aber ab und zu. Opera lief bis dato alles glatt aber man sollte es nicht unbedingt herrausfordern.

Nachdem man die Elemente eingebunden hatte mittels innerHTML waren sie auf einmal einfach weg. Also hatte ich die Lösung gewählt den Rückgabe String nach Script Tags zu parsen und diese Strings in den zeichenketten in einen String abzuspeichern und dann auszuführen.

Das \r\n hab ich mal aus Testgründen mit reingehaun um Zeilenumbrüche zu bekommen.

Code: 
<html>
<head>
<script type="text/javascript">

// Test String
var s = "<script type='text\/javascript'>alert('hallo welt');<\/script>"+
		"<script type='text\/javascript'>\r\n"+
		"if(Math.round(Math.random()*10) >= 5) { \r\n"+
		"    alert('hach sehr gut')\r\n"+
		"} else { \r\n"+
		"    alert('hach habe schon bessere Tage gesehen');\r\n"+
        "}\r\n"+	
		"<\/script>\r\n"+
		"<div>na dann</div>\t\t";

function parseScripts (string) {
	var scriptPattern = "(?:<script[^>]+>)((?:\r|\n|.)*?)(?:<\/script>)";
	var scripts = string.match(new RegExp(scriptPattern,"gi"));
	
	var evalScripts = "";
	
	for(var i = 0 ; i < scripts.length;i++) {
		evalScripts += scripts[i].match(new RegExp(scriptPattern,"i"))[1];
	}
	
	/*
	* script Tags noch entfernen
	* sowie leerzeichen und überflüssige Zeilenumbrüche entfernen
	*/
	string = string.replace(new RegExp(scriptPattern,"gi"),"");
	string = string.replace(/^[\r\n\s]+/g,"");
	string = string.replace(/[\r\n\s]+$/g,"");
	
	return [string,evalScripts];
}

window.onload = function () {
	var newContent = parseScripts(s);
	document.getElementById('test').innerHTML = newContent[0];
	eval(newContent[1]);
}

</script>
</head>
<body>
	<div id="test"></div>
</body>
</html>

@torkel
Wenn das alert("2") schon mal nicht kommt wird der Request schon existieren. Warum dann alert("3") nicht ausgeben wird kA. Der Code scheint auf den ersten Blick in Ordnung zu sein sehe da nun nix. Hast irgendwelche Fehler meldungen in der Konsole ?

Sollten es Syntax Fehler sein müsste er das Script sofort anhalten , also Klammer nicht geschlossen oder ähnliches. Also kann es nur noch bei der Abfrage if(!objRequest) rausfliegen das die Variable gar nicht definiert ist.

Bevorzugt nehme ich da Firebug das Addon für den Firefox.
 
Zuletzt bearbeitet:
Hallo

danke für die Info mit dem Firebug.

bekomme diesen Fehler in der Konsole:

objRequest is not defined
if(!objRequest)

Grüsse
 
Hi,

hast du objRequest wie in meinem Beispiel auf globaler Ebene deklariert?
Code: 
var objRequest = false;
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück