XmlHttp Request (AJAX) (как да обновяваме страницата без Refre
Този урок цели да ви покаже възможностите на XMLHTTPRequest заявката, която позволява обновяването на една страница в реално време. В интернет има доста информация по въпроса, но рядко е изчерпателна. Този стил на писане на страници се е отделил с името AJAX, което означава А-синхронен Javascript и XML и както говори името - страниците ви се обновяват а-синхронно, което на прост език значи, че си променят съдържанието без да се налага да ги презареждате по един или друг начин.

Това е файла INDEX.HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>XML HTML Request using GET method</title>
<style type="text/css">
/* nalko CSS za krasota ;) */
body { background-color: #CCCCCC; color: black; cursor: default; }
table { border-style: solid; border: 1px; border-color: black; border-collapse: collapse;}
#data { border: 1px; border-color: black; border-style: solid; padding: 10px 10px; cursor: crosshair; }
#btnSend { color: black; background-color: #CCCCCC; }
#btnSend:hover { background-color: #EEEEEE; color: navy; cursor: pointer; }
#btnSenf:active { background-color: #AAAAAA; color: red; }
input { color: white; background-color: black; border-color: white; border-style: solid; border-width: 1px; }
</style>

<script type="text/javascript">
<!--
//script-a, deto vur6i cqlata rabota
var xmlHttp = newXmlHttpObject(); //suzdavame obekta za vruzka 4rez funkciq, definiran po-dolu;

function sendData() //funkciqta za izpra6tane na zaqvkata
{
var x=document.fm1.tx.value; // vzimame ot form "fm1" ot text ople "tx" sotinostta, za da q izpolzvame v zaqvkata
var y=document.fm1.ty.value; // vzimame ot form "fm1" ot text ople "ty" sotinostta, za da q izpolzvame v zaqvkata
var url="data.php"; //tova e skripta za kartata
url=url+"?x="+x; //tova e ediniq parametur
url=url+"&y="+y; //tova e drugiqt parametur
xmlHttp.onreadystatechange=stateChanged(); //nastroivame funciq, koqto 6te obraboti dannite pri pristiganeto im
xmlHttp.open("GET", url, true); // zadavame METHOD na zaqvkata GET, davame adresa na skripta, koito 6te prieme zaqvkata i poslednata stoinost opredelq dali dannite 6te se izpra6tat a-sinhronno (true zna4i, 4e 6te se izprati vednaga)
xmlHttp.send(null); //izpra6tame zaqvkata
}

function stateChanged() //funkciqta, koqto obrabotva subitiqta na XML HTTP obekta
{
if (xmlHttp.readyState==4) //provarqvame dali sme polu4ili informaciq ot servera
{
document.getElementById('data').innerHTML = xmlHttp.responseText; //elementa s ID=data 6te suhranqva suhranqva rezultata ot skripta data.php
}
}

function newXmlHttpObject() //tova e funkciqta, koqto suzdava XML HTTP obekta
{
var XMLHTTP;
try
{
// Firefox, Opera 8.0+, Safari
XMLHTTP=new XMLHttpRequest(); //opitvame da suzdadem obekta za browser-ite Firefox, Opera 8.0+ i safari
}
catch (e)
{
// Internet Explorer
try
{
XMLHTTP=new ActiveXObject("Msxml2.XMLHTTP"); //ako ne stane, opitvame da go suzdadem za IE6 ili po-nov
}
catch (e)
{
XMLHTTP=new ActiveXObject("Microsoft.XMLHTTP"); //ako pak ne sme uspeli, se opitvame da go suzdadem za IE5.5, Ako brawsera e po-star, toi ne podurja tozi metod na komunikaciq
}
}
return XMLHTTP; //Vru6tame novosuzdadeniq obekt, za da go prisvoim na nqkoq promenliva i da go izpolzvame
}
-->
</script>
</head>
<body>
<form name="fm1"> <!-- tova e formata, ot koqto 6te doidat dannite -->
X:<input type="text" name="tx" size="1" value="1" /><br /> <!-- tova e poleto za 1vi parameter -->
Y:<input type="text" name="ty" size="1" value="3" /> <!-- tova e poleto za 2ri parameter -->
<input type="button" id="btnSend" value="send" onmousedown="sendData();" onmouseup="sendData();" /> <!-- tova e butona, koito vika funkciqta za izpra6tane kum servera. za sujalenie se okaza, 4e ne stava, ako ne sa i onmousedown i onmouseup zaedno, ako ne sa trqbva da se ckune dva puti (BUG ?! :( ) -->
</form><br />
<span id="data">Click on "send" to get the secret letter from coordinates XY</span><br /> <!-- tozi SPAN s ID=data 6te sudurja koda (HTML kod), koito e vurnal servera -->
</body>
</html>


Сега следва скипте, който ще дава данните: data.php
<?php
if( isset($_GET['x']) && isset($_GET['y']) ) //proverqvame, dali sa dadeni i dvata parametera
{
$x=$_GET['x'];
$y=$_GET['y'];
}
else
die("Incorrect working parameters (X,Y)"); //vru6tame gre6ka, 4e ne sa podadeni i dvata parametura

if( ($x>=1 && $x<=3) && ($y>=1 && $y<=3) ) // proverqvame dali X i Y sa v dopustistimite si stoinosti
{
$data = array( //tuk suzdavame edin masiv za da probvame cqlata tazi istoriq dali e istina ;)
"11"=>"a", "12"=>"b", "13"=>"c",
"21"=>"d", "22"=>"e", "33"=>"f",
"31"=>"g", "32"=>"h", "33"=>"i"
);

$xy=$y.$x; // slepqvame X i Y, za6toto indeksite v masiva ni sa ot dve cifri
echo $data[$xy]; //vru6tame informaciqta na stranicata podetel (vsu6nost q izvejdame na ekrana)
}
else echo "X and/or Y are out of range!\n"; //vru6ame saob6tenie za gre6ka
?>


Урока не е 100% авторски, аз просто събрах парчетата, които намирах и написах коментарите

Ето и демо

името на линка

/ Трябва да сте регистриран за да напишете коментар /