AJAX实例——DOGECOIN价格实时查看标签
题目详情
以上这是一个显示狗狗币(DOGE)实时价格的标签
其返回json数据的接口地址：
https://chain.so/api/v2/get_price/DOGE/USD
要求
样式类似即可，可以自己发挥，保持简洁美观。
按钮功能：因为接口返回的价格数据会隔一段时间更新一次，要求点击change按钮：价格更新为最新价格。
当前价格 > 0.06133时颜色为**”red”，其余状态为“#0ECB81”**
解决思路
0.完成页面布局以及查看JSON数据
JSON数据
{
"status" : "success",
"data" : {
"network" : "DOGE",
"prices" : [
{
"price" : "0.276159",
"price_base" : "USD",
"exchange" : "binance",
"time" : 1618570320
}
]
}
}
嵌套如下
<body onload="loadXMLDoc()">
<div class="wrap">
<div class="card">
<h1>DOGE/USD</h1>
<ul class="price">
<li id="myDiv" class="bigger"></li>
<li id="exchange"></li>
</ul>
<button type="button" onclick="loadXMLDoc()">Change</button>
</div>
</div>
</body>
1.创建XMLHttpRequest对象
其语法为
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","https://chain.so/api/v2/get_price/DOGE/USD",true);
xmlhttp.send();
3.将得到的responseText转化为js对象
使用JSON.parse()函数
var res=JSON.parse(xmlhttp.responseText);
4.载入HTML元素
document.getElementById("myDiv").innerHTML=res.data.prices[0].price;
document.getElementById("exchange").innerHTML=res.data.prices[0].exchange;
5.字体变色处理
在style里面预设两个类名
.bigger{
color: red;
font-size: 30px;
font-weight: bold;
}
.smaller{
color: #0ECB81;
font-size: 30px;
font-weight: bold;
}
并在js里面对得到的price判断大小
if(res.data.prices[0].price> 0.06133){
myDiv.className="bigger";
}
else{
myDiv.className="smaller";
}
}
6.函数调用
根据题目要求可以得知，页面加载完成以及点击“change”按钮时应该调用函数因此
在body和button上做如下处理
<body onload="loadXMLDoc()">
<button onclick="loadXMLDoc()">
