TD: Ajax

Affichage des articles dont le libellé est Ajax. Afficher tous les articles

Récupérer les données

Calcul des moyennes d'age par sex

exemple pour sex=M

nb =21
age = [73, 34, 90, 72, 47, 91, 28, 40, 67, 66, 63, 45, 68, 75, 71, 45, 54, 92, 41, 60, 73]
moyenne = 62

Affichage

Name	sex	born	died	age	ecart/moyenne
dupont	znz	1832	1905	73	11
dupond	f	1876	1905	29	-26
dupont	ana	1850	0	0	0

Fonctions de filtre

function filter(array, test) {
var passed = [];
for (var i = 0; i < array.length; i++) {
if (test(array[i]))
passed.push(array[i]);
}
return passed;
}

AJAX + fx on jsbin.com

Nous pourrions ne pas utiliser tab.foreach, mais écrire nous même une fonction équivalente.

function map(array, transform) {
var mapped = [];
for (var i = 0; i < array.length; i++)
mapped.push(transform(array[i]));
return mapped;
}

voici une bibliothèque qui implémente map
https://lodash.com/docs#map

code

: https://github.com/lodash/lodash/blob/3.10.1/lodash.src.js#L6864
JS Bin on jsbin.com

AJAX : Jquery

L'utilisation de Jquery pour AJAX facilite l'écriture des programme

$.ajax({
type: "GET",
url: "http://jsbin.com/juxilu/1.js",
dataType: "json",
success: function(videos) {

for (var i = 0; i < videos.length; i++) {
addVideoElement(videos[i]);
}
})

Exemple
JS Bin Exemple

JS Bin

Jsbin : AJAX

Comment faire de l'AJAX avec jsbin ?

Exemple construction de fichier AJAX

JS Bin
Ne rien mettre dans le html

Construction de votre test

JS Bin

Intégrer du HTML dans une page


Source HTML

<body>
 <section data-html="welcome.html"></section>

...

</body>


Source welcome.html

<h2>Welcome!</h2>


<h3> my name is Denis </h2>

code JS

(function () {
    var queryHtml = function () {
        var sections = document.querySelectorAll('[data-html]'),
            section, j, jlen;

        for (j = 0, jlen = sections.length; j < jlen; j++) {
            section = sections[j];

            if (section.dataset.html) {


                var xhr = new XMLHttpRequest(),
                    url = section.dataset.html,
                    cb = function () {
                        if (xhr.readyState === 4) {
                            if (
                                (xhr.status >= 200 && xhr.status < 300) ||
                                xhr.status === 0
                                ) {
                                section.innerHTML = xhr.responseText;
                            } else {
                                section.outerHTML = '

ERROR: The attempt to fetch ' + url + ' failed with the HTTP status ' + xhr.status + '. Check your browser\'s JavaScript console for more details.
';
                            }
                        }
                    };

                xhr.onreadystatechange = cb;

                xhr.open('GET', url, false);
                try {
                    xhr.send();
                } catch (e) {
                    alert('Failed to get file' + url + '.' + e);
                }
            }
        }
    };

    queryHtml();
})();

Exemple :

http://gdichicago.com/classes/js205/slideshow/#/

TD

Pages

TP : tableau

Récupérer les données

Calcul des moyennes d'age par sex

Affichage

Fonctions de filtre

code

code

AJAX : Jquery

Jsbin : AJAX

Exemple construction de fichier AJAX

Construction de votre test

Intégrer du HTML dans une page

Source HTML

Source welcome.html

code JS