Övrigt AJAX
Med Javascript
Något vi ibland önskar är att kunna ladda in enbart en del av sidan. Ibland är sidorna fyllda med mycket innehåll och då kan det bli en fördröjning om hela sidan laddas om. I andra fall blir det en elegant finess, som till exempel Google, Youtube där du får förslag medan du skriver.
Ett verktyg är AJAX (Asynchronous JavaScript And XML). Det egentligen en blandning av flera tekniker för att skapa dynamiska webbsidor. Tekniker som blandas in är HTML, CSS, JavaScript, DOM, XML och XMLHttpRequest.
Med hjälp av AJAX kan en webbsida uppdateras asynkront (i bakgrunden). Det innebär att delar av en sida kan ändras utan att hela sidan behöver laddas om. Normalt så hämtas hela webbsidan på nytt från webbservern.
AJAX GET med javascript
<html>
<head>
<meta charset="utf-8">
<title>Sökförslag</title>
</head>
<body>
<h1>Sök elever</h1>
<form action="">
Namn:
<input type="text" id="textruta" onkeyup="visaMojligaNamn(this.value)" />
</form>
<p>Möjliga namn: <strong><span id="mojliga_namn"></span></strong></p>
<script>
function visaMojligaNamn(str) {
var xmlhttp;
if (str.length==0) {
document.getElementById("mojliga_namn").innerHTML="";
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
// om förfrågan är klar och svaret är hämtat (readyState==4) och statusen är OK
// då är funktionen redo att fortsätta
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("mojliga_namn").innerHTML=xmlhttp.responseText;
}
}
// öppnar PHP-fil och använder GET-metoden för att skicka med värden
xmlhttp.open("GET","getname.php?name="+str,true);
xmlhttp.send();
}
</script>
</body>
</html>
Vi testar i MySQL anropet direkt genom "mönster matchning". Något som finns inbyggt i MySQL. Vi använder LIKE. I möstermatchningen så kan vi använda "_" för att matcha exakt ett enstaka tecken och "%" för ett valfritt antal tecken (inklusive inga tecken).
<?php
include ("koppling.php");
$del = $_GET['name'];
// Vi kan testa direkt i mysql-frågan, med LIKE (case-insensitive by default)
// Namnet ska starta med det som finns i variabel '$del' och
// vara följt av inget, ett eller flera valfria tecken (% betyder det)
$query = "SELECT * FROM ajaxnames WHERE name LIKE '$del%' ORDER by name";
$stmt = $dbconn->prepare($query);
$data = array();
$stmt->execute($data);
$text = "";
while ($res = $stmt->fetch(PDO::FETCH_ASSOC)) {
$hel = $res["name"];
if ($text=="") $text=$hel;
else $text.=", ".$hel;
}
echo "$text";
?>
AJAX POST med javascript
<h1>Sök elever</h1>
<form action="">
Namn:
<input type="text" id="textruta2" onkeyup="visaMojligaNamn2(this.value)" />
</form>
<p>Möjliga namn: <strong><span id="mojliga_namn"></span></strong></p>
<script>
function visaMojligaNamn2(str) {
var xmlhttp;
if (str.length==0) {
document.getElementById("mojliga_namn").innerHTML="";
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
// om förfrågan är klar och svaret är hämtat (readyState==4) och statusen är OK
// då är funktionen redo att fortsätta
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("mojliga_namn").innerHTML=xmlhttp.responseText;
}
}
// öppnar PHP-fil och använder POST-metoden för att skicka med värden
xmlhttp.open("POST","getname.php",true);
/* Efter att vi kört "open()" och före "send()" metoden så använder vi ytterliggare en metod.
Nämligen setRequestHeader() som talar om vilken typ av innehåll vi skickar med. Metoden talar om
för servern at vi skickar formulär data via POST.*/
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// Här anger vi data som ska skickas i par, "index1=värde1". Vid fler byggs de ihop som i GET,
// "index1=värde1&index2=värde2".
xmlhttp.send("name="+str);
}
</script>
include ("koppling.php");
$del = $_POST['name'];
// Vi kan testa direkt i mysql-frågan, med LIKE (case-insensitive by default)
// Namnet ska starta med det som finns i variabel '$del' och
// vara följt av inget, ett eller flera valfria tecken (% betyder det)
$query = "SELECT * FROM ajaxnames WHERE name LIKE '$del%' ORDER by name";
$stmt = $dbconn->prepare($query);
$data = array();
$stmt->execute($data);
$text = "";
while ($res = $stmt->fetch(PDO::FETCH_ASSOC)) {
$hel = $res["name"];
if ($text=="") $text=$hel;
else $text.=", ".$hel;
}
echo "$text";
?>
AJAX GET med jQuery
Koden med AJAX blir klart kortare då mycket är inbyggt i AJAX-biblioteket.
Vi anropar samma php-fil som ovan med get-metoden.
OBS! Att vi såklart måste anropa ett jQuery bibliotek.
<form action="">
Namn:
<input type="text" id="textruta" />
</form>
<p>Möjliga namn: <strong><span id="mojliga_namn"></span></strong></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$("#textruta").keyup(function(){
var str=$("#textruta").val() ;
// Det vi får tillbaks från php-filen tar vi emot i variabeln data, vi får också tillbaks statusinformation i variabeln status.
$.get("getname-get.php?name="+str,function(data,status){
document.getElementById("mojliga_namn").innerHTML=data;
});
});
</script>
AJAX POST med jQuery
Också AJAX anrop med POST.
<form action="">
Namn:
<input type="text" id="textruta" />
</form>
<p>Möjliga namn: <strong><span id="mojliga_namn"></span></strong></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$("#textruta").keyup(function(){
var str=$("#textruta").val();
$.post("getname-post.php",
{
name:str //vid fler, lägg till:" , id:nr "
},
function(data,status){
document.getElementById("mojliga_namn").innerHTML=data;
});
});
</script>
Källor, referenser, bra länkar
http://se1.php.net/
https://api.jquery.com/jQuery.ajax/
http://www.w3schools.com/jquery/