javascript中的ajax案例应用

ajax应用

css
  * {
            padding: 0;
            margin: 0;
        }
        .content{
            position:relative;
            top: 0;
            left: 0;
            width: 346px;
            height: 220px;
            background-color: white;
        }
        .imgbox{
            position: absolute;
            top: 0;
            left: 0;
            width: 130px;
            height: 220px;
        }
        .imgbox img{
        	width: 130px;
            height: 220px;
        }
        .tite{
            position: relative;
            top: 0;
            right: -133px;
            width: 190px;
            height: 220px;
            background-color: white;
        }
        button{
            position: absolute;
            left: 0;
            bottom: 45px;
            width: 100px;
            height: 40px;
            background-color: #f5a624;
            border: 0;
        }
        .small progress{
           width: 75px;
           margin-left: 3px;
        }

 <script>
      function ajax (method,url,data,acy,fn) {
			var _ajax = new XMLHttpRequest();
			//可能会传入大小  GET  可以都转化为小写来去判断
			if(method.toLowerCase() == 'get'){
				_ajax.open(method,url+'?'+data,acy)
				_ajax.send();
			}else if(method.toLowerCase() == 'post'){
				_ajax.open(method,url,acy);
				_ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
				_ajax.send(data);
			}
			
			_ajax.onreadystatechange = function () {
				if(_ajax.readyState == 4 && _ajax.status == 200){
					var res = _ajax.response;
					fn && fn(res);
				}
			}
		}
		ajax('get','json.json','user=1&sex=2',true,function (result) {
			var res = JSON.parse(result);

			var str='';
			for(var i=0;i<res.data.length;i++){
                
				document.body.innerHTML += '<div class="content"><div class="imgbox"><img alt=""></div><div class="tite"><h3>'+res.data[i].name+'</h3><p>&yen;&nbsp;'+res.data[i].reduct_price+'</p><p>抢购时间：'+ res.data[i].time_start.substring(11,16)+"-"+res.data[i].time_end.substring(11,16)+'</p><div class="small">已售'+res.data[i].reduct_price+'<span>'+((res.data[i].inventory - res.data[i].total)/res.data[i].inventory*100).toFixed(2)+'</span>%<progress value="0.4"></progress></div><button>立即抢购</button></div></div>';
				var img=document.getElementsByTagName("img")[i];
                img.src=res.data[i].thumbnail;
			}
          // ((res.data[i].inventory-res.data[i].total)/res.data[i].inventory*100).toFixed(2)
			
		})
  
  
  
  </script>

json代码
{
	"success": "true",
	"code": "200",
	"msg": "请求成功",
	"data": [
		{
			"id": "00001",
			"name": "\u65bd\u534e\u853b\u4f0a\u91c7\u67d3\u53d1\u818f60ml",
			"brand": "\u65bd\u534e\u853b",
			"original_price": "100",
			"inventory": "1062",
			"thumbnail": "https:\/\/fjlyl.xyz\/assets\/hairDye\/products%20(1).jpg",
			"product_id": "00021",
			"time_start": "2019-05-28 15:00:00",
			"time_end": "2019-05-28 16:00:00",
			"total": "897",
			"reduct_price": "63",
			"stock": "190"
		}, {
			"id": "00002",
			"name": "\u65bd\u534e\u853b\u4f0a\u91c7\u67d3\u53d1\u818f100ml",
			"brand": "\u65bd\u534e\u853b",
			"original_price": "264",
			"inventory": "2615",
			"thumbnail": "https:\/\/fjlyl.xyz\/assets\/hairDye\/products%20(2).jpg",
			"product_id": "00022",
			"time_start": "2019-05-28 18:00:00",
			"time_end": "2019-05-28 20:00:00",
			"total": "1676",
			"reduct_price": "58",
			"stock": "1228"
		}, {
			"id": "00003",
			"name": "\u65bd\u534e\u853b\u4f0a\u91c7\u67d3\u53d1\u818f200ml",
			"brand": "\u65bd\u534e\u853b",
			"original_price": "97",
			"inventory": "3001",
			"thumbnail": "https:\/\/fjlyl.xyz\/assets\/hairDye\/products%20(3).jpg",
			"product_id": "00023",
			"time_start": "2019-05-28 01:00:00",
			"time_end": "2019-05-28 02:00:00",
			"total": "1504",
			"reduct_price": "87",
			"stock": "82"
		}, {
			"id": "00004",
			"name": "\u6b27\u83b1\u96c5\uff08LOREAL\uff09\u5353\u97f5\u971c\u62a4\u53d1\u67d3\u53d1\u971c\uff031\uff08\u81ea\u7136\u9ed1\u8272\u67d3\u53d1\u5242 ",
			"brand": "\u6b27\u83b1\u96c5",
			"original_price": "50",
			"inventory": "3956",
			"thumbnail": "https:\/\/fjlyl.xyz\/assets\/hairDye\/products%20(4).jpg",
			"product_id": "00024",
			"time_start": "2019-05-28 08:00:00",
			"time_end": "2019-05-28 10:00:00",
			"total": "740",
			"reduct_price": "44",
			"stock": "714"
		}
	]
}

效果图