cookie&ajax

cookie操作

cookie用于存储在用户本地的一些数据 ， 存储大小4k 条数在170左右 ，可设置过期时间。

// 增加
document.cookie = "username=admin";
document.cookie = "password=abc";
			
// 更改，同名替换
document.cookie = "username=mmh";
			
// 查
let dc = document.cookie;
console.log(dc);
// password=abc; username=mmh
// 对整个结果字符串进行分离
let arr = dc.split("; ");
for(let i=0 ; i<arr.length ; i++){
	// 再对每个cookie语句进行分离
	let arr1 = arr[i].split("=");
	if(arr1[0] == "username"){
		console.log(arr1[1]);
	}
}
			
// 删
let oDate = new Date();
// 设置过期时间，为当前时间的之前任意时间段
oDate.setDate(oDate.getDate()+1);
document.cookie = "username=mmh;expires="+oDate;

封装cookie函数

  能够像localStorage一样，方便的进行增删改查。

//设置添加或者修改cookie的方法（无则添加，有则替换）	
function setCookie(name, val, num) {
	let oDate = new Date();
	oDate.setDate(oDate.getDate() + num);
	document.cookie = name + "=" + val + ";expires=" + oDate;
}

//获取cookie，通过cookie名
function getCookie(name) {
	let str = document.cookie;
	let arr = str.split("; ");
	for(let i = 0; i < arr.length; i++) {
		let arr1 = arr[i].split("=");
		if(arr1[0] == name) {
			return arr1[1];
		}
		// 如果该属性不存在cookie中，则返回undefined
	}
}

//删除cookie
function removeCookie(name) {
	setCookie(name, 1, -1);
}

Ajax简介

  是 Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的技术。
  通过异步模式，提升了用户体验。优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大量用户下的服务器负载。
  Ajax最大的特点就是局部刷新。

Ajax的封装函数

//get post  是否向服务器（后台接口）传数据
/*
 * type:get/post
 * url:资源路径（接口地址）
 * data:前端给后台的数据{key1:value1,key2:value2} => key1=value1&key2=value2
 * cb:前端接收到数据之后的处理函数
 * */
function ajax(obj){
	// 处理数据参数
	var str = "";
	for(var i in obj.data){
		str+=i+"="+obj.data[i]+"&";
	}
	// 去掉结尾的$符号
	str = str.replace(/&$/,"");
	
	// 1 、 创建Ajax对象
	if(window.XMLHttpRequest){
		var xhr = new XMLHttpRequest();
	}else{
		var xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	// 2、 准备工作及发送请求
	if(obj.type.toUpperCase()==="GET"){
		if(str==""){
			xhr.open("GET",obj.url,true);
		}else{
			xhr.open("GET",obj.url+"?"+str,true);
		}
		xhr.send();
	}
	if(obj.type.toUpperCase()==="POST"){
		xhr.open("POST",obj.url,true);
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
		xhr.send(str);
	}
	
	xhr.onreadystatechange = function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				var data = xhr.responseText;
				obj.cb(data);
			}
		}
	}
	
}

案例：调用回调函数，实现列表自动提示

1、HTML

<input type="text" id="" />
<ul>			
</ul>
		
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var oUl = document.querySelectorAll("ul")[0];
	var oInput = document.querySelectorAll("input")[0];
	oInput.oninput = function(){
		let data = {val:this.value};
		ajax({
			type:"GET",
			url:"index.php",
			data:data,
			cb:foo				
		});
				
		function foo(data){
			console.log(data);
			let data1 = JSON.parse(data);
			let str = "";
			data1.forEach((item)=>{
				str += `<li>${item}</li>`;
			});
			oUl.innerHTML = str;
		}
	}
</script>

2、PHP

<?php

$val = $_GET["val"];
$arr = ["a","aa","aaa","aaaa","aaaaa","aaaaaa"];
$newArr = [];

foreach($arr as $item){
	if($val == substr($item,0,strlen($val))){
		array_push($newArr,$item);
	}
}

echo json_encode($newArr);
/*var_dump($_GET);*/
// 得到的是数组
?>

案例，实现列表分页

1、HTML结构

<ul id="newsList">		
</ul>
<ul id="pages">
	<li>首页</li><li>上一页</li><li class="pageNum"></li><li>下一页</li><li>尾页</li>
</ul>

2、CSS结构

<style type="text/css">
	body,ul,li{
		padding: 0;
		margin: 0;
		font-family: "微软雅黑";
		font-size: 14px;
	}
	li{
		list-style: none;
	}
	#newsList{
		width: 500px;
		border: 1px solid #CECECE;
	}
	#newsList li{
		height: 36px;
		line-height: 36px;
		padding: 0 8px;
		margin: 0 10px;
		border-bottom: 1px solid #CECECE;
	}
	#newsList li:last-child{
		border-bottom: none;
	}
	#pages li{
		float: left;
		margin: 10px;
		padding: 10px;
		border: 1px solid red;
		cursor: pointer;
	}
	#pages li span{
		display: inline-block;
		padding: 10px;
		margin: 0 10px;
		border: 1px solid red;
		cursor: pointer;
	}
	#pages .pageNum{
		border: none;
		padding: 0;
	}
</style>

3、JS结构

<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	//正常来讲，分页是后端实现，前端只需传参数即可 page=1&nums=5
	//先把所有的数据取到，根据限定每页条数，得到有多少页
			
	let oList = document.getElementById("newsList");
	let oPages = document.getElementById("pages");
			
	let aBtns = oPages.children;
			
	let oPageNum = document.querySelectorAll(".pageNum")[0];
			
	ajax("data.json",function(data){
		data = JSON.parse(data);
		let totalNums = data.length;
		let numPerPage = 5;
		let pages = Math.ceil(totalNums/numPerPage);
				
		let curIndex = 0;
				
		let str = "";
		for(let i = 0; i < pages; i++){
			str += `<span>${i+1}</span>`;
		}
		oPageNum.innerHTML = str;
				
		function show(num){
			let str1 = "";
			for(let i = numPerPage*num; i < Math.min(totalNums,numPerPage*(num+1)); i++){
				str1 += `<li>${data[i]}</li>`;
			}
			oList.innerHTML = str1;
		}
		show(curIndex);
				
		//首页
		aBtns[0].onclick = function(){
			curIndex = 0;
			show(curIndex);
		}
		//上一页
		aBtns[1].onclick = function(){
			curIndex--;
			if(curIndex<0){
				curIndex=0;
			}
			show(curIndex);
		}
		//下一页
		aBtns[aBtns.length-2].onclick = function(){
			curIndex++;
			if(curIndex>pages-1){
				curIndex = pages-1;
			}
			show(curIndex);
		}
				
		//尾页
		aBtns[aBtns.length-1].onclick = function(){
			curIndex = pages-1;
			show(curIndex);
		}
				
		//具体的页码
		let aNums = oPageNum.children;	
		for(let i = 0; i < aNums.length; i++){
			aNums[i].onclick = function(){
				curIndex = i;
				show(curIndex);
			}
		}
		
	})
</script>