AJAX PHP


Innehållsförteckning

    Visa innehållsförteckning


AJAX används för att skapa mer interaktiva applikationer.


AJAX PHP exempel

Följande exempel visar hur en webbsida kan kommunicera med en webbserver medan en användare skriver tecken i ett inmatningsfält:

Exempel

Börja skriva ett namn i inmatningsfältet nedan:

Suggestions:

First name:


Exempel förklarat

I exemplet ovan, när en användare skriver ett tecken i inmatningsfältet, en funktion anropad showHint() exekveras.

Funktionen utlöses av händelsen onkeyup.

Här är koden:

Exempel

<p>Start typing a name in the input field below:</p>
<p>Suggestions: <span id="txtHint"></span></p>

<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>

<script>
function showHint(str) {
  if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onload = function() {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  xmlhttp.open("GET", "gethint.php?q=" + str);
  xmlhttp.send();
  }
}
</script>

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<h3>Start typing a name in the input field below:</h3>

<p>Suggestions: <span id="txtHint"></span></p> 
<p>First name: <input type="text" id="txt1" onkeyup="showHint(this.value)"></p>

<script>
function showHint(str) {
  if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("txtHint").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "gethint.php?q="+str);
  xhttp.send();   
}
</script>

</body>
</html>

Kodförklaring:

Kontrollera först om inmatningsfältet är tomt (str.length == 0). Om det är det, rensa innehållet i platshållaren txtHint och avsluta funktionen.

Men om inmatningsfältet inte är tomt, gör följande:

  • Skapa ett XMLHttpRequest-objekt

  • Skapa funktionen som ska köras när serversvaret är klart

  • Skicka förfrågan till en PHP-fil (gethint.php) på servern

  • Lägg märke till att parametern q läggs till gethint.php?q="+str

  • Variabeln str innehåller innehållet i inmatningsfältet



PHP-filen - "gethint.php"

PHP-filen kontrollerar en uppsättning namn och returnerar motsvarande namn till webbläsare:

<?php 
header("Expires: ".gmdate("D, d M Y H:i:s",time()+(-1*60))." GMT");
$a = array();
//Fill up array with names
$a[1]="Anna";
$a[2]="Brittany";
$a[3]="Cinderella";
$a[4]="Diana";
$a[5]="Eva";
$a[6]="Fiona";
$a[7]="Gunda";
$a[8]="Hege";
$a[9]="Inga";
$a[10]="Johanna";
$a[11]="Kitty";
$a[12]="Linda";
$a[13]="Nina";
$a[14]="Ophelia";
$a[15]="Petunia";
$a[16]="Amanda";
$a[17]="Raquel";
$a[18]="Cindy";
$a[19]="Doris";
$a[20]="Eve";
$a[21]="Evita";
$a[22]="Sunniva";
$a[23]="Tove";
$a[24]="Unni";
$a[25]="Violet";
$a[26]="Liza";
$a[27]="Elizabeth";
$a[28]="Ellen";
$a[29]="Wenche";
$a[30]="Vicky";
//get the q parameter from URL
if (isset($_GET["q"]))
{
	$q = strtoupper($_GET["q"]);
}
else
{
	$q = '';
}
//lookup all hints from array if length of q>0
if (strlen($q) > 0) 
{
	$hint="";
	for ($i=1; $i<=30; $i++) 
	{
		if ($q == strtoupper(substr($a[$i],0,strlen($q)))) 
		{
			if ($hint == "") 
			{
				$hint=$a[$i];
			}
			else 
			{
				$hint.=" , ".$a[$i];
			}
		}
	}
}
else
{
	$hint = "";
}
//Output "no suggestion" if no hint were found or output the correct values
if ($hint == "") 
{
	echo "no suggestion";
}
else 
{
	echo $hint;
}