基本信息
源码名称：原生ajax缓存分页
源码大小：5.19KB
文件格式：.rar
开发语言：js
更新时间：2018-02-02
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 3 元　
   源码介绍 

<!DOCTYPE HTML>
<html>
<head>
<title>index</title>
<meta charset="utf-8">
<meta name="Author" content="海牙">
<link rel="stylesheet" href="css/AjaxPaging.css">
</head>
<body>
<div class="wrap flex_column">
<div class="content flex_column">
<!-- <a href="http://mp.weixin.qq.com/s/hSI0RNGR23KetTFLoYP7dQ" class="items flex_row">
	<div class="img"><img src="http://www.tanzhouphp.com/tanzhoue/images/newsList/1.jpg" alt=""></div>
	<div class="bd">
		<p class="label">说来也是惨，古生物学家好像特别容易被假化石坑到呢……</p>
	</div>
	<div class="ft">&GT;</div>
</a>-->
</div>
<div class="page">
<ul class="flex_row">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>
</div>
</div>
<script>
/*
javaScript java

ECMAScript DOM BOM

	基于原型的动态解释性脚本语言
		
		原型 词法作用域 上下文


前端
	1. 响应用户的操作 事件对象 点击事件 键盘事件
	2. 操作DOM元素 增删改查  style属性 改变了样式
	3. 数据 数据交互 AJAX json jsonp 正则表达式
	4. 造轮子 jquery angular vue react

原生js实现ajax 缓存代理


https://route.showapi.com/181-1?showapi_appid=30603&showapi_sign=98960666afeb4992ae91971d13494090&page=1&num=8

	需求分析

		1. 数据获取组件
		2. 数据渲染DOM组件
			jsonDOM解析
				json格式的数据 渲染到DOM元素上
				1. 模板
				2. 数据绑定
				3. 替换content内容
		3. 分页业务实现
				1. 事件代理 != 事件绑定
				2. 改变page
				3. 拉取数据 - >渲染数据
		4. 缓存代理业务实现
				1. 渲染过的数据要存储
				
	
*/

const url = 'https://route.showapi.com/181-1?'; //常量
var oCon = document.querySelector('.content');//获取content
var oUl = document.querySelector('.flex_row'); 
var page = 1; //初始化页码

var cache = {}; //缓存池 没有length属性

oUl.addEventListener('click',pageList,false);

function pageList(e){
	if(e.target.tagName.toLowerCase() === 'li'){
		page = e.target.innerHTML *1; //点击获取对应的源码
		if(page in cache){ //判断json中是否有什么
			console.log('数据已经缓存,页码:' page);
			showPage(cache[page])
		}else{
			getJson(); //获取数据
		}
	
	}
}



//获取数据 getJson
getJson();
function getJson(){ //获取数据
	console.time('正在拉取数据');
	var xmlHttp  = new XMLHttpRequest();//创建ajax对象
	var params = []; //数据中转数组
	var sendData = { //json数据容器
		'showapi_appid':'30603', //账号
		'showapi_sign' : '98960666afeb4992ae91971d13494090',//密码
		'page':page,   //第几页数据
		'num':8		 //几条数据
	}
	for(var key in sendData){
	// key对应每一位的键  sendData[key]是对应的value
		params.push(key '=' sendData[key]);
		
	}
	var postData = params.join('&');//以 & 为拼接符号 拼接数组内容
	// key = value & key = value
	//开启数据通道
	xmlHttp.open('GET',url postData,true);
	//提交请求
	xmlHttp.send(null);
	//监听数据通道变化
	xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState==4&&xmlHttp.status==200){//状态一切良好的情况下
			var dataList= JSON.parse(xmlHttp.response).showapi_res_body.newslist;//格式化数据 数组

			cache[page] = dataList; //缓存数据
			showPage(dataList); //调用渲染数据
		}

	}
}

//数据渲染组件
function showPage(data){ 
	var len = data.length; //长度预存
	var str = ''; //初始化模板
	for(var i=0;i<len;i  ){
		str  = 
		`
		<a href="${data[i].url}" class="items flex_row load">
		 <div class="img"><img	src="${data[i].picUrl}"		alt=""></div>
			<div class="bd">
		 <p class="label">${data[i].title}</p>
			</div>
			  <div class="ft">&GT;</div>
		  </a>
		`
	}
	oCon.innerHTML = str; //更改oCon的内容为str
	console.timeEnd('正在拉取数据');
}
	

	var aLi = document.querySelectorAll('li')
	function forEach(eles,cb){// each 发生闭包
		for(var i=0,len=eles.length;i<len;i  ){
			cb&&cb(eles[i],i);
		}
	}

	forEach(aLi,function(obj,idx){
		obj.style.border = idx  'px solid red';
	})
 
 //无序数据存储结构 







</script>
</body>
</html>

<!--
网购流程
商家店铺地址 
提交所购买物品清单

付款 审核 商家确认收货

通过快递的形式发货

检查物流状态

签收



ajax 数据交互
	数据接口地址 网址 https://route.showapi.com/181-1
	设置参数 
			showapi_appid=30603 账号
			showapi_sign=98960666afeb4992ae91971d13494090 密码
			page=1  请求的页数
			num=8	请求数据的数量
	数据交互模式 GET POST async

	检测数据通道状态 
		
	获取数据

	检测数据通道状态
	0 未初始化
	1 调用了send() 正在发送请求
	2 send载入完成
	3 解析响应内容 
	4 响应内容解析完成 数据开始回调 客户端可以调用数据

	

	getElementById
	getElementsBytagName

	h5 api ie8

	querySelector  $ css选择器 单一
	querySelectorAll 元素集合


	/*
	
		title: "胡彦斌回应郑爽出书 ：只为支持你 |今日热点",
		picUrl:"https://zxpic.gtimg.com/infonew/0/wechat_pics_-35654042.jpg/640", description: "盖饭GetFun", 
		ctime: "2017-08-16", 
		url:"https://mp.weixin.qq.com/s?src=16&ver=308&timestam…*6dauVz0y4doeQxc2e7Diy6V2IByC4XcAFaGomVp974HcTw8=
	*/

	

	var json = {
		name:'海牙',
		age:13,
		job:'前端开发工程师'
		};

	json['长得帅不帅'] = true;
	json.长得帅不帅 = true;

	console.log(json)
	json

	开发规范
			命名 格式 命名空间 缩进换行 注释

			业务逻辑规范
				健壮性 高内聚 低耦合 组件 模块


		js初级阶段[事件,方法,对象,控制流程,数组,工具[定时器 Math]]
		js进阶阶段[迭代,递归,词法作用域,js解析原理,数组高级操作,event对象高级应用,数组映射,封装,继承,多态,基于原型的OOP,面向对象,对象,json,ajax,闭包,跨域,矩阵,包装对象,降频操作,touch模组,this,call,apply,bind,上下文,词法作用域,作用域链,原型,原型链,解构,高级函数,arguments高级应用,cookie封装,前端数据库,正则表达式]

		编程思维 数组 眼界
			

			写一个函数 输出所有的 参数累加和  


		应届毕业生 211 985 5000

		速成出来的

			基本功	
				作用域 原型 http 前端高并发 兼容性

			思维能力
				

			开发规范

		diff
		[1]  [2,3,4,5,6,7]
		[1,2,3]

		arr.concat(arr2.slice(0,diff))
		
		技术栈不健壮
			map
			slice
			split
			concat
		
		眼高手低
			
		

		学会提出问题 

			学会思考问题 逻辑思维 分析 

				

				

			
-->