封装好的: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":"不怕中国报复 韩叫嚣外国游客很多" } ] }