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> |
Partager