Node服务器与AJAX复习第六天

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

Session

Cookie已经可以保持登录状态了，但是不安全。
于是又引入了Session。
Cookie是存储在前端的，而Session是存储在后端的。

当用户第一次登录时，将信息发送给服务器，服务器接收到信息，处理完毕，根据这些信息生成一个随机ID。
该ID就代表该用户。将该ID字符串设置在set-cookie响应头中带给浏览器。浏览器依旧生成cookie文件，并保存随机ID。之后每一次请求都把该ID携带到服务器上。服务器通过辨识该ID，确定用户身份。

图片预览

在用户上传图片或者选择图片时，可以预览。

FileReader

HTML5新增的一个API。允许浏览器读取文件。

初始化：属性

方法：

fileReader.readAsDataURL方法

该方法可以接收一个文件信息对象作为参数，生成一个临时的图片文件地址

demo:

// 设置事件
file.onchange = function() {
	// 获取图片信息
	var info = this.files[0];
	// 初始化fileReader
	var fr = new FileReader();
	// 调用fr.readAsDataURL
	fr.readAsDataURL(info);
	// 监听onload事件
	fr.onload = function() {
		// 生成img元素
		var img = new Image();
		// 设置src
		img.src = fr.result;
		// 上树
		document.body.appendChild(img)
	}
}
复制代码

结果:

window.URL.createObjectURL

代码：

file.onchange = function() {
	// 获取图片信息
	var info = this.files[0];
	// 生成路径
	var src = window.URL.createObjectURL(info);
	console.log(src)
	// 生成img元素
	var img = new Image();
	// 设置src
	img.src = src;
	// 上树
	document.body.appendChild(img);
}
复制代码

AJAX2.0

在AJAX2.0中，新增了一个构造函数: FormData

它是用于获取表单数据的一个构造函数。

查看：

初始化: 需要一个原生表单元素作为参数

forEach

该方法可以遍历FormData实例对象的存储数据。

// 调用forEach方法
fd.forEach(function(value, index) {
	console.log(value, index)
})
复制代码

get

该方法可以获取其中一项数据

表单状况：

调用api

fd.get("sex") => "男"
fd.get("hobby") => "打篮球"
复制代码

get方法如果获取一个key对应多个value的情况，只能够得到第一项。

getAll

get方法的进化版本，可以获取多项。 返回值是一个数组

跨域

域

域就是区域的意思。表示的是服务器在网上所占据的范围。

同源策略

在浏览器请求服务器上的内容的时候，遵循同源策略，也就是如果是同一个域，遵循同源策略，如果不是同一个域，则不遵循同源策略。

跨域

遵守同源策略，就是没跨域，不遵守就是跨域。AJAX不能跨域。但是静态资源不受同源策略的限制。
当协议、域名、端口有任何一个不一致时，就叫做跨域。

demo1:

http://localhost:3000/index.html 
http://localhost:3001/checkName
复制代码

跨域，因为端口不一致

demo2:

http://localhost:3000/index.html
http://192.168.2.187:3000/checkName
复制代码

跨域，因为域名不一致

demo3:

http://localhost:3000/index.html
https://localhost:3000/checkName
复制代码

跨域，因为协议不一致

跨域演示

启动服务器: http://localhost:3000

在该服务器下的index.html页面中发送请求:

举例：

$.ajax({
	url: "http://192.168.2.187:3000/data/1.json",
	type: "get",
	dataType: "json",
	success: function(data) { 
	}
})
复制代码

此时，属于跨域

因为页面的域是localhost而ajax的目标域是192.168.2.187

JSONP

JSONP是一种发送请求得到跨域资源的方式。

JSON是一种数据格式。

JSONP的使用方式：

预先定义一个函数，再将一个script标签的src对接到目标服务器的接口上。script标签可以发送跨域请求，可以执行代码。得到的数据是一个函数的执行，参数是我们要的JSON。函数就是我们预先定义出来的函数。再在函数内部处理JSON。

预先定义一个函数:

function aaa(json) {
  console.log(json.data);
}
复制代码

script标签发送请求

<script src="http://localhost:3001/checkName?username=zhangsan"></script>
复制代码

返回数据

aaa({"error": 0, "data": "可以使用"})
复制代码

jquery中的jsonp

将dataType修改为jsonp即可

$.ajax({
	url: "http://localhost:3001/checkName",
	data: {
		username: "zhangsan",
	},
	type: "get",
	// dataType在为json时表示发送的是一个AJAX请求，在为jsonp时，表示发送的是一个jsonp
	dataType: "jsonp",
	success: function(data) {
		console.log(data);
	}
})
复制代码

得到的数据：

自定义JSONP函数

// 定义一个函数 该函数用于发送jsonp请求
function sendJSONP(url, data, callback, callbackName) {
	// 在这里定义回调函数 
	window[callbackName] = callback;
	// 创建script标签
	var script = document.createElement("script");
	// 设置src
	script.src = url + "?" + data + "&callback=" + callbackName;
	document.body.appendChild(script)
	script.onload = function() {
		delete window[callbackName];
		document.body.removeChild(this);
	}
}
复制代码