Bonjour à toutes et à tous,

Je suis débutant dans le monde du développement et j'aimerais m'exercer à l'aide d'exercices.

L'énoncé de mon exercice est:
Evaluer la vitesse de connexion en mesurant le temps pour charger une image située sur un site
déterminée, l’effet du cache doit être pris en compte. Le chargement se fait par une requête AJAX.

Je ne sais pas faire la requête via AJAX et je ne sais pas si l'effet du cache est pris en compte,..
Puis j'ai travaillé en local avec MAMP pour ne pas avoir de soucis de permissions d'accès à d'autres noms de domaines.

Des idées pour m'aider ?

Merci d'avance à tous,

Nicolas

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<!DOCTYPE html>
<html>
<head>
	<title>Requête AJAX</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700' rel='stylesheet' type='text/css'>
	<style type="text/css">
		*{font-size: 16px; font-family: 'Source Sans Pro', sans-serif;}
		body{padding: 20px;}
		p{margin-bottom: -10px}
		input{margin-bottom: 20px;}
	</style>
<head>
<body>
	<p>Vitesse de connexion:</p> <br />
	<input type="text" id="speed" size="30" /> <br />
	<input type="button" value="Launch Speed Test" id="speedTest"  />
 
	<!-- SCRIPT -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
	<script type="text/javascript">
		var image = "image.jpg"; 
		// Image located on my website http://jeremierindone.be
		var size = 148176;  // Image size
		var timeBefore = 0; // Time at the begining
		var timeAfter = 0;  // Time after calcul
 
 
		$("#speedTest").click(function startSpeedTest() {
		    timeBefore = new Date();
		    timeBefore = timeBefore.getTime();
 
		    var img = new Image();
		    img.src = image+"?"+timeBefore;
		    img.onload=endSpeedTest; // Launch function endSpeedTest
		});
 
		function endSpeedTest() {
		    var timeAfter = new Date();
		    timeAfter = timeAfter.getTime();
		    var ms = timeAfter-timeBefore; // Calculs difference betweet two times
		    var speed = Math.round(size/ms*100)/100; // Divides the size by the time 
		    document.getElementById("speed").value=speed+"ko/s"; // Show result to the user
		}
 
		$("#speedTest").click(function(){
		    $.ajax({
		       url : "image.jpg", //The link to the image
		       type : "GET",      // Ajax Request type get, not post
		       dataType : "png",  // Here we want to process png file
 
		       success : function(code_html, statut){ // If request succeeded
		       console.log("succeeded");
		       },
		       error : function(resultat, statut, erreur){
		       console.log("Failed");
		       },
		       complete : function(resultat, statut){
		        console.log("Complete")
		       }
		    });
		});
	</script>
	<!-- SCRIPT END -->
</body> 
</html>