Joan: /* Exemple vist a classe II */

2019-01-30T15:33:01Z

Exemple vist a classe II

Pàgina nova

=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=
*http://www.w3schools.com/ajax/default.ASP
*https://developer.mozilla.org/en-US/docs/AJAX
*https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
*http://www.xul.fr/en-xml-ajax.html
===AJAX PHP===
*http://www.w3schools.com/ajax/ajax_aspphp.asp
===AJAX database===
*http://www.w3schools.com/ajax/ajax_database.asp
===AJAX XML===
*http://www.w3schools.com/ajax/ajax_xmlfile.asp
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''':
<pre>
<!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>
</pre>
'''gethint.php''':
<pre>
<?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;
?>
</pre>
La imatge animada de AJAX l'hem generat de:
*http://www.ajaxload.info/
==Exemple vist a classe II. Entrega de classe (30-01-2019)==
*http://www.w3schools.com/php/php_ajax_database.asp
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:
<pre>
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');
</pre>

{{Autor}}, febrer 2019
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

Ajax. PHP i BD - Historial de revisió

Joan: /* Exemple vist a classe II */