Tutorial PHP Ajax cu exemplu
Fiona Brown
Ce este Ajax?
AJAX forma completฤ este asincronฤ JavaScenariu & XML. Este o tehnologie care reduce interacศiunile dintre server ศi client. Face acest lucru actualizรขnd doar o parte a unei pagini web ศi nu รฎntreaga paginฤ. Interacศiunile asincrone sunt iniศiate de JavaScript. Scopul AJAX este de a schimba cantitฤศi mici de date cu serverul fฤrฤ reรฎmprospฤtare a paginii.
JavaScenariu este un limbaj de scripting pe partea clientului. Este executat pe partea client de cฤtre browserele web care acceptฤ JavaScenariul.JavaCodul de script funcศioneazฤ numai รฎn browserele care au JavaScriptul activat.
XML este acronimul pentru Extensible Markup Language. Este folosit pentru a codifica mesaje atรขt รฎn โโformate care pot fi citite de om, cรขt ศi de maศinฤ. Este ca HTML, dar vฤ permite sฤ vฤ creaศi etichete personalizate. Pentru mai multe detalii despre XML, consultaศi articolul despre XML
De ce sฤ folosiศi AJAX?
- Permite dezvoltareaping aplicaศii web interactive bogate, la fel ca aplicaศiile desktop.
- Validarea poate fi efectuatฤ pe mฤsurฤ ce utilizatorul completeazฤ un formular fฤrฤ a-l trimite. Acest lucru poate fi realizat folosind completarea automatฤ. Cuvintele pe care utilizatorul le introduce sunt trimise serverului pentru procesare. Serverul rฤspunde cu cuvinte cheie care se potrivesc cu ceea ce a introdus utilizatorul.
- Poate fi folosit pentru a completa o casetฤ derulantฤ รฎn funcศie de valoarea unei alte casete derulante
- Datele pot fi preluate de pe server ศi doar o anumitฤ parte a paginii poate fi actualizatฤ fฤrฤ a รฎncฤrca รฎntreaga paginฤ. Acest lucru este foarte util pentru pฤrศile paginii web care รฎncarcฤ lucruri precum
- Tweets
- Felicitari
- Utilizatorii care viziteazฤ site-ul etc.
Cum se creeazฤ o aplicaศie PHP Ajax
Vom crea o aplicaศie simplฤ care permite utilizatorilor sฤ caute cadre populare PHP MVC.
Aplicaศia noastrฤ va avea o casetฤ de text pe care utilizatorii o vor introduce รฎn numele cadrului.
Apoi vom folosi mvc AJAX pentru a cฤuta o potrivire, apoi vom afiศa numele complet al cadrului chiar sub formularul de cฤutare.
Pasul 1) Crearea paginii de index
index.php
<html>
<head>
<title>PHP MVC Frameworks - Search Engine</title>
<script type="text/javascript" src="auto_complete.js"></script>
</head>
<body>
<h2>PHP MVC Frameworks - Search Engine</h2>
<p><b>Type the first letter of the PHP MVC Framework</b></p>
<form method="POST" action="index.php">
<p><input type="text" size="40" id="txtHint" onkeyup="showName(this.value)"></p>
</form>
<p>Matches: <span id="txtName"></span></p>
</body>
</html>
AICI,
- โonkeyup="showName(this.value)โโ executฤ JavaFuncศia de script showName de fiecare datฤ cรขnd o tastฤ este introdusฤ รฎn caseta de text. Aceastฤ caracteristicฤ se numeศte completare automatฤ
Pasul 2) Crearea paginii de cadre
cadre.php
<?php
$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;
$name = $_GET["name"];
if (strlen($name) > 0) {
$match = "";
for ($i = 0; $i < count($frameworks); $i++) {
if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {
if ($match == "") {
$match = $frameworks[$i];
} else {
$match = $match . " , " . $frameworks[$i];
}
}
}
}
echo ($match == "") ? 'no match found' : $match;
?>
Pasul 3) Crearea scriptului JS
auto_complete.js
function showName(str){
if (str.length == 0){ //exit function if nothing has been typed in the textbox
document.getElementById("txtName").innerHTML=""; //clear previous results
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("txtName").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","frameworks.php?name="+str,true);
xmlhttp.send();
}
AICI,
- โdacฤ (lungimea str. == 0)โ verificaศi lungimea ศirului. Dacฤ este 0, atunci restul scriptului nu este executat.
- โdacฤ (window.XMLHttpRequest)โฆโ Internet Explorer versiunile 5 ศi 6 folosesc ActiveXObject pentru implementarea AJAX. Alte versiuni ศi browsere precum Chrome, FireFox utilizaศi XMLHttpRequest. Acest cod va asigura cฤ aplicaศia noastrฤ funcศioneazฤ atรขt รฎn โโIE 5 ศi 6, cรขt ศi รฎn alte versiuni รฎnalte de IE ศi browsere.
- โxmlhttp.onreadystatechange=functionโฆโ verificฤ dacฤ interacศiunea AJAX este completฤ ศi starea este 200, apoi actualizeazฤ intervalul txtName cu rezultatele returnate.
Pasul 4) Testarea aplicaศiei noastre PHP Ajax
Presupunรขnd cฤ aศi salvat fiศierul index.php รฎn phututs/ajax, navigaศi la URL http://localhost/phptuts/ajax/index.php
Introdu litera C รฎn caseta de text Veศi obศine urmฤtoarele rezultate.
Exemplul de mai sus demonstreazฤ conceptul AJAX ศi modul รฎn care acesta ne poate ajuta sฤ creฤm aplicaศii de interacศiune bogate.
Rezumat
- AJAX este acronimul pentru Asynchronous JavaScenariu ศi XML
- AJAX este o tehnologie folositฤ pentru a crea aplicaศii de interacศiune bogate care reduc interacศiunile dintre client ศi server prin actualizarea doar a unor pฤrศi ale paginii web.
- Internet Explorer versiunile 5 ศi 6 utilizeazฤ ActiveXObject pentru a implementa operaศiunile AJAX.
- Internet Explorer versiunea 7 ศi mai sus ศi browserele Chrome, Firefox, Operaศi Safari folosesc XMLHttpRequest.
