Ejercicio AJAX

Developer
MoyArt Maximus
Size
2,170 Kb
Views
38,456
  1. Ejercicio AJAX Previews
  2. Ejercicio AJAX HTML Codes
  3. Ejercicio AJAX JS Codes

How do I make an ejercicio ajax?

What is a ejercicio ajax? How do you make a ejercicio ajax? This script and codes were developed by MoyArt Maximus on 09 July 2022, Saturday.

Ejercicio AJAX Previews
IQ Test

Ejercicio AJAX - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ejercicio AJAX</title>
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

Ejercicio AJAX - Script Codes JS Codes

//1.- se crea un nuevo objeto XMLHttpRequest.
var xhr = new XMLHttpRequest();
//2.- se crea un Callback.
xhr.onreadystatechange = function () { //2.1- Validamos que se ejecute siempre el ready state sea 4 y nos haya regresado un status 200 que es satisfactorio. if(xhr.readyState === 4 && xhr.status === 200) { //2.2- Obtenemos el response text de nuestro objeto XMLHttpRequest y lo parseamos como un objeto JSON. var employees = JSON.parse(xhr.responseText); //2.3- Comenzamos con la variable que va a contener el html que se va a crear con el JSON. var statusHTML = '<ul class="bulleted">'; //2.4 Con un for vamos a crear un elemento Li por cada elemento que tenemos en nuestro JSON for (var i=0; i<employees.length; i += 1) { if (employees[i].inoffice === true) { statusHTML += '<li class="in">'; } else { statusHTML += '<li class="out">'; } statusHTML += employees[i].name; statusHTML += '</li>'; } //2.5 Cerramos el UL statusHTML += '</ul>'; //2.6 Por ultimo Pintamos el HTML que acabamos de crear con JS en nuestro HTML document.getElementById('employeeList').innerHTML = statusHTML; }
};
//3.- Obrimos una peticion GET e indicamos la direccion de nuestro JSON
xhr.open('GET', '../data/employees.json');
//4.- Enviamos la peticion
xhr.send();
//_________________________________________________________________________________________
//Si necesitamos cargar otro JSON con AJAX tenemos que crear un nuevo objeto XMLHttpRequest
//-----------------------------------------------------------------------------------------
// 1.- creo mi nuevo http request para las salas
var rxhr = new XMLHttpRequest();
//2.- Creo mi nueva funcion callback
rxhr.onreadystatechange = function(){ //2.1- Validamos que se ejecute siempre el ready state sea 4 y nos haya regresado un status 200 que es satisfactorio. if(rxhr.readyState === 4 && rxhr.status === 200){ //2.2- Obtenemos el response text de nuestro objeto XMLHttpRequest y lo parseamos como un objeto JSON. var rooms = JSON.parse(rxhr.responseText); //2.3- Comenzamos con la variable que va a contener el html que se va a crear con el JSON. var roomHTML = '<ul class="rooms">'; //2.4 Con un for vamos a crear un elemento Li por cada elemento que tenemos en nuestro JSON for(i = 0; i < rooms.length; i += 1){ if(rooms[i].available === true){ roomHTML += '<li class="empty">' }else{ roomHTML += '<li class="full">' } roomHTML += rooms[i].room; roomHTML += '</li>'; } //2.5 Cerramos el UL roomHTML += '</ul>'; //2.6 Por ultimo Pintamos el HTML que acabamos de crear con JS en nuestro HTML document.getElementById("roomList").innerHTML = roomHTML; }
};
//3.- Obrimos una peticion GET e indicamos la direccion de nuestro JSON
rxhr.open('GET', '../data/rooms.json');
//4.- Enviamos la peticion
rxhr.send();
Ejercicio AJAX - Script Codes
Ejercicio AJAX - Script Codes
Home Page Home
Developer MoyArt Maximus
Username MoyArt
Uploaded July 09, 2022
Rating 3
Size 2,170 Kb
Views 38,456
Do you need developer help for Ejercicio AJAX?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

MoyArt Maximus (MoyArt) Script Codes
Name
A Pen by MoyArt Maximus
Arrays
Jquery AJAX Methods
Module Pattern
Clase Sass
Function HTML Print
Portafolio
Cookies
Propiedades comunes Css
CSS Radio Button
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!