第一个AJAX调用XMLHttpRequest
- 创建对象，用于浏览器和服务器的通信，不需要刷新浏览器
const request = new XMLHttpRequest();
- 通过GET请求方式在API中请求数据
request.open('GET', 'https://restcountries.com/v3.1/name/Russia');
注：我这里的API是在GitHub中找的，大家也可以找类似的API使用
上面API有讲解如何去请求数据
- 然后就发送请求，之后直接打印响应的文本看一下是否可以请求到数据
request.send();
console.log(request.responseText);
- 当然请求是异步的，上面可能会由于数据没有准备好等请求返回不了我们想要的，所以使用load来监听数据的介绍js
request.addEventListener('load', function () {console.log(request.responseText);
});
- 之后我们在浏览器测试一下数据是否可以正常接收，返回的数据是以json的格式返回的，我们将其转换为JavaScript对象的形式，当然现在都是JSON的方式来返回数据，XML格式已经过时淘汰了
request.addEventListener('load', function () {const data = JSON.parse(this.responseText);console.log(data);
之后我们编写一个HTML模版，之后会以卡片的形式来展现的网页中
这里先看一下，我们预设的HTML代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="stylesheet" href="style.css" /><script defer src="script.js"></script><title>异步 JavaScript</title></head><body><main class="container"><div class="countries"><!--<article class="country"><img class="country__img" src="" /><div class="country__data"><h3 class="country__name">COUNTRY</h3><h4 class="country__region">REGION</h4><p class="country__row"><span>👫</span>POP people</p><p class="country__row"><span>🗣️</span>LANG</p><p class="country__row"><span>💰</span>CUR</p></div></article>--></div><!-- <button class="btn-country">Where am I?</button> --><div class="images"></div></main></body>
</html>
这里注释的代码就是我们要插入的HTML模版
- 现在我们就开始制作HTML模板
const html = `<article class="country"><img class="country__img" src=${data[0].flags.png} /><div class="country__data"><h3 class="country__name">${data[0].name.common}</h3><h4 class="country__region">${data[0].region}</h4><p class="country__row"><span>👫</span>${(data[0].population / 1000000).toFixed(0)} people</p><p class="country__row"><span>🗣️</span>${data[0].languages.rus}</p><p class="country__row"><span>💰</span>${data[0].currencies.RUB.name}</p></div></article>`;});
其中的参数来JavaScript对象找就行，很简单，这里不做详细赘述
- 然后我们将我们的模板插入到HTML代码中
countriesContainer.insertAdjacentHTML('beforeend', html);countriesContainer.style.opacity = 1;
css的预设代码如下
* {margin: 0;padding: 0;box-sizing: inherit;
}html {font-size: 62.5%;box-sizing: border-box;
}body {font-family: system-ui;color: #555;background-color: #f7f7f7;min-height: 100vh;display: flex;align-items: center;justify-content: center;
}.container {display: flex;flex-flow: column;align-items: center;
}.countries {/* margin-bottom: 8rem; */display: flex;font-size: 2rem;opacity: 0;transition: opacity 1s;
}.country {background-color: #fff;box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);font-size: 1.8rem;width: 30rem;border-radius: 0.7rem;margin: 0 3rem;/* overflow: hidden; */
}.neighbour::before {content: 'Neighbour country';width: 100%;position: absolute;top: -4rem;text-align: center;font-size: 1.8rem;font-weight: 600;text-transform: uppercase;color: #888;
}.neighbour {transform: scale(0.8) translateY(1rem);margin-left: 0;
}.country__img {width: 30rem;height: 17rem;object-fit: cover;background-color: #eee;border-top-left-radius: 0.7rem;border-top-right-radius: 0.7rem;
}.country__data {padding: 2.5rem 3.75rem 3rem 3.75rem;
}.country__name {font-size: 2.7rem;margin-bottom: 0.7rem;
}.country__region {font-size: 1.4rem;margin-bottom: 2.5rem;text-transform: uppercase;color: #888;
}.country__row:not(:last-child) {margin-bottom: 1rem;
}.country__row span {display: inline-block;margin-right: 2rem;font-size: 2.4rem;
}.btn-country {border: none;font-size: 2rem;padding: 2rem 5rem;border-radius: 0.7rem;color: white;background-color: orangered;cursor: pointer;
}.images {display: flex;
}.images img {display: block;width: 80rem;margin: 4rem;
}.images img.parallel {width: 40rem;margin: 2rem;border: 3rem solid white;box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);
}
- 之后就能将漂亮的表格输出出来了
目前我们是通过硬编码的方式传入国家的名称，我们可以通过函数的方式来调用
'use strict';const btn = document.querySelector('.btn-country');
const countriesContainer = document.querySelector('.countries');///
const getCountrydata = function (country) {const request = new XMLHttpRequest();request.open('GET', `https://restcountries.com/v3.1/name/${country}`);request.send();request.addEventListener('load', function () {const data = JSON.parse(this.responseText);console.log(data);const html = `<article class="country"><img class="country__img" src=${data[0].flags.png} /><div class="country__data"><h3 class="country__name">${data[0].name.common}</h3><h4 class="country__region">${data[0].region}</h4><p class="country__row"><span>👫</span>${(data[0].population / 1000000).toFixed(0)} people</p><p class="country__row"><span>🗣️</span>${data[0].languages.rus}</p><p class="country__row"><span>💰</span>${data[0].currencies.RUB.name}</p></div></article>`;countriesContainer.insertAdjacentHTML('beforeend', html);countriesContainer.style.opacity = 1;});
};getCountrydata('us');这里和上面的显示画面是一样的