AJAX is a link between your browser and the server.
With this technology we can exchange parts of a webpage whithout reloading the whole page.
AJAX means
Asyncronous
Javascript
And
XML
This technology is used by search engines.
After entering a few letters, you get the first results.
As the name sugests, you need a Javascript.
Here is a example:
<script type="text/javascript">
<!--
function ajaxFunction(){
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
var ajaxDisplay = document.getElementById('status');
if(ajaxRequest.readyState == 3){
ajaxDisplay.innerHTML = "Moment bitte ...";
}
if(ajaxRequest.readyState == 2){
ajaxDisplay.innerHTML = "Moment bitte ...";
}
if(ajaxRequest.readyState == 1){
ajaxDisplay.innerHTML = "Moment bitte ...";
}
if(ajaxRequest.readyState == 0){
ajaxDisplay.innerHTML = "Moment bitte ...";
}
}
var name = document.getElementById('name').value;
var password = document.getElementById('password').value;
var queryString = "?name=" + name + "&password=" + password ;
ajaxRequest.open("GET", "_ajax.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
You must include this script in the header of the webpage.
Next you need a form on your webpage:
<div id='ajaxDiv' align="center">
<form id="form1" name="form1" method="post" action="">
Name <input type="text" size="50" name="name" id="name" />
<br />
Password <input name="password" type="password" id="password" size="30" />
<div id="status">
<input type="submit" name="senden" id="senden" value="senden" onclick='ajaxFunction()'/>
</div>
</form>
It is important that the form is included in the Container ajaxDiv.
The second container Container status hides the send-Button
until the request is treated on the server.
Here you can test it:
Finally you ned a file to treat the request, here it is called _ajax.php
The fomrcontent is sent to this file and treated.
Finally the file sends back the answer.
Here is _ajax.php:
<?PHP
$antwort = "";
$name = $_GET["name"];
$passwort = $_GET["password"];
if (trim($name) == "") {
$antwort .= "<br />You did not give a name.";
} else {
$antwort .= "<br />Yor name is ".$name;
}
if (trim($passwort) == "") {
$antwort .= "<br />You did not give a password.";
} else {
$antwort .= "<br />The password is ".$passwort;
}
echo $antwort;
?>
FFor more information please
contact us.