• Aucun résultat trouvé

Cours de jQuery, Ajax et jQuery UI en PDF

N/A
N/A
Protected

Academic year: 2021

Partager "Cours de jQuery, Ajax et jQuery UI en PDF"

Copied!
16
0
0

Texte intégral

(1)

Lecture 10 – Ajax and jQuery

INLS 760

Web Databases

Spring 2013

(2)

2

AJAX

What is AJAX?

1. The “original” Ajax… is in Agamemnon’s army 2. Another Ajax… is “stronger than dirt”

3. Asynchronous JavaScript and XML

Where can I get Ajax?

1. Homer’s Iliad

2. Try the grocery store

3. There is nothing to “get” support is built-in to modern browsers. Ajax is a programming technique.

(3)

What does AJAX do?

• Traditional use of HTTP causes pages to be

reloaded when data is exchanged

• AJAX uses JavaScript’s XMLHttpRequest method

to exchange data with the server without

reloading the current page.

– This enables quick, small transactions

– Client can communicate more often with the server – More flexible user-interfaces can be built

(4)

4

Digging Deeper

• Traditional HTTP communication

– User clicks a link or presses a form button

– Client browser makes an HTTP request using either GET or POST

– Server processes request and sends a response – Browser loads the response in a new web page

(5)

Digging Deeper

• AJAX

– JavaScript event fires

• calls user defined JavaScript function

– Client browser makes a request using XMLHttpRequest – Client sets a handler to process the response when it

arrives

• This communication is asynchronous, so response could arrive whenever

– When the response arrives, a client handler does something

(6)

6

“Real-World” Example

• Google Suggest

(7)

Simple Example – Client Side

<form name="myForm">

Name: <input type="text"

onkeyup="ajaxFunction();" name="username" /> Time: <input type="text" name="time" />

</form>

This example code is from

(8)

8

Client Side – Browser Check

function ajaxFunction()

{

var xmlHttp; try {

// Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) {

alert("Your browser does not support our brand of AJAX!");

return false; }

}

(9)

Client Side – Handle Response

xmlHttp.onreadystatechange=function() {

if(xmlHttp.readyState==4) {

// Get data from the server document.myForm.time.value =

xmlHttp.responseText; }

}

// Ask the server for some data

xmlHttp.open("GET","time.php",true); xmlHttp.send(null);

} // close the ajax function

True means handle asynchronously

(10)

10

Simple Example – Server Side

<?php

header("Cache-Control: no-cache, must-revalidate");

// Date in the past

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

echo date('h:i:s'); ?>

(11)

Ajax Tutorials

• W3schools

– http://www.w3schools.com/ajax/default.asp

• Tizag

– http://www.tizag.com/ajaxTutorial/index.php

• IBM developerWorks

– http://www.ibm.com/developerworks/web/library/wa-ajaxintro1.html – http://www-128.ibm.com/developerworks/views/web/libraryview.jsp?search_by=Mastering+Ajax

(12)

Ajax + MySQL

• Search interface

• Develop together in class

– lect10/ajax-db.html

(13)

ajax libraries

• Many developers use ajax libraries

– jQuery – Prototype

– script.aculo.us – many others

(14)

14

ajax in jQuery

<body>

<h1>jQuery ajax test</h1>

<table border="1" width="100%"> <tr>

<td width="30%"> <div id="fred"> fred<br>

<button onclick='lucy();'>Click me!</button> </div> </td> <td width="70%"> <div id="ethel"> ethel<br> </div> </td> </tr> </table> </body> </HTML> lucy() is defined in <head>, see part 1 lect10/twodiv.html (part 2)

(15)

ajax in jQuery

<HTML> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript"> function lucy() { $.ajax({ type: "POST", dataType: "html", url: "twodiv.php", success: function(data) { $("#ethel").append(data); $("#ethel").append("<br>"); } }); } </script>

ajax call to server

lect10/twodiv.html (part 1)

"anonymous" function to be executed on ajax success; data returned from server is put into "data"

(16)

16

ajax in jQuery

<HTML> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript"> function lucy() { $.ajax({ type: "POST", dataType: "html", url: "twodiv.php", success: function(data) { $("#ethel").append(data); $("#ethel").append("<br>"); } }); } </script> </head> <body>

<h1>jQuery ajax test</h1>

<table border="1" width="100%"> <tr> <td width="30%"> <div id="fred"> fred<br> <button onclick='lucy();'>Click me!</button> </div> </td> <td width="70%"> <div id="ethel"> ethel<br> </div> </td> </tr> </table> </body> </HTML>

Références

Documents relatifs

Cette étude est intéressante, car les deux groupes étant équivalents au départ, les effets observés peuvent être plus directement imputables aux effets de la pratique musicale,

Le troisième acte s’ouvre, comme dans le premier, au son de la voix du vieux poète, mais cette fois, on ne le voit plus sur le grand écran, il nous laisse juste

La représentation de La Princesse d’Élide au cœur des Plaisirs de l’île enchantée s’inscrit dans le cadre des rivalités multiples qui opposent la comédie-ballet au

Sa proximité avec la langue nous semble être aussi un facteur intéressant, et pas seulement pour les musiques vocales, mais par exemple pour l’analyse du discours, des

Les directeurs de l'Académie royale de musique prennent donc cette demande en considération et vont même plus loin, en programmant régulièrement des spectacles couplés,

La musique chez George Sand a une vertu salvatrice, dans la mesure où elle permet à Consuelo de délivrer Albert de son refuge souterrain, et à Brulette de guérir

L’archive ouverte pluridisciplinaire HAL, est destinée au dépôt et à la diffusion de documents scientifiques de niveau recherche, publiés ou non, émanant des

Enfin, les derniers délits sexuels que l’on évoquera ici, sont la bestialité, l’homosexualité, et les pratiques sexuelles non autorisées telle le sodomie et la