Yaslaw.Info

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

======[PHP] Ajax======
Dieses Beispiel zeigt 2 Textboxen. Wenn in der ersten ein Text eingegeben wird, wird er zugleich in der Zweiten gross geschrieben ausgegeben. Die Umwandlung selber findet in PHP statt. Dort könnte man auch auf eine DB zugreifen oder sonst was PHP-typisches machen.

Hier eine [[http://yaslaw.info/example/ajax/ajax_f1.html Demo]] des Scriptes

====Die HTML-Datei====
<code html4strict ajax_f1.html>		
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ajax - PHP example</title>
	</head>
	<body>
		<!-- hier wird die Scriptdatei eingebunden -->
		<script type="text/javascript" src="ajax_f1.js"></script>
		<div id="error">
		</div>
		<form name="testForm">
			<!-- beim Evwent onkeyup wird die javascriptfunktion doWork() aufgerufen -->
			Input text: <input type="text" onkeyup="doWork('inputText', 'outputText');" 
				name="inputText" id="inputText" />
			Output text: <input type="text" name="outputText" id="outputText" />
		</form>
	</body>
</html>
</code>

====Javascript (Browserseitige verarbeitung des Scriptes)====
<code javascript ajax_f1.js>
// Get the HTTP Object
function getHTTPObject(){
	if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
	else if (window.XMLHttpRequest) return new XMLHttpRequest();
	else {
		alert("Your browser does not support AJAX.");
		return null;
	}
}
// Change the value of the outputText field
function setOutput(){
	if(httpObject.readyState == 4){
		document.getElementById(tagId).value = httpObject.responseText;
	}
}
// Implement business logic
function doWork(arg, inTagId){
	httpObject = getHTTPObject();
	tagId = inTagId;
	if (httpObject != null) {
		//php-Datei auf dem Server aufrufen
		httpObject.open("GET", "ajax_f1_server.php?" + arg + "=" + document.getElementById('inputText').value, true);
		httpObject.send(null);
		httpObject.onreadystatechange = setOutput;
	}
}

var httpObject = null;
</code>

====PHP Datei (serverseitige Verarbeitung des Scriptes)====
<code php ajax_f1_server.php>
<?php
	//Rückgabewert mit einem echo() zurückgeben
	if (isset($_GET['inputText'])) echo strtoupper($_GET['inputText']);
?>
</code>
{{tag>PHP Ajax Javascript}}
Yaslaw.Info

User Tools

Site Tools

Page Tools
