JavaScript Ajax Funktionen: Unterschied zwischen den Versionen

Aus ITwiki
Wechseln zu: Navigation, Suche
K
 
(3 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 2: Zeile 2:
  
 
<source lang="Javascript">
 
<source lang="Javascript">
function XmlHttpObject() {
+
function XmlHttpObject()
 +
{
 
var xmlhttp=false;
 
var xmlhttp=false;
 
/*@cc_on @*/
 
/*@cc_on @*/
Zeile 8: Zeile 9:
 
// JScript gives us Conditional compilation, we can cope with old IE versions.
 
// JScript gives us Conditional compilation, we can cope with old IE versions.
 
// and security blocked creation of the objects.
 
// and security blocked creation of the objects.
try {
+
try
 +
{
 
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 +
}
 +
catch(e)
 +
{
 +
try
 +
{
 +
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 
}
 
}
catch(e){
 
try {
 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 
}
 
 
catch(E){xmlhttp = false;}
 
catch(E){xmlhttp = false;}
}
+
}
 
@end @*/
 
@end @*/
 
if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
 
if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
 
{xmlhttp = new XMLHttpRequest();}
 
{xmlhttp = new XMLHttpRequest();}
 
return xmlhttp;
 
return xmlhttp;
}
+
}
  
  
  
function EncodeUmlaute(string) {
+
function EncodeUmlaute(string)
 +
{
 
var a = new Array("ä", "%E4", "ö", "%F6", "ü", "%FC", "Ä", "%C4", "Ö", "%D6", "Ü", "%DC", "ß", "%DF");
 
var a = new Array("ä", "%E4", "ö", "%F6", "ü", "%FC", "Ä", "%C4", "Ö", "%D6", "Ü", "%DC", "ß", "%DF");
for(var i=0; i<a.length; i+=2) {
+
for(var i=0; i<a.length; i+=2)
while(string.indexOf(a[i])>-1) {
+
{
 +
while(string.indexOf(a[i])>-1)
 +
{
 
var p = string.indexOf(a[i]);
 
var p = string.indexOf(a[i]);
 
string = string.substr(0, p) + a[i+1] + string.substr(p+1, string.length);
 
string = string.substr(0, p) + a[i+1] + string.substr(p+1, string.length);
}
 
 
}
 
}
 +
}
 
return string;
 
return string;
}
+
}
 
 
  
  
function SendForm(callback, action) {
+
function SendForm(callback, action)
 +
{
 
var xml="", a = SendForm.arguments;
 
var xml="", a = SendForm.arguments;
  
Zeile 54: Zeile 62:
 
         xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
         xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
xmlhttp.send(xml.substring(0, xml.length-1));
 
xmlhttp.send(xml.substring(0, xml.length-1));
}
+
}
 
</source>
 
</source>
  
Zeile 75: Zeile 83:
  
 
</source>
 
</source>
 +
 +
Hier wird die Datei userlist.php mit den POST-Variablen <code>id=10</code> und <code>sort=asc</code> aufgerufen. Die Ausgabe der Datei wird über die Variable <code>res</code> in der Funktion <code>Ajax_callback(res)</code> zurückgegeben.
 +
 +
 +
[[Kategorie:JavaScript]]

Aktuelle Version vom 25. Februar 2010, 15:41 Uhr

Mit der Funktion SendForm() können URLs im Hintergrund abgerufen und deren Ausgabe über eine definierte Funktion verarbeitet werden.

function XmlHttpObject()
{
	var xmlhttp=false;
	/*@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')
		{xmlhttp = new XMLHttpRequest();}
	return xmlhttp;
}



function EncodeUmlaute(string)
{
	var a = new Array("ä", "%E4", "ö", "%F6", "ü", "%FC", "Ä", "%C4", "Ö", "%D6", "Ü", "%DC", "ß", "%DF");
	for(var i=0; i<a.length; i+=2)
	{
		while(string.indexOf(a[i])>-1)
		{
			var p = string.indexOf(a[i]);
			string = string.substr(0, p) + a[i+1] + string.substr(p+1, string.length);
		}
	}
	return string;
}
	


function SendForm(callback, action)
{
	var xml="", a = SendForm.arguments;

	for(var i=2; i<a.length; i+=2)
		xml = xml + a[i] +"="+ escape(a[i+1]) +"&";
	var xmlhttp = XmlHttpObject();
	xmlhttp.open("POST", action, true);
	xmlhttp.onreadystatechange = function()
		{
		if(xmlhttp.readyState==4 && xmlhttp.status==200 && callback!=null) {
			callback(xmlhttp.responseText);
			xmlhttp = null;
			}
		}
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlhttp.send(xml.substring(0, xml.length-1));
}

Aufbau der Funktion SendForm()[Bearbeiten]

  • Der erste Parameter definiert die Funktion, die den Rückgabewert verarbeitet.
  • Der zweite Parameter die URL, die abgerufen werden soll.
  • Alle weiteren Parameter bestimmen die anzuhängenden Post Variablen für die URL. Dabei wird erst der Name der Variable und dann der Wert angegeben. Die kann beliebig für mehrere Variablen wiederholt werden.


Hier ein Beispiel für die Verwendung[Bearbeiten]

SendForm(Ajax_callback, "userlist.php", "id", "10", "sort", "asc");

function Ajax_callback(res)
{
	alert(res);
}

Hier wird die Datei userlist.php mit den POST-Variablen id=10 und sort=asc aufgerufen. Die Ausgabe der Datei wird über die Variable res in der Funktion Ajax_callback(res) zurückgegeben.