Skip to content

Instantly share code, notes, and snippets.

@Shimilbi

Shimilbi/XMLHttpRequest

Last active September 15, 2023 04:34
Show Gist options
  • Save Shimilbi/ba6eb19f82f393c6418a9b4b72c4bf21 to your computer and use it in GitHub Desktop.
Save Shimilbi/ba6eb19f82f393c6418a9b4b72c4bf21 to your computer and use it in GitHub Desktop.
Download ZIP
Read and Write in JS with juery and XMLRequests (writing won't work on replit, and cors requests won't work on display-only webites like jsfiddle or codepen)
Raw
XMLHttpRequest
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>EXercice traitement Ajax 1</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="text/javascript" src="jquery-3.2.1.js">
</script>
<!--<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<style>
fieldset {
max-width: 400px;
margin-left: auto;
margin-right: auto;
display: block;
background-color: rgba(0, 255, 255, 0.3);
margin-bottom: 20px;
text-align: center;
}
/*button{
margin-left: auto;
margin-right: auto;
}*/
</style>
</head>
<body style="background-color:#fff">
<h1>Traitement AJAX avec Carrousel d'images</h1>
<h2>Mise en place d'un Slider d'images</h2>
<fieldset>
<legend>Choisir vos diapos</legend>
<label>Slide de départ</label>
<input type="number" id="min" value="1" size="4">
<br>
<label>Slide de fin</label>
<input type="number" id="max" value="23" size="4">
<br>
<input type="button" id="validation" value="Valider">
</fieldset>
<div id="animation" class="carousel slide" data-ride="carousel"
style="margin-left:auto;margin-right:auto; width:70%;">
<!-- <div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="photos_volcans/1.jpg" alt="First slide">
<div class= "carousel-caption d-block"><p>Titre 1</p></div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="photos_volcans/2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="photos_volcans/4.jpg" alt="Third slide">
</div>
</div>-->
<!--<a class="carousel-control-prev" href="#animation" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#animation" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>-->
</div>
<br>
<br>
<div id="result">
</div>
<ul>
</ul>
</body>
<script>
function generer_diapo(data) {
let carrousel = document.querySelector("#monCarrousel");
if (carrousel != null) {
carrousel.remove();
}
let div = document.createElement("div");
div.className = "carousel-inner";
div.id = "monCarrousel";
for (const indice in data) {
let obj = data[indice];
let inner = document.createElement("div");
if (indice == 0) {
inner.classList.add("carousel-item", "active");
} else {
inner.classList.add("carousel-item");
}
let img = document.createElement("img");
img.src = "photos_volcans/" + obj.id + ".jpg";
img.classList.add("d-block", "w-100", "img-fluid");
img.alt = obj.alt;
inner.appendChild(img);
let caption_div = document.createElement("div");
caption_div.classList.add("carousel-caption", "d-block");
let caption = document.createElement("h5");
caption.innerHTML = obj.titre + ":" + obj.id;
caption.style = "background-color: #ffffff80; color: #FFF; font-family: impact";
caption_div.appendChild(caption);
inner.appendChild(caption_div);
div.appendChild(inner);
}
document.querySelector("#animation").appendChild(div);
let flecheGauche = document.createElement("a");
flecheGauche.classList.add("carousel-control-prev");
flecheGauche.href = "#animation";
flecheGauche.setAttribute("role", "button");
flecheGauche.setAttribute("data-slide", "prev");
//flecheGauche['data-slide'] = "prev";
let flecheDroite = document.createElement("a");
flecheDroite.classList.add("carousel-control-next");
flecheDroite.href = "#animation";
flecheDroite.setAttribute("role", "button");
flecheDroite.setAttribute("data-slide", "next");
document.querySelector("#animation").appendChild(flecheGauche);
document.querySelector("#animation").appendChild(flecheDroite); //imbrication flecheDroite dans animation.
let iconeGauche = document.createElement("span");
iconeGauche.className = "carousel-control-prev-icon";
iconeGauche.setAttribute("area-hidden", true);
let txtGauche = document.createElement("span");
txtGauche.innerHTML = "page précédente";
txtGauche.className = "sr-only";
flecheGauche.appendChild(iconeGauche);
flecheGauche.appendChild(txtGauche);
//_____________________________________________________________//
let iconeDroite = document.createElement("span");
iconeDroite.className = "carousel-control-next-icon";
iconeDroite.setAttribute("area-hidden", true);
let txtDroite = document.createElement("span");
txtDroite.innerHTML = "page suivante";
txtDroite.className = "sr-only";
flecheDroite.appendChild(iconeDroite);
flecheDroite.appendChild(txtDroite);
}
/*function generer_diapo(data)
{ removeElement("animation","carrousel");
let div_container= $("<div/>", {class: "carousel-inner",style: "width:100%;border-radius:12px;border:2px dotted #333",id:"carrousel"});
for(const indice in data)
{
let obj=data[indice];
let inner;
if(indice == 0)
{
inner = $("<div/>", {class: "carousel-item active"});
}
else
{
inner = $("<div/>", {class: "carousel-item"});
}
let images = $("<img/>", {src: "photos_volcans/"+ data[indice].id+ ".jpg",
class: "d-block w-100 img-fluid", alt: data[indice].alt});
inner.append(images);
let caption = $("<h5/>", {text: data[indice].titre, style: "background-color:#ffffff80;color: #FFF; font-family: verdana;border-radius:12px; text-shadow: 4px 4px 2px rgba(10, 10, 10, 1); padding:10px 15px"});
let caption_div= $("<div/>", {class: "carousel-caption d-block"});
caption_div.append(caption);
inner.append(caption_div);
div_container.append(inner);
}
$("#animation").prepend(div_container);
};
function load_ajax(){
let min= $("#min").val();
let max=$("#max").val();
$.ajax({url:"traitement.php",
type:"GET",
data:("min="+min+"&max="+max),
success:function(code){
generer_diapo(JSON.parse(code));
}
});
};
$("#validation").click(load_ajax);*/
function load_ajax()
{
let min = document.querySelector("#min").value;
let max = document.querySelector("#max").value;
var message = "?min=" + min + "&max=" + max;
const xhr = new XMLHttpRequest();
xhr.onreadystatechange=event=>
{
if (this.readyState === XMLHttpRequest.DONE) {
if (this.status === 200) {
//console.log(this.responseText);
generer_diapo(JSON.parse(this.responseText));
} else {
alert("Données mal chargées !");
}
}
}
xhr.open('GET','traitement.php'+message,true);
xhr.send();
}
document.getElementById("validation").addEventListener("click", load_ajax);
//load_ajax();
function removeElement(elementParent, elementEnfant)
{
var parent = document.querySelector("#" + elementParent);
var enfant = document.querySelector("#" + elementEnfant);
if (enfant != null) {
parent.removeChild(enfant);
//alert("Element " + elementEnfant + " supprimé ! ");
}
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment