Node server and AJAX review day 6

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

Session

Cookies are already available to maintain login status, but are not secure. So sessions were introduced. Cookies are stored on the front end and sessions are stored on the back end.

When the user logs in for the first time, the information is sent to the server. The server receives the information, processes it, and generates a random ID based on the information. The ID represents the user. Set the ID string to the browser in the set-cookie response header. The browser still generates cookie files and stores random ids. Each subsequent request carries the ID to the server. The server identifies the user by identifying the ID.

Preview picture

Previews are available when users upload images or select images.

FileReader

A new API for HTML5. Allows the browser to read the file.

Initialization: property

Methods:

FileReader readAsDataURL method

This method takes a file information object as an argument and generates a temporary image file address

demo:

// Set the event
file.onchange = function() {
	// Get the image information
	var info = this.files[0];
	// Initialize fileReader
	var fr = new FileReader();
	/ / call fr. ReadAsDataURL
	fr.readAsDataURL(info);
	// Listen for the onload event
	fr.onload = function() {
		// Generates the img element
		var img = new Image();
		/ / set the SRC
		img.src = fr.result;
		/ / on the tree
		document.body.appendChild(img)
	}
}
Copy the code

Results:

window.URL.createObjectURL

Code:

file.onchange = function() {
	// Get the image information
	var info = this.files[0];
	// Generate a path
	var src = window.URL.createObjectURL(info);
	console.log(src)
	// Generates the img element
	var img = new Image();
	/ / set the SRC
	img.src = src;
	/ / on the tree
	document.body.appendChild(img);
}
Copy the code

AJAX2.0

In AJAX2.0, a new constructor was added: FormData

It is a constructor used to get form data.

To view:

Initialization: Requires a native form element as a parameter

forEach

This method iterates through the stored data of the FormData instance object.

// Call the forEach method
fd.forEach(function(value, index) {
	console.log(value, index)
})
Copy the code

get

This method can retrieve one of these items of data

Form status:

Call API

fd.get("sex") = >"Male"
fd.get("hobby") = >"Play basketball"
Copy the code

If the get method retrieves multiple values for one key, only the first item can be retrieved.

getAll

An evolved version of the get method, which can fetch items. The return value is an array

Cross domain

The domain

Domain means region. Represents the scope that the server occupies on the network.

The same-origin policy

When the browser requests content from the server, it follows the same origin policy, that is, if it is the same domain, it follows the same origin policy, if it is not the same domain, it does not follow the same origin policy.

Cross domain

If you comply with the same origin policy, you are not cross-domain. If you do not, you are cross-domain. AJAX cannot cross domains. However, static resources are not restricted by the same origin policy. When any protocol, domain name, or port is inconsistent, it is called cross-domain.

demo1:

http://localhost:3000/index.html 
http://localhost:3001/checkName
Copy the code

Cross-domain, because ports are inconsistent

demo2:

http://localhost:3000/index.html
http:/ / 192.168.2.187:3000 / checkName
Copy the code

Cross-domain, because domain names are inconsistent

demo3:

http://localhost:3000/index.html
https://localhost:3000/checkName
Copy the code

Cross-domain, because the protocols are inconsistent

Cross-domain demo

Start the server at http://localhost:3000

Send the request in the index.html page under the server:

For example:

$.ajax({
	url: "http://192.168.2.187:3000/data/1.json".type: "get".dataType: "json".success: function(data) {}})Copy the code

In this case, it’s cross-domain

Because the page field is localhost and the Ajax target field is 192.168.2.187

JSONP

JSONP is a way to send requests for cross-domain resources.

JSON is a data format.

How to use JSONP:

Predefine a function and attach the SRC pair of a script tag to the target server interface. The Script tag can send cross-domain requests and execute code. The resulting data is the execution of a function, and the argument is the JSON we want. A function is a function that we’ve defined in advance. You process JSON inside the function.

Predefine a function:

function aaa(json) {
  console.log(json.data);
}
Copy the code

The script tag sends the request

<script src="http://localhost:3001/checkName? username=zhangsan"></script>
Copy the code

Return the data

aaa({"error": 0."data": "Available"})
Copy the code

The json in jquery

Change dataType to JSONP

$.ajax({
	url: "http://localhost:3001/checkName".data: {
		username: "zhangsan",},type: "get".// dataType indicates that an AJAX request is being sent when it is JSON, and a JSONP when it is JSONP
	dataType: "jsonp".success: function(data) {
		console.log(data); }})Copy the code

Data obtained:

Custom JSONP functions

// Define a function that sends a JSONP request
function sendJSONP(url, data, callback, callbackName) {
	// Define the callback function here
	window[callbackName] = callback;
	// Create the script tag
	var script = document.createElement("script");
	/ / set the SRC
	script.src = url + "?" + data + "&callback=" + callbackName;
	document.body.appendChild(script)
	script.onload = function() {
		delete window[callbackName];
		document.body.removeChild(this); }}Copy the code