Outils pour utilisateurs

Outils du site


cours2011:jquery_semestre_4:tp:twitter_jsonp_et_api

Twitter JSONP et API

<!DOCTYPE html>
 
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Test Ajax Twitter- jQuery</title>
    <link rel="stylesheet" href="test-ajax-twitter.css">
    <!-- Important : Charger les scripts de façon asynchrone et placer le code en fin de page -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="underscore.js"></script>
    <script src="test-ajax-twitter.js"></script>
 
</head>
 
<body>
  <h1>Test Ajax Twitter</h1>
  <form id="recherche-twitter" action="http://search.twitter.com/search" method="get">
  	<p><label for="q">Checher : </label><input type="text" name="q" value="" id="q" placeholder="les termes à chercher"></p>
  	<p><input type="submit" value="Search"></p>
  </form>
  <ul id="resultats"></ul>
</body>
</html>

J'ai utilisé la librairie Underscore.js.

  • Testez, ajoutez des ”console.log(…)
  • Ajouter des commentaires (c.-à-d. lire la doc pour écrire une phrase par ligne)
  • Modifier :
    • Ajouter un “select” pour la langue voir doc Twitter
    • Modifier le code pour qu'il agisse lors des frappes de clavier et autre changement du formulaire (plus besoin de lancer la recherche avec le bouton)
      • Après essayer d'utiliser la fonction _.debounce de la librairie Underscore.js pour éviter de faire une requête à chaque frappe de clavier.

Pour votre culture, il existe plein de services : ProgrammableWeb apis directory et même un service qui agrège des services Yahoo YQL

cours2011/jquery_semestre_4/tp/twitter_jsonp_et_api.txt · Dernière modification: 2012/03/12 23:00 (modification externe)