Applicazioni web. Parte 4 AJAX

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Applicazioni web. Parte 4 AJAX"

Giorgio Palumbo
6 anni fa
Visualizzazioni

1 Agent and Object Technology Lab Dipartimento di Ingegneria dell Informazione Università degli Studi di Parma Applicazioni web Parte 4 AJAX Michele Tomaiuolo tomamic@ce.unipr.it

2 Sommario Ajax jquery Esempio di votazione 2

3 Ajax Asynchronous JavaScript And XML Reso popolare da Google, a partire dal 2005 Non è un nuovo linguaggio di programmazione Nuovo modo di usare standard esistenti Basato su JavaScript e sul protocollo HTTP Sfrutta l oggetto XMLHttpRequest Applicazioni web più veloci, migliore interazione con l utente 3

4 jquery Write less, do more. Libreria JavaScript leggera e cross-browser 24KB (compressa) IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+ Interazione tra JavaScript e HTML Rilasciata nel gennaio 2006 da John Resig Selezione, navigazione e modifica di elementi DOM Eventi Manipolazione di stili, effetti e animazioni Ajax Architettura estendibile 4

5 XMLHttpRequest Semplice esempio <div id="ajax_output">to be replaced by Ajax</div> <script type="text/javascript"> var req = new XMLHttpRequest(); // Not on all browsers! req.onreadystatechange = function() { if (req.readystate == 4 && req.status == 200) { document.getelementbyid('ajax_output').innerhtml = req.responsetext; } } req.open('get', 'pages/index.html'); req.send(null); // GET: No msg-body (form-data) </script> $('#ajax_output').load('pages/index.html'); // jquery! 5

6 jquery Schema pagina <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="mycode.js"></script> </head> <body> </body> </html> $(function() { // mycode.js // All your jquery code inside here (!!) // Executed when the document has been loaded $('body').html('hello, world!'); // example 6

7 jquery Eventi, classi e animazioni $('a').click(function(event) { alert('thanks for visiting!'); $('a').addclass('test'); $('a').removeclass('test'); $('a.special').click(function(event) { event.preventdefault(); $(this).hide('slow'); 7

8 JQuery Metodi in cascata I metodi jquery operano e restituiscono un oggetto query Rispondono ad un pattern Possibilità di collegamento in cascata Codice compatto e semplice $('a').addclass('test').show().html('foo'); 8

9 JQuery Esempio più complesso $('form#login') // hide all the labels inside the form // with the 'optional' class.find('label.optional').hide().end() // add a red border to any password fields in the form.find('input:password').css('border', '1px solid red').end() // add a submit handler to the form.submit(function(){ return confirm('are you sure to submit?'); 9

10 JQuery Funzioni di callback Funzioni - Cittadini di prima classe in javascript Passate come riferimenti, da invocare successivamente Una funzione di callback Viene passata come argomento ad un altra funzione Esecuzione asincrona, anche dopo il termine dell esecuzione della funzione genitore // existing function $.get('myhtmlpage.html', mycallback); // anonymous function $.get('myhtmlpage.html', function(data) { alert('data loaded: ' + data); 10

11 Rating example rate.html <html> <head> <title>jquery rating example</title> <script src="jquery.js" type="text/javascript"></script> <script src="rate.js" type="text/javascript"></script> </head> <body> <h1>jquery rating example</h1> <div id="rating"> Please rate: <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> </div> </body> </html> 11

12 Rating example rate.php <?php define('store', 'ratings.dat'); $stored = array(); if (file_exists(store)) { $stored = unserialize(file_get_contents(store)); } if (isset($_request['rating'])) { $stored[] = $_REQUEST['rating']; file_put_contents(store, serialize($stored)); } $sum = array_sum($stored); $count = count($stored); $average = $count? round($sum / $count, 2) : 0; header('content-type: text/xml');?> <ratings> <average><?php echo $average?></average> <count><?php echo $count?></count > </ratings> 12

13 Rating example rate.js $(function() { $('#rating a').click(function(e) { e.preventdefault(); // stop normal link click // send request $.post('rate.php', {rating: $(this).html()}, function(xml) { // format and output result $('#rating').html( 'Thanks for rating, current average: ' + $(xml).find('average').text() + ', number of votes: ' + $(xml).find('count').text() ); } ); 13

Documenti analoghi

La tecnica AJAX. Progettazione di Sistemi Interattivi. Implementazione di sistemi interattivi web-based (seconda parte) Esempio: Google Maps

La tecnica AJAX. Progettazione di Sistemi Interattivi. Implementazione di sistemi interattivi web-based (seconda parte) Esempio: Google Maps Progettazione di Sistemi Interattivi Implementazione di sistemi interattivi web-based (seconda parte) Docente: Daniela Fogli La tecnica AJAX AJAX: Asynchronous Javascript and XML Tecnica (insieme di tecnologie)