Node server and AJAX review day 5

This is the 24th day of my participation in Gwen Challenge

AJAX pages

AJAX paging:

Some data is too much for one page to display completely. So you need paging. With AJAX, you don’t have to use iframe to simulate paging. To start, only the first page of data is requested. When the user clicks on the next page, an Ajax request is sent for the data on the second page. However, AJAX undermines the integrity of the page.

What may happen is that the user clicks on page A, jumps to another page, then clicks back, and page A is restored to its original form.

Paging code

Every time a button is clicked, ajax is sent to retrieve data to replace the page content.

For example:

// Get the previous page
var $lastPage = $("#lastPage");
// Get the next page
var $nextPage = $("#nextPage");
// Get the container element
var $content = $("#content");
// Get the template element
var $tpl = $("#tpl");
// Get the template content
var tpl_str = $tpl.html();
// generate the function
var format = _.template(tpl_str);
// Encapsulate the function
var sendAJAX = function(idx) {
	$.ajax({
		url: "/data/" + idx + ".json".dataType: "json".success: function(data) {
			// Clear the previous data
			$content.html("");
			// Get the array of returned data
			var arr = data.postList;
			// Loop formatting
			for(var i = 0; i < arr.length; i++) {
				arr[i].type = arr[i].postType.split("-") [1]; $content.append(format(arr[i])); }}})}// Set the semaphore
var idx = 0;
sendAJAX(idx);
// Set the click event for the next page
$nextPage.click(function() {
	idx++;
	sendAJAX(idx);
})


// Set the click event on the previous page
$lastPage.click(function() {
	idx--;
	sendAJAX(idx);
})
Copy the code

Paging optimization

The previous code works, but it’s not appropriate to send ajax request data every time. So, use local storage objects for optimization.

// Define an array
var arr_data = localStorage.getItem('arr')?JSON.parse(localStorage.getItem('arr')) : [];console.log(arr_data); 
// Get the previous page
var $lastPage = $("#lastPage");
// Get the next page
var $nextPage = $("#nextPage");
// Get the container element
var $content = $("#content");
// Get the template element
var $tpl = $("#tpl");
// Get the template content
var tpl_str = $tpl.html();
// generate the function
var format = _.template(tpl_str);
// Encapsulate the function
var sendAJAX = function(idx) {
	console.time();
	if (idx < 0) {
		idx = 0;
		return;
	}
	// Since the data may be in local storage, you need to check if it exists and use it if it doesn't
	if (arr_data[idx]) {
		console.log("It's going to be a locally stored object.");
		// Clear the previous data
		$content.html("");
		// Get the array of returned data
		var arr = arr_data[idx].postList;
		// Loop formatting
		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("Go AJAX request");
	$.ajax({
                url: "/data/" + idx + ".json".dataType: "json".success: function(data) {
			// Store the data in an array
			arr_data.push(data);
			// Clear the previous data
			$content.html("");
			// Get the array of returned data
			var arr = data.postList;
			// Loop formatting
			for(var i = 0; i < arr.length; i++) {
				arr[i].type = arr[i].postType.split("-") [1];
				$content.append(format(arr[i]));
			}

			// Put data into a local object
			localStorage.setItem("arr".JSON.stringify(arr_data));
			console.timeEnd(); }})}// Set the semaphore
var idx = 0;
sendAJAX(idx);
// Set the click event for the next page
$nextPage.click(function() {
	idx++;
	sendAJAX(idx);
})
// Set the click event on the previous page
$lastPage.click(function() {
	idx--;
	sendAJAX(idx);
})
Copy the code

AJAX forward and Backward

One drawback of AJAX is that it destroys the integrity of the page. And unable to move forward or back.

Solution: Use the H5 history update

// Set the click event for the next page
$nextPage.click(function() {
	idx++;
	sendAJAX(idx);
	// Add a new history
	history.pushState({a: idx}, ""."#" + idx);
})
Copy the code

After testing, I found that although I could move forward and backward, the content of the page did not change. This requires the window. onPopState event to rerender the page within the event.

// Listen for popState events
window.onpopstate = function(e) {
	sendAJAX(e.state.a)
}
Copy the code

NodeJS directory properties and methods

The current working directory

Process. The CWD () method

The current module directory

__dirName (preceded by two underscores)

Status of the HTTP protocol

The HTTP protocol defines how the front-end sends data to the back-end and how the back-end returns data to the front-end. The browser is our front end. The server is the back end. The old browser was just a “content publisher.” It doesn’t have as much functionality as it does now. The HTTP protocol is therefore designed to be “stateless”. Stateless means there is no persistent connection between the front and back ends.

Brief description: The front end makes a request to request a page, the server receives the request, and the connection is established. The server returns data. The connection is down.

connection: keep-alive

HTTP also has a version update. We used 1.0 before. 1.1 is now commonly used.

The request header Connection property determines how the front and back ends are connected

Version 1.0: Connection: close One request corresponds to one connection. When the connection is used, the connection is closed.

Version 1.1: Connection: keep-alive The connection is temporarily held after being used. If there are further requests for a certain amount of time, the connection will continue to be used.

Cookie

A cookie is an item in a request header that is used to pass data between the front and back ends.

For example, users should keep status when logging in. But HTTP is stateless. It’s technically impossible to log in. Therefore, HTTP protocol set cookies. When a user logs in for the first time, the user name and password are entered. Send to the server via Post request. When the server finishes processing, it sets a set-cookie entry in the response header with the user name and password. After the response header reaches the browser, the browser checks and finds set-cookie. In this case, a cookie file is generated according to the HTTP protocol. Save information. Every subsequent request the user makes brings the cookie to the server. Since cookies store information on the browser side, they store as little sensitive information as possible.

demo

Cookie before setting: There is no cookie entry in the request header

When the user logs in: set-cookie response header is set on the back end

After that, access other interfaces or files or whatever. The browser carries the cookie to the server. We can see the cookie entry in the request header