Node服务器与AJAX复习第五天-一一网

这是我参与更文挑战的第24天，活动详情查看：更文挑战

AJAX分页

AJAX分页功能：

有些数据太多了，一个页面无法显示完全。于是需要分页。
有了AJAX之后，就不必使用iframe来模拟分页效果。
开始时，只请求第一页的数据。
当用户点击下一页时，才发送ajax请求第二页的数据。
但是，AJAX破坏了页面的完整性。

可能出现的情况：用户在页面A一顿操作，点击跳转到其他页面，再点击后退，页面A又恢复成原装了。

分页代码

实现思路：每当点击按钮时，发送ajax获取数据替换页面内容。

举例：

// 获取上一页
var $lastPage = $("#lastPage");
// 获取下一页
var $nextPage = $("#nextPage");
// 获取容器元素
var $content = $("#content");
// 获取模板元素
var $tpl = $("#tpl");
// 获取模板内容
var tpl_str = $tpl.html();
// 生成函数
var format = _.template(tpl_str);
// 封装函数
var sendAJAX = function(idx) {
	$.ajax({
		url: "/data/" + idx + ".json",
		dataType: "json",
		success: function(data) {
			// 清空之前数据
			$content.html("");
			// 获取返回数据中的数组
			var arr = data.postList;
			// 循环格式化
			for(var i = 0; i < arr.length; i++) {
				arr[i].type = arr[i].postType.split("-")[1];
				$content.append(format(arr[i]));
			}
		}
	})
}
// 设置信号量
var idx = 0;
sendAJAX(idx);
// 设置下一页的点击事件
$nextPage.click(function() {
	idx++;
	sendAJAX(idx);
})


// 设置上一页的点击事件
$lastPage.click(function() {
	idx--;
	sendAJAX(idx);
})
复制代码

分页优化

之前的代码可以使用，但是每一次都要发送ajax请求数据，不太合适。所以，使用本地存储对象进行优化。

// 定义数组
var arr_data = localStorage.getItem('arr') ? JSON.parse(localStorage.getItem('arr')) : [] ;
console.log(arr_data); 
// 获取上一页
var $lastPage = $("#lastPage");
// 获取下一页
var $nextPage = $("#nextPage");
// 获取容器元素
var $content = $("#content");
// 获取模板元素
var $tpl = $("#tpl");
// 获取模板内容
var tpl_str = $tpl.html();
// 生成函数
var format = _.template(tpl_str);
// 封装函数
var sendAJAX = function(idx) {
	console.time();
	if (idx < 0) {
		idx = 0;
		return;
	}
	// 因为数据可能在本地存储中  所有要先判定 如果存在就使用 如果不存在就发送ajax
	if (arr_data[idx]) {
		console.log("走的是本地存储对象");
		// 清空之前数据
		$content.html("");
		// 获取返回数据中的数组
		var arr = arr_data[idx].postList;
		// 循环格式化
		for(var i = 0; i < arr.length; i++) {
			arr[i].type = arr[i].postType.split("-")[1];
			$content.append(format(arr[i]));
		}
		console.timeEnd();
		return;
	}
	console.log("走的是AJAX请求");
	$.ajax({
                url: "/data/" + idx + ".json",
		dataType: "json",
		success: function(data) {
			// 将数据存储到数组中
			arr_data.push(data);
			// 清空之前数据
			$content.html("");
			// 获取返回数据中的数组
			var arr = data.postList;
			// 循环格式化
			for(var i = 0; i < arr.length; i++) {
				arr[i].type = arr[i].postType.split("-")[1];
				$content.append(format(arr[i]));
			}

			// 将数据放入本地对象
			localStorage.setItem("arr", JSON.stringify(arr_data));
			console.timeEnd();
		}
	})
}
// 设置信号量
var idx = 0;
sendAJAX(idx);
// 设置下一页的点击事件
$nextPage.click(function() {
	idx++;
	sendAJAX(idx);
})
// 设置上一页的点击事件
$lastPage.click(function() {
	idx--;
	sendAJAX(idx);
})
复制代码

AJAX前进后退

AJAX有一个缺点，就是破坏了页面的完整性。而且无法前进后退。

分析：无法前进后退原因是因为没有改变或新增历史记录解决方案：使用H5的history新增

// 设置下一页的点击事件
$nextPage.click(function() {
	idx++;
	sendAJAX(idx);
	// 添加新的历史记录
	history.pushState({a: idx}, "", "#" + idx);
})
复制代码

经过测试，发现虽然可以前进后退，但是页面的内容没有发生变化。这就需要window.onpopstate事件的配合
在事件内部，重新渲染页面。

// 监听popstate事件
window.onpopstate = function(e) {
	sendAJAX(e.state.a)
}
复制代码

NodeJS的目录属性和方法

当前的工作目录

process.cwd() 方法

当前的模块目录

__dirname （前面是两个下划线）

HTTP协议的状态

HTTP协议的作用是规定了：“前端如何发送数据给后端，后端如何返回数据给前端”。
浏览器就是我们前端。
服务器就是后端。
以前的浏览器只是一个“内容发布器”。没有现在这么多的功能。于是就将HTTP协议设计成了“无状态”。
所谓的无状态指的就是前后端没有持久的连接。

简述：前端发出一个请求请求一个页面，服务器接收到请求，连接建立。服务器返回数据。连接断开。

connection: keep-alive

HTTP也有版本更新。之前用的是1.0。现在普遍使用1.1。

请求头connection属性决定前后端连接方式

1.0版本： connection: close 一次请求对应一次连接，连接使用完毕，关闭。

1.1版本： connection: keep-alive 连接使用完毕，暂时保持住。如果后续一定时间内还有请求，将会继续使用该连接。

Cookie

cookie是一个请求头中的项，用于前端与后端传递数据。

举例：
用户在登录时，应该保持状态。但是HTTP协议恰恰又是无状态。按照道理来说是无法登录的。
于是，HTTP协议中设置了cookie。
当用户第一次登录时，填写完毕用户名密码等信息。通过Post请求发送给服务器。服务器处理完毕之后，向响应头中设置一个set-cookie项，值是用户名和密码。响应头到达浏览器之后，浏览器检测，发现set-cookie。此时，根据HTTP协议规定，生成一个cookie文件。保存信息。
当用户之后进行的每一次请求，都会把cookie带到服务器上。
因为cookie存放的信息是在浏览器端，所以尽可能存放不敏感的信息。