最终效果
ajax异步获取json数据
实现步骤
1.HTML布局
为了不把页面写死，HTML页面我就放了两个盒子，具体内容根据数据的数量动态生成，下面是代码（index.html)：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>明星SuperStars</title><link rel="stylesheet" href="mystyle.css" type="text/css" ><script src="road.js"></script></head><body><div id="lists"><!-- 动态生成1--></div><div class="will"><div id="box"></div><div id="ttt" ><!-- 动态生成2--></div></div></body></html>
2.css添加样式
下面是代码（mystyle.css）：
*{padding: 0;margin: 0;}#list{width: 30%;height: auto;float: left;margin: 16px 16px 0 16px;border: 1px solid black;border-radius: 16px;box-shadow: 4px 4px 8px burlywood;cursor: pointer;}#list img{width: 90%;height: 240px;margin:5% 5% 0 5%;}#list h3{text-align: center;margin: 10px 0;}.will{position: absolute;width: 100%;height: 100%;display: none;}#box{width: 100%;min-height: 100%;background-color:black;opacity: 0.5;}#ttt{position: absolute;left: 25%;top: 80px;width: 50%;height: 400px;background-color: whitesmoke;border-radius: 12px;box-shadow: 4px 4px 8px grey;}#ttt h2{padding-left: 20px;background-color:darkblue;border-radius: 12px 12px 0 0;line-height: 60px;color: whitesmoke;}#back{position: absolute;right: 6px;top: 6px;width: 50px;height: 50px;cursor: pointer;}#starimg{width: 40%;height: 160px;margin-left: 30%;margin-top: 20px;}#ttt p{margin-top: 16px;margin-left: 16px;}#ttt span{color: darkblue;font-weight: 700;}#ttt button{margin-right: 16px;}
可以看到，半透明盒子（id=‘box’）这里我只是设置了最小高度，实际高度，根据数据导入后HTML的高度来决定。具体可以看后面的js代码。
3.json假数据
因为没有真正的数据，所以这里自己编辑了一些假数据（可以随便改），将其以json格式放入json文件中。
下面是代码（jsonDate.json):
[{"name":"吴亦凡","age":"1990年11月7日","friend":["鹿晗","黄子韬","潘玮柏"],"cimg":"wyf.jpg","well":"东京国际电影节·中国电影周“金鹤奖”最佳男主角奖、第十九届上海国际电影节最受媒体关注年度新人奖..."},{"name":"蔡徐坤","age":"1998年8月2日","friend":["陈立农","范丞丞","郭麒麟","王子异"],"cimg":"715c6b4f2cc74b2fa97243143fe5d44e.jpg","well":"MAHB年度先生盛典年度先生、中牙友好大使暨中牙杰出青年领袖人物、亚洲新歌榜度盛典年度最具影响力偶像..."},{"name":"杨紫","age":"1992年11月6日","friend":["张一山","李现","周冬雨"],"cimg":"800.jpg","well":"多次入围金鹰奖、白玉兰奖、华鼎奖等业内大奖..."},{"name":"陈立农","age":"2000年10月3日","friend":["毛不易","蔡徐坤"],"cimg":"7b166a876252da5c.jpg","well":"《偶像练习生》第2名..."},{"name":"王源","age":"2000年11月8日","friend":["王俊凯","易烊千玺","贾乃亮"],"cimg":"ae0e9a8771700c5d.jpg","well":"两届联合国经社理事会青年论坛青年代表并议程演讲、联合国儿童基金会大使 、央视网冬奥大使..."},{"name":"王俊凯","age":"1999年9月21日","friend":["张一山","王源","易烊千玺"],"cimg":"44356eca6e44e89c.jpg","well":"APEC未来之声青年大使、“联合国环境署亲善大使”、9月成立个人公益“焕蓝梦想公益基金”... "},{"name":"易烊千玺","age":"2000年11月20日","friend":["王源","王俊凯","何炅","谢娜"],"cimg":"257fe48d4deb5d47.jpg","well":" 第8届中国大学生电视节最受大学生瞩目电视剧男演员奖、度电影频道M榜最具潜力男演员奖..."},{"name":"迪丽热巴","age":"1992年6月3日","friend":["杨幂","周冬雨","邓伦","何炅"],"cimg":"cc72106f859def96.jpg","well":"国剧盛典最受欢迎新人女演员、第29届中国电视金鹰奖观众喜爱的女演员、第12届中国金鹰电视艺术节最具人气女演员..."},{"name":"宋茜","age":"1987年2月2日","friend":["陈伟霆","李沁"],"cimg":"link.jpg","well":"国剧盛典年度最具人气女演员、国剧盛典年度最佳新人女演员、百度搜索风云榜年度十大热搜艺人..."},{"name":"马天宇","age":"1986年4月12日","friend":["郑爽","贺峻霖","王凯"],"cimg":"4bc39377225873ca.jpg","well":"第五届东南劲爆音乐榜“内地劲爆最受欢迎男歌手” 奖、微博之夜“年度突破演员奖”..."},{"name":"张若昀","age":"1988年8月24日","friend":["吴承轩","马思纯"],"cimg":"50b0ee8071bf48eb.jpg","well":"安徽卫视国剧盛典青春演绎偶像奖、金骨朵网络影视盛典年度实力男演员..."},{"name":"唐艺昕","age":"1987年10月9日","friend":["李沁","宋茜"],"cimg":"b8a1a5afc0811668.jpg","well":"MSN时尚盛典年度最具潜力演员、国剧盛典青春演技魅力女演员奖..."},{"name":"张一山","age":"1992年5月5日","friend":["杨紫","刘昊然"],"cimg":"9b6a69ef731bcbc3.jpg","well":"第5届中国名人榜最具潜力奖、星光版《舞林大会》总冠军、时尚星秀年度最具实力时尚人物奖..."},{"name":"杨幂","age":"1986年9月12日","friend":["赵丽颖","何炅","迪丽热巴"],"cimg":"853b9588dd570a7b.jpg","well":"第9届中国金鹰电视艺术节最具人气女演员奖、第50届休斯顿国际电影节最佳女主角奖..."},{"name":"林更新","age":"1988年2月13日","friend":["王思聪","陈赫","谢娜"],"cimg":"45ced8bff66a7e20.jpg","well":"华语青年影像论坛年度新锐男演员、香港电影金像奖最佳新演员提名、华鼎奖最佳男配角提名..."}]
4.PHP服务器脚本
此次PHP页面主要实现获取并返回刚刚的假数据。
注意，此时PHP页面显示的数据，是一个字符串的形式。并不是json数据。
下面是代码（myphp.php):
<?php echo file_get_contents('jsonDate.json');?>
5.js功能实现
步骤
1）在页面加载完毕时向服务器发送请求，获取数据
2）将获取的数据由字符串形式转化成json对象’JSON.parse(objs)‘
3）将数据处理并显示在当前浏览器页面（过程中给每个div添加一个index属性，方便后面点击事件发生时处理数据）
4）给每个div绑定点击事件
5）点击事件发生，出现弹出框和半透明盒子（其中：将当前页面的高度赋值给半透明盒子；将当前页面的滚动条高度清0，即位于顶部。）
6）根据点击事件的index值，获取对应的json数据并将相应内容显示在弹出框中
7）给右上角的“X”图标添加点击事件，点击事件发生，则隐藏半透明盒子和弹出框
遇到的问题
1）问题：一开始直接想点击事件发生时，将大盒子（装着弹出框和半透明盒子）的display属性直接变成显示，结果报错了：
解决：根据报错提示百度后，了解到出错原因是因为，此时的大盒子是一个数组，不是一个元素。而display属性只能用在单一元素，所以我用了一个for循环，解决了这个问题：
2）问题：对于半透明盒子的高度，一开始我是直接用height = 100%。但是实际操作发现这样设置，半透明盒子只有屏幕大小，高于屏幕的部分没有遮着，效果如图：
解决：看到这个效果，很明显半透明盒子的高度不对。那么，如何修改呢？直接把半透明盒子的高度放大？让它等于滚动条的高度+屏幕的高度？
不不不，这两种办法都不能解决问题。前者原则上是可以的但是会把总高度拉大，像这样：
比较好的解决办法是，将HTML的高度赋值给半透明盒子的高度。
下面是代码（road.js）：
window.onload = function(){//加载完毕时发生请求，获取数据渲染到页面 var req1 = new XMLHttpRequest();req1.open('get','myphp.php');req1.onload = function(){//拿到数据var objs = req1.responseText;//转化成json对象var jsonObjs = JSON.parse(objs);//将数据可视化，并显示在页面var div = document.getElementById("lists");for(var i = 0; i < jsonObjs.length ;i++){//拼接的时候加一个自定义属性，方便后面弹出框显示var html = '<div id = "list" index='+ i +'>';html = html + '<img src="imgs/' + jsonObjs[i].cimg + '" />';html = html + '<h3>' + jsonObjs[i].name + '</h3>';html += '</div>';div.innerHTML += html;}//点击事件发生，获取对应明星详细信息var objs2 = document.querySelectorAll("#list");for(var j = 0; j < objs2.length; j++){objs2[j].onclick = function(){var thisIndex = this.getAttribute('index');//显示弹出框var willttt = document.getElementsByClassName("will");for(var k = 0; k < willttt.length; k++){willttt[k].style.display = "block";}//设置半透明宽的高度等于HTML的高度document.getElementById("box").style.height = document.querySelector("html").offsetHeight + 'px';//让HTML的滚动条返回顶部document.querySelector("html").scrollTop = 0;//修改弹出框内容html = '<h2>' + jsonObjs[thisIndex].name + '</h2><img id="back" src="imgs/back.png">';html = html + '<img id="starimg" src="imgs/'+ jsonObjs[thisIndex].cimg +'">';html = html + '<p><span>出生日期：</span>'+ jsonObjs[thisIndex].age +'</p>';html = html + '<p><span>成       就：</span>'+ jsonObjs[thisIndex].well +'</p>'html += '<p><span>朋       友：</span>';for(var q = 0 ; q < jsonObjs[thisIndex].friend.length; q++){html = html + '<button>'+ jsonObjs[thisIndex].friend[q] +'</button>';}html += '</p>';document.getElementById("ttt").innerHTML = html;//点关闭按钮后返回明星列表列document.getElementById("back").onclick = function(){for(var k = 0; k < willttt.length; k++){willttt[k].style.display = "none";}}}}}req1.send(null);}
