封装好的：ajax.js
1 function ajax(url, fnSucc,fnFaild){ 2 //1【创建】 3 if(window.XMLHttpRequest){ 4 var oAjax = new XMLHttpRequest(); 5 }else{ 6 var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); 7 }; 8 9 //2: 【连接】true:表示异步 10 oAjax.open('GET',url,true); 11 12 //3：【发送】 13 oAjax.send(); 14 15 //4：【接受】 16 oAjax.onreadystatechange = function(){ 17 18 //判断浏览器操作到哪一步 19 if(oAjax.readyState == 4){//4：读取完成 20 if(oAjax.status==200){ 21 fnSucc(oAjax.responseText); 22 }else{ 23 if(fnFaild){ 24 fnFaild(oAjax.status); 25 } 26 } 27 28 } 29 } 30 }
结构与js代码：
1 <!DOCTYPE html> 2 <html> 3 <!-- 4 作者：702004176@qq.com 5 时间：2017-04-10 6 描述： 7 --> 8 <head> 9 <meta charset="UTF-8"> 10 <title>ajax+tab</title> 11 <meta name="Description" content="ajax获取json数据，并传入页面" /> 12 <meta name="author" content="郭菊锋702004176@qq.com"/> 13 <script src="ajax.js" type="text/javascript" charset="utf-8"></script> 14 <style type="text/css"> 15 * { 16 margin: 0; 17 } 18 19 body { 20 font-family: "微软雅黑"; 21 } 22 23 li { 24 list-style: none; 25 } 26 27 a { 28 text-decoration: none; 29 color: #000; 30 } 31 32 a:hover { 33 text-decoration: underline; 34 color: #194090; 35 } 36 37 .clearfix:after { 38 content: ""; 39 clear: both; 40 display: block; 41 } 42 43 .tabWrap { 44 overflow: hidden; 45 width: 611px; 46 margin: 100px auto; 47 } 48 49 .ulWrap { 50 padding: 0; 51 } 52 53 .ulWrap li { 54 overflow: hidden; 55 float: left; 56 width: 199px; 57 height: 50px; 58 line-height: 50px; 59 margin-right: 3px; 60 text-align: center; 61 color: #DFE9F6; 62 background: #5884CF; 63 } 64 65 .ulWrap li.Ahover, 66 .ulWrap li:hover { 67 cursor: pointer; 68 background: #194090; 69 } 70 71 .tabWrap div { 72 overflow: hidden; 73 width: 591px; 74 padding: 20px; 75 padding: 15px 5px; 76 background: #f1f2f3; 77 border: 1px solid #5884CF; 78 border-top: 0; 79 } 80 81 .tabWrap div.hide { 82 display: none; 83 } 84 85 .tabWrap div p { 86 margin-top: 10px; 87 } 88 89 90 .tabWrap div img:hover { 91 -webkit-box-shadow: 1px 2px 4px 1px #8aa59f; 92 box-shadow: 1px 2px 4px 1px #8aa59f; 93 } 94 </style> 95 </head> 96 97 <body> 98 <div class="tabWrap" id="tabWrap"> 99 <ul class="ulWrap clearfix" id="ulWrap"> 100 </ul> 101 </div> 102 <script type="text/javascript"> 103 window.onload = function() { 104 var ulWrap = document.getElementById("ulWrap"), 105 tabWrap = document.getElementById("tabWrap"), 106 txtArea = document.getElementById("txtArea"), 107 oLi = ulWrap.getElementsByTagName('li'), 108 oDiv = tabWrap.getElementsByTagName('div'); 109 ajax('tab.json', function(str) { 110 var str = str; 111 var oJson = (new Function('return (' + str + ')'))(); 112 var a = oJson['tab']; 113 //for 1-dom 114 for (var i = 0; i < a.length; i++) { 115 var ali = document.createElement("li"); 116 var adiv = document.createElement("div"); 117 ali.innerHTML = a[i]['title']; 118 adiv.innerHTML = "<a href='#'><img src='" + a[i]['image'] + "'/></a><p><a href='#'>" + a[i]['descript1'] + "</a></p><p><a href='#'>" + a[i]['descript2'] + "</a></p><p><a href='#'>" + a[i]['descript3'] + "</p><p><a href='#'>" + a[i]['descript4'] + "</a></p>"; 119 ulWrap.appendChild(ali); 120 tabWrap.appendChild(adiv); 121 var index = i; 122 if (index == 0) { 123 ali.className = "Ahover" 124 } else { 125 adiv.className = "hide" 126 } 127 } 128 //for 1 end 129 130 //for 2-tab 131 for (var i = 0; i < oLi.length; i++) { 132 oLi[i].index = i; 133 oLi[i].onclick = function() { 134 for (var j = 0; j < oLi.length; j++) { 135 oLi[j].className = ""; 136 oDiv[j].className = "hide"; 137 } 138 this.className = "Ahover"; 139 oDiv[this.index].className = ""; 140 } 141 } 142 //for 2 end 143 }) 144 } 145 </script> 146 </body> 147 148 </html>
json数据
{
"tab":[
{
"title":"新闻",
"image":"image/img0.jpg",
"descript1":"中国焦虑障碍患病率为4.98% 患病率为何在上升？",
"descript2":"病床上敬礼交警病逝，4岁女儿被确诊急性白血病",
"descript3":"小伙200天穷游50多个城市 剃光头发在寺庙当义工",
"descript4":"过半白领午餐吃快餐和外卖 凭“颜值“判断食物好坏"
},
{
"title":"娱乐",
"image":"image/img1.jpg",
"descript1":"《变形金刚》宇宙要来了！《大黄蜂》定档明年6月",
"descript2":"《傲娇与偏见》主演亮相本周《快乐大本营》",
"descript3":"张杰《歌手》玩融合曲风 再展人声吉他高音",
"descript4":"同样的事张馨予做遭骂 baby却获赞"
},
{
"title":"军事",
"image":"image/img2.jpg",
"descript1":"西方耍赖皮坑中国 今天：我们告定欧盟",
"descript2":"此人到访中国 印总理莫迪暴跳如雷",
"descript3":"美版“知乎“:为什么老外去中国后都不想走?",
"descript4":"不怕中国报复 韩叫嚣外国游客很多"
}
]
}
