Ajax. PHP i BD

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

AJAX = Asynchronous JavaScript and XML

AJAX no és un llenguatge de programació, sinó una manera diferent d'utilitzar estàndars existents. AJAX és l'art d'intercanviar dades amb el servidor (el servidor web), i actualitzar parts d'una pàgina web sense haver de carregar de nou tota la pàgina web.

Asynchronous JavaScript + XML, no és una tecnologia en ella mateixa, sinó que és una nova apoximació per utilitzar de forma conjunta una sèrie de tecnologies que existien prèviament, com ara HTML o XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, i el més important, l'objecte XMLHttpRequest.

Quan aquestes tecnologies es combinen en el model AJAX, les pàgines web poden fer actualitzacions incrementals i ràpides en el navegador sense haver de carregar de nou la pàgina. Això fa que l'aplicació sigui més ràpida a les accions dels usuaris i més usable.

Encara que la X de AJAX ve de XML, avui en dia s'utilitza més JSON en comptes de XML degut als seus múltiples avantatges com ara tenir un pes inferior i estar integrat dins de Javascript. Tant JSON com XML s'utilitzen per empaquetar informació en el model AJAX.

Referències

AJAX PHP

AJAX database

AJAX XML

Compte! amb aquest exercici. L'exercici no funciona en local (file:///), sinó que necessitem el Apache igual que en els exercicis basats en PHP. Quan parlem de comunicació asíncrona amb el servidor, el servidor és el nostre servidor Apache.

D'altra banda, quan descarreguem el fitxer cd_catalog.xml de Internet, hem de vigilar els permisos que queden en el fitxer. A Linux existeix l'usuari www-data, i és aquest usuari el que ha de tenir permisos suficients per llegir aquest fitxer.

Aclaracions

Exemple vist a classe

showhint.htm:

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  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)
    {
		//alert(xmlhttp.responseText);
    	//document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
		var chunk = xmlhttp.responseText.split("*");
		txt = "<ul>";
		for (i in chunk) {
			txt += "<li>"+chunk[i]+"</li>";
		}
		txt += "</ul>";
		setTimeout(function(){document.getElementById("txtHint").innerHTML= txt;},3000);

    } else {
		document.getElementById("txtHint").innerHTML="<img src='img/ajax-loader.gif' />";
	}
  }
xmlhttp.open("GET","php/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<h3>Start typing a name in the input field below:</h3>
<form action=""> 
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p> 

</body>
</html>

gethint.php:

<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
$a[]="Maria";
$a[]="Pere";
$a[]="Rita";
$a[]="Jordi";
$a[]="Anna";
$a[]="Núria";

// get the q parameter from URL
$q=$_REQUEST["q"]; $hint="";

// lookup all hints from array if $q is different from ""
if ($q !== "")
  { $q=strtolower($q); $len=strlen($q);
    foreach($a as $name)
    { if (stristr($q, substr($name,0,$len)))
      { if ($hint==="")
        { $hint=$name; }
        else
        { $hint .= "*$name"; }
      }
    }
  }

// Output "no suggestion" if no hint were found
// or output the correct values
echo $hint==="" ? "no suggestion" : $hint;
?> 

La imatge animada de AJAX l'hem generat de:

Exemple vist a classe II. Entrega de classe (30-01-2019)

Per tal de què funcioni aquest exemple, has de crear la taula user en una base de dades del teu mysql, amb la mateixa estructura que et proposen:

create table user (
id smallint primary key,
FirstName varchar(50) not null,
LastName varchar(50) not null,
Age smallint,
Hometown varchar(50) not null,
Job varchar(50) not null
);

insert into user values (1, 'Peter', 'Griffin', 41, 'Quahog', 'Brewery');
insert into user values (2, 'Lois', 'Griffin', 40, 'Newport', 'Piano Teacher');
insert into user values (3, 'Joseph', 'Swanson', 39, 'Quahog', 'Police Officer');
insert into user values (4, 'Glenn', 'Quagmire', 41, 'Quahog', 'Pilot');

creat per Joan Quintana Compte, febrer 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines