Kod
//Plik index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax</title>
<script type="text/javascript">
function getXMLHttpRequestObject()
{
try{
return new XMLHttpRequest();
}
catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
return false;
}
}
}
function pobierzDane()
{
if(XMLHttpRequestObject){
var div = document.getElementById("warstwaDanych");
var przyciskEl = document.getElementById("bWyslij");
var tekst1 = document.getElementById("tf1").value;
var tekst2 = document.getElementById("tf2").value;
tekst1 = escape(tekst1);
tekst2 = escape(tekst2);
var str = "tekst1=" + tekst1 + "&tekst2=" + tekst2;
przyciskEl.disabled = true;
XMLHttpRequestObject.open("POST", "dane.php");
XMLHttpRequestObject.setRequestHeader(
'Content-Type', 'application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4){
if(XMLHttpRequestObject.status == 200){
var tekst = "Dane odebrane z serwera: ";
tekst += XMLHttpRequestObject.responseText;
div.innerHTML = tekst;
}
przyciskEl.disabled = false;
}
}
XMLHttpRequestObject.send(str);
}
}
var XMLHttpRequestObject = getXMLHttpRequestObject();
</script>
</head>
<body>
<div id="warstwaDanych">
<input type="text" id="tf2" />
<input type="button" value="Wyślij"
onclick="pobierzDane();" id="bWyslij" />
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax</title>
<script type="text/javascript">
function getXMLHttpRequestObject()
{
try{
return new XMLHttpRequest();
}
catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
return false;
}
}
}
function pobierzDane()
{
if(XMLHttpRequestObject){
var div = document.getElementById("warstwaDanych");
var przyciskEl = document.getElementById("bWyslij");
var tekst1 = document.getElementById("tf1").value;
var tekst2 = document.getElementById("tf2").value;
tekst1 = escape(tekst1);
tekst2 = escape(tekst2);
var str = "tekst1=" + tekst1 + "&tekst2=" + tekst2;
przyciskEl.disabled = true;
XMLHttpRequestObject.open("POST", "dane.php");
XMLHttpRequestObject.setRequestHeader(
'Content-Type', 'application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4){
if(XMLHttpRequestObject.status == 200){
var tekst = "Dane odebrane z serwera: ";
tekst += XMLHttpRequestObject.responseText;
div.innerHTML = tekst;
}
przyciskEl.disabled = false;
}
}
XMLHttpRequestObject.send(str);
}
}
var XMLHttpRequestObject = getXMLHttpRequestObject();
</script>
</head>
<body>
<div id="warstwaDanych">
<input type="text" id="tf2" />
<input type="button" value="Wyślij"
onclick="pobierzDane();" id="bWyslij" />
</div>
</body>
</html>
wysyła on formularz typu Post i pole tekstowe zostaje zastąpione danymi otrzymanymi z serwera. Wszystko działa w porządku i bez problemów. Niestety jest malutki problem. Po kliknieciu w wyślij (w formularzu) pole staje się nieaktuwne a my bezczynnie czekamy na odp. Serwera. Czy da radę zrobić tak, aby po wysłaniu formularzu i w oczekiwaniu na uzyskanie danych, my będziemy widzieć dowolny tekst (wczytuje...)?
