李南江老师 Ajax 笔记に - Ajax | Nico Niconi = Nekoaimer = 清心如水，清水即心

# 01-get-post

可以通过 form 标签的 method 属性指定发送请求的类型
如果是 get 请求会将提交的数据拼接到 URL 后面 ?userName=lnj&userPwd=123456
如果是 post 请求会将提交的数据放到请求头中
GET 请求和 POST 请求的异同
相同点:
- 都是将数据提交到远程服务器
不同点:
- 提交数据存储的位置不同
- GET 请求会将数据放到 URL 后面
- POST 请求会将数据放到请求头中
- 提交数据大小限制不同
- GET 请求对数据有大小限制
- POST 请求对数据没有大小限制
GET/POST 请求应用场景
- GET 请求用于提交非敏感数据和小数据
- POST 请求用于提交敏感数据和大数据

# 01-get-post.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>01-get-post</title>
	</head>
	<body>
	<form action="01-get-post.php" method="post">
	<input type="text" name="userName"><br>
	<input type="password" name="userPwd"><br>
	<input type="submit" value="提交"><br>
	</form>
	</body>
	</html>

# 01-get-post.php

	<?php
	//print_r($_GET);
	//echo $_GET["userName"];
	//echo $_GET["userPwd"];

	print_r($_POST);
	echo $_POST["userName"];
	echo $_POST["userPwd"];
	?>

# 02-post-file

注意:

上传文件一般使用 POST 提交
上传文件必须设置 enctype="multipart/form-data"
上传的文件在 PHP 中可以通过 $_FILES 获取
PHP 中文件默认会上传到一个临时目录，接收完毕之后会自动删除

默认情况下服务器对上传文件的大小是有限制的，如果想修改上传文件的限制可以修改 php.ini 文件 wampserver\wamp64\bin\apache\apache2.4.46\bin\php.ini

file_uploads = On ; 是否允许上传文件 On/Off 默认是 On
upload_max_filesize = 2048M ; 上传文件的最大限制
post_max_size = 2048M ; 通过 Post 提交的最多数据
max_execution_time = 30000 ; 脚本最长的执行时间单位为秒
max_input_time = 30000 ; 接收提交的数据的时间限制单位为秒
memory_limit = 2048M ; 最大的内存消耗

# 2-post-file.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>02-post-file</title>
	</head>
	<body>

	<form action="02-post-file.php" method="post" enctype="multipart/form-data">
	<input type="file" name="upFile"><br>
	<input type="submit" value="上传"><br>
	</form>
	</body>
	</html>

# 02-post-file.php

	<?php
	// print_r($_POST);
	// print_r($_FILES);

	// 1. 获取上传文件对应的字典
	$fileInfo = $_FILES["upFile"];
	print_r($fileInfo);

	// 2. 获取上传文件的名称
	$fileName = $fileInfo["name"];
	echo $fileName;

	// 3. 获取上传文件保存的临时路径
	$filePath = $fileInfo["tmp_name"];
	echo $filePath;

	// 4. 移动文件
	move_uploaded_file($filePath, "./source/" . $fileName);
	?>

# 03-ajax-get

什么是 Ajax?
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

# 03-ajax-get.html

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>03-ajax-get</title>
	</head>

	<body>
	<script>
	window.addEventListener('load', (ev) => {
	const btn = document.querySelector('button')

	btn.onclick = function (ev1) {
	// 1. 创建一个异步对象
	const xmlhttp = new XMLHttpRequest()

	/*
	2. 设置请求方式和请求地址
	2.1 method：请求的类型；GET 或 POST
	2.2 url：文件在服务器上的位置
	2.3 async：true（异步）或 false（同步）
	*/
	xmlhttp.open('GET', "03-ajax-get.php", true)

	// 3. 发送请求
	xmlhttp.send()

	// 4. 监听状态的变化
	xmlhttp.onreadystatechange = function (ev2) {
	/* 4.1XHR readyState
	0: 请求未初始化
	1: 服务器连接已建立
	2: 请求已接收
	3: 请求处理中
	4: 请求已完成，且响应已就绪
	*/
	if (xmlhttp.readyState === 4) {
	// 4.2 判断是否请求成功
	if (xmlhttp.status >= 200 && xmlhttp.status < 300 \|\| xmlhttp.status === 304) {
	// 5. 处理返回的结果
	console.log("接收到服务器返回的数据");
	} else {
	console.log("没有接收到服务器返回的数据");

	}
	}
	}
	}
	})
	</script>
	<button>发送请求</button>
	</body>

	</html>

# 03-ajax-get.php

	<?php
	//sleep(5);
	echo "ajax get page";
	// echo $_GET["userName"];
	echo "<br>";
	// echo $_GET["userPwd"];
	?>

# 04-ajax-get

# 04-ajax-get.html

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>04-ajax-get</title>
	</head>

	<body>
	<script>
	window.addEventListener('load', (ev) => {
	const btn = document.querySelector('button')
	btn.onclick = function (ev1) {
	var xhr;
	if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
	xhr = new XMLHttpRequest();

	else // code for IE6, IE5
	xhr = new ActiveXObject("Microsoft.XMLHTTP");

	// 在 IE 浏览器中，如果通过 Ajax 发送 GET 请求，那么 IE 浏览器认为同一个 URL 只有一个结果
	// 04 - ajax - get.txt === https://nekoaimer.com
	xhr.open('GET', '04-ajax-get.txt?t=' + +new Date, true)
	xhr.send()

	xhr.onreadystatechange = function (ev2) {
	if (xhr.readyState === 4) {
	if (xhr.status >= 200 && xhr.status < 300 \|\| xhr.status === 304)
	console.log(xhr.responseText);
	else
	console.log('请求失败');
	}
	}
	}
	})
	</script>
	<button>发送请求</button>
	</body>

	</html>

# 04-ajax-get.txt

https://nekoaimer.com

# 05-ajax-get (封装)

封装 Ajax

# myAjax.js

	function obj2str(obj) {
	obj.t = +new Date
	const res = []
	// 1. 在 URL 中是不可以出现中文的，如果出现了中文需要转码
	// 2. 可以调用 encodeURIComponent 方法
	// 3.URL 中只可以出现字母 / 数字 / 下划线 / ASCII 码
	for (const key in obj) {
	res.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]))
	}
	return res.join('&') // userName=nekoaimer&userPwd=1234567
	}

	function ajax(url, obj, timeout, success, error) {
	// 0. 将对象转换为字符串
	const str = obj2str(obj) // key=value&key=value

	// 1. 创建一个异步对象
	var xmlhttp, timer;
	if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
	}
	else { // code for IE6, IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}

	/*
	2. 设置请求方式和请求地址
	2.1 method：请求的类型；GET 或 POST
	2.2 url：文件在服务器上的位置
	2.3 async：true（异步）或 false（同步）
	*/
	xmlhttp.open('GET', `${url}?${str}`, true)

	// 3. 发送请求
	xmlhttp.send()

	// 4. 监听状态的变化
	xmlhttp.onreadystatechange = function (ev2) {
	/* 4.1XHR readyState
	0: 请求未初始化
	1: 服务器连接已建立
	2: 请求已接收
	3: 请求处理中
	4: 请求已完成，且响应已就绪
	*/
	if (xmlhttp.readyState === 4) {
	clearInterval(timer);

	// 4.2 判断是否请求成功
	if (xmlhttp.status >= 200 && xmlhttp.status < 300 \|\| xmlhttp.status === 304) {
	// 5. 处理返回的结果
	success(xmlhttp)
	} else {
	error(xmlhttp)
	}
	}
	}

	// 判断外界是否传入了超时时间
	if (timeout) {
	timer = setInterval(function() {
	console.log("中断请求");
	xmlhttp.abort()
	clearInterval(timer)
	}, timeout)
	}
	}

# 05-ajax-get.html

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>05-ajax-get</title>
	<script src="myAjax.js"></script>
	<script>
	window.onload = function (ev) {
	var oBtn = document.querySelector("button");
	var res = encodeURIComponent("wd=张三");
	console.log(res) // wd%3D%E5%BC%A0%E4%B8%89

	oBtn.onclick = function (ev1) {
	// url?key=value&key=value;
	const obj = {
	"userName": "nekoaimer",
	"userPwd": "1234567"
	}
	ajax("05-ajax-get.php", obj, 3000,
	function (xhr) {
	console.log(xhr.responseText);
	},
	function (xhr) {
	console.log("请求失败");
	});
	}
	}
	</script>

	</head>

	<body>
	<button>发送请求</button>
	</body>

	</html>

# 05-ajax-get.php

	<?php
	//sleep (5); //sleep () 函数延迟代码执行若干秒
	// echo "ajax get page";
	echo 'username:' . $_GET["userName"];
	echo '&';
	echo 'password:' . $_GET["userPwd"];
	?>

# 06-ajax-post (封装)

# myAjax2.js

	function obj2str(data) {
	data = data \|\| {};
	data.t = +new Date
	const res = []
	// 1. 在 URL 中是不可以出现中文的，如果出现了中文需要转码
	// 2. 可以调用 encodeURIComponent 方法
	// 3.URL 中只可以出现字母 / 数字 / 下划线 / ASCII 码
	for (const key in data) {
	res.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
	}
	return res.join('&') // userName=nekoaimer&userPwd=1234567
	}

	function ajax(option) {
	console.log(option);
	// 0. 将对象转换为字符串
	const str = obj2str(option.data) // key=value&key=value

	// 1. 创建一个异步对象
	let xmlhttp, timer;
	if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
	}
	else { // code for IE6, IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}

	/*
	2. 设置请求方式和请求地址
	2.1 method：请求的类型；GET 或 POST
	2.2 url：文件在服务器上的位置
	2.3 async：true（异步）或 false（同步）
	*/
	// xmlhttp.open(option.type, option.url, true)

	if(option.type.toLowerCase() === "get") {
	xmlhttp.open(option.type, option.url+"?"+str, true);
	// 3. 发送请求
	xmlhttp.send();
	} else {
	xmlhttp.open(option.type, option.url,true);
	// 注意点：必须放到 open 和 send 之间
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send(str);
	}

	// 4. 监听状态的变化
	xmlhttp.onreadystatechange = function (ev2) {
	/* 4.1XHR readyState
	0: 请求未初始化
	1: 服务器连接已建立
	2: 请求已接收
	3: 请求处理中
	4: 请求已完成，且响应已就绪
	*/
	if (xmlhttp.readyState === 4) {
	clearInterval(timer);

	// 4.2 判断是否请求成功
	if (xmlhttp.status >= 200 && xmlhttp.status < 300 \|\| xmlhttp.status === 304) {
	// 5. 处理返回的结果
	option.success(xmlhttp)
	} else {
	option.error(xmlhttp)
	}
	}
	}

	// 5. 判断外界是否传入了超时时间
	if (option.timeout) {
	timer = setInterval(function() {
	console.log("中断请求");
	xmlhttp.abort()
	clearInterval(timer)
	}, option.timeout)
	}
	}

# 06-ajax-post.html

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>06-ajax-post</title>
	<script src="myAjax2.js"></script>
	<script>
	window.onload = function (ev) {
	var oBtn = document.querySelector("button");
	oBtn.onclick = function (ev1) {
	ajax({
	type: "POST",
	url: "06-ajax-post.php",
	data: {
	"username": "nekoaimer",
	"password": "1234567"
	},
	timeout: 3000,
	success(xhr) {
	console.log(xhr.responseText);
	},
	error(xhr) {
	console.log("请求失败");
	}
	});
	}
	}
	</script>
	</head>

	<body>
	<button>发送请求</button>
	</body>

	</html>

# 06-ajax-post.php

	<?php
	echo 'username:' . $_POST["username"];
	echo '&';
	echo 'password:' . $_POST["password"];
	?>

# 07-ajax-jquery

# 07-ajax-jquery.html

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>07-ajax-jquery</title>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script>
	window.onload = function (ev) {
	const btn = document.querySelector("button");
	btn.onclick = function (ev1) {
	$.ajax({
	url: "07-ajax-jquery.php",
	type: "post",
	data: "username=nekoaimer&password=1234567",
	success: function (msg) {
	console.log(msg);
	},
	error: function (xhr) {
	console.log(xhr.status);
	}
	});
	}
	}
	</script>
	</head>

	<body>
	<button>发送请求</button>
	</body>

	</html>

# 07-ajax-jquery.php

	<?php
	// echo 'username:' . $_GET["username"];
	// echo '&';
	// echo 'password:' . $_GET["password"];

	echo 'username:' . $_POST["username"];
	echo '&';
	echo 'password:' . $_POST["password"];
	?>

# 08-ajax-xml

# 08-info.xml

	<?xml version="1.0" encoding="UTF-8" ?>
	<person>
	<name>saber</name>
	<age>33</age>
	</person>

# 08-ajax-xml.php

	<?php
	// 执行结果中有中文，必须在 php 文件顶部设置
	//header("content-type:text/html; charset=utf-8");
	// 如果 PHP 中需要返回 XML 数据，也必须在 PHP 文件顶部设置
	header("content-type:text/xml; charset=utf-8");

	echo file_get_contents("08-info.xml");

# 08-ajax-xml.html

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>08-ajax-xml</title>
	<script src="myAjax2.js"></script>
	<script>
	window.onload = function (ev) {
	var oBtn = document.querySelector("button");
	oBtn.onclick = function (ev1) {
	ajax({
	type: "get",
	url: "08-ajax-xml.php",
	success: function (xhr) {
	// console.log(xhr.responseXML);
	// console.log(document);
	var res = xhr.responseXML;
	console.log(res.querySelector("name").innerHTML);
	console.log(res.querySelector("age").innerHTML);
	},
	error: function (xhr) {
	console.log(xhr.status);
	}
	})
	}
	}
	</script>
	</head>

	<body>
	<button>发送请求</button>
	</body>

	</html>

# 09-ajax-test

# 09-ajax-test.xml

	<?xml version="1.0" encoding="UTF-8" ?>
	<products>
	<nz>
	<title>甜美\|女装</title>
	<des>人见人爱,花间花开,甜美系列</des>
	<image>images/1.jpg</image>
	</nz>
	<bb>
	<title>奢华驴包</title>
	<des>送女友,送情人,送学妹,一送一个准系列</des>
	<image>images/2.jpg</image>
	</bb>
	<tx>
	<title>键盘拖鞋</title>
	<des>程序员专属拖鞋, 屌丝气息浓郁, 你值得拥有</des>
	<image>images/3.jpg</image>
	</tx>
	</products>

# 09-ajax-test.text

	{
	"nz": {
	"title": "甜美\|女装",
	"des": "人见人爱,花间花开,甜美系列",
	"image": "images/1.jpg"
	},
	"bb": {
	"title": "奢华驴包",
	"des": "送女友,送情人,送学妹,一送一个准系列",
	"image": "images/2.jpg"
	},
	"tx": {
	"title": "键盘拖鞋",
	"des": "程序员专属拖鞋, 屌丝气息浓郁, 你值得拥有",
	"image": "images/3.jpg"
	}
	}

# 09-ajax-test.html

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>09-ajax-test</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	div {
	width: 300px;
	height: 300px;
	border: 1px solid #000;
	margin: 50px auto;
	text-align: center;
	background: antiquewhite;
	}

	img {
	width: 200px;
	height: 200px;
	display: block;
	margin: 10px auto 10px;
	border: 1px solid #000;
	}

	p {
	text-align: center;
	background: burlywood;
	}
	</style>
	<script src="myAjax2.js"></script>
	<script>
	window.onload = function (ev) {
	// 1. 获取需要设置的元素
	let oTitle = document.querySelector("#title");
	let oDes = document.querySelector("#des");
	let oImg = document.querySelector("img");

	// 2. 获取所有按钮
	let oBtns = document.querySelectorAll("button");

	// 3. 给所有按钮添加点击事件
	for (let i = 0; i < oBtns.length; i++) {
	oBtns[i].onclick = function () {
	let self = this;
	// 4. 发送 Aajx 请求到服务器
	ajax({
	type: "get",
	url: "09-ajax-test.php",
	data: { "name": this.getAttribute("name") },
	timeout: 3000,
	success(xhr) {
	/*version1
	let res = xhr.responseText.split("\|");
	console.log(res);
	oTitle.innerHTML = res[0];
	oDes.innerHTML = res[1];
	oImg.setAttribute("src", res[2]);
	*/

	/*version2
	let name = self.getAttribute("name");
	let res = xhr.responseXML;
	let title = res.querySelector(name + ">title").innerHTML;
	console.log(title);
	let des = res.querySelector(name + ">des").innerHTML;
	let image = res.querySelector(name + ">image").innerHTML;
	oTitle.innerHTML = title;
	oDes.innerHTML = des;
	oImg.setAttribute("src", image);
	*/

	// version3
	let name = self.getAttribute("name");
	let str = xhr.responseText;
	let obj = JSON.parse(str);
	let subObj = obj[name];
	// console.log('obj', obj);
	// console.log('subObj', subObj);

	oTitle.innerHTML = subObj.title;
	oDes.innerHTML = subObj.des;
	oImg.setAttribute("src", subObj.image);
	},
	error(xhr) {
	console.log(xhr)
	}
	})
	}
	}
	}
	</script>
	</head>

	<body>

	<div>
	<p id="title">商品标题名称</p>
	<img src="" alt="">
	<p id="des">商品描述信息</p>
	<button name="nz">女装</button>
	<button name="bb">包包</button>
	<button name="tx">拖鞋</button>
	</div>
	</body>

	</html>

# 09-ajax-test.php

	<?php

	/* version1
	// 1. 定义字典保存商品信息
	$products = array (
	"nz" => array ("title" => "甜美女装", "des" => "人见人爱，花间花开，甜美系列", "image" => "images/1.jpg"),
	"bb" => array ("title" => "奢华驴包", "des" => "送女友，送情人，送学妹，一送一个准系列", "image" => "images/2.jpg"),
	"tx" => array ("title" => "键盘拖鞋", "des" => "程序员专属拖鞋，屌丝气息浓郁，你值得拥有", "image" => "images/3.jpg")
	);

	// 2. 获取前端传递的参数
	$name = $_GET ["name"];
	//echo $name;

	// 3. 根据前端传入的 key, 获取对应的字典
	$product = $products [$name];
	//print_r ($product);

	// 4. 将小字典中的内容取出来返回给前端
	echo $product ["title"];
	echo "\|";
	//echo '<br>';
	echo $product ["des"];
	echo "\|";
	echo $product ["image"];
	*/

	/* version2
	header("content-type:text/xml; charset=utf-8");
	echo file_get_contents("09-ajax-test.xml");
	*/

	// version3
	echo file_get_contents("09-ajax-test.txt");

# 10-ajax-json

# 10-ajax-json.html

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>12-ajax-json</title>
	<script src="myAjax2.js"></script>
	<script>
	window.onload = function (ev) {

	var oBtn = document.querySelector("button");
	oBtn.onclick = function (ev1) {
	ajax({
	type: "get",
	url: "10-ajax-json.php",
	success: function (xhr) {
	// console.log(xhr.responseText);
	var str = xhr.responseText;
	/*
	在低版本的 IE 中，不可以使用原生的 JSON.parse 方法，但是可以使用 json2.js 这个框架来兼容
	*/
	var obj = JSON.parse(str);
	// console.log(obj);
	console.log(obj.name);
	console.log(obj.age);
	},
	error: function (xhr) {
	console.log(xhr.status);
	}
	})
	}
	}
	</script>
	</head>

	<body>
	<button>发送请求</button>
	</body>

	</html>

# 10-ajax-json.php

	<?php

	echo file_get_contents("10-ajax-json.txt");

# 10-ajax-json.txt

	{
	"name":"saber",
	"age":"16"
	}

cookie: 会话跟踪技术客户端
session: 会话跟踪技术服务端
cookie 作用:
- 将网页中的数据保存到浏览器中
cookie 生命周期:
- 默认情况下生命周期是一次会话 (浏览器被关闭)
- 如果通过 expires = 设置了过期时间，并且过期时间没有过期，那么下次打开浏览器还是存在
- 如果通过 expires = 设置了过期时间，并且过期时间已经过期了，那么会立即删除保存的数据
cookie 注意点:
- cookie 默认不会保存任何的数据
- cookie 不能一次性保存多条数据，要想保存多条数据，只能一条一条的设置
- cookie 有大小和个数的限制
- 个数限制: 20~50
- 大小限制: 4KB 左右
cookie 作用范围:
- 同一个浏览器的同一个路径下访问
- 如果在同一个浏览器中，默认情况下下一级路径就可以访问
- 如果在同一个浏览器中，想让上一级目录也能访问保存的 cookie, 那么需要添加一个 path 属性才可以；
11-cookie.html

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>11-cookie</title>
	<script>
	window.onload = function (ev) {
	// const date = new Date();
	// date.setDate(date.getDate() + 1);
	// document.cookie = "age=16;expires=" + date.toGMTString() + ";";

	//cookie 不能一次性保存多条数据，要想保存多条数据，只能一条一条的设置
	// document.cookie = "name=lain;age=16;gender=male;";

	document.cookie = "name=lain;";
	document.cookie = "age=16;";
	console.log(document.cookie); // name=lain

	/*
	- document.cookie = "name=zs;path=/;";
	- 例如:
	- 保存到了 www.it666.com/jQuery/Ajax/ 路径下，
	- 我们想在 www.it666.com/jQuery/Ajax/13-weibo/,
	- 和 www.it666.com/jQuery/ 路径下也能访问
	- 例如:
	- 我们在 www.it666.com 下面保存了一个 cookie,
	- 那么我们在 edu.it666.com 中是无法访问的
	- 如果想在 edu.it666.com 中也能访问，那么我们需要再添加一个 domain 属性才可以；
	- document.cookie = "name=zs;path=/;domain=it666.com;";
	*/
	// document.cookie = "name=lain;path=/;domain=127.0.0.1;";
	}
	</script>
	</head>

	<body>

	</body>

	</html>

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>16-cookie-封装</title>
	<script>
	window.onload = function (ev) {
	// document.cookie = "age=88;";

	// addCookie("gender", "male");
	// addCookie("score", "998", 1, "/", "127.0.0.1");
	function addCookie(key, value, day, path, domain) {
	// 1. 处理默认保存的路径
	// if(!path){
	// var index = window.location.pathname.lastIndexOf("/")
	// var currentPath = window.location.pathname.slice(0, index);
	// path = currentPath;
	// }
	var index = window.location.pathname.lastIndexOf("/")
	var currentPath = window.location.pathname.slice(0, index);
	path = path \|\| currentPath;
	// 2. 处理默认保存的 domain
	domain = domain \|\| document.domain;
	// 3. 处理默认的过期时间
	if (!day) {
	document.cookie = key + "=" + value + ";path=" + path + ";domain=" + domain + ";";
	} else {
	var date = new Date();
	date.setDate(date.getDate() + day);
	document.cookie = key + "=" + value + ";expires=" + date.toGMTString() + ";path=" + path + ";domain=" + domain + ";";
	}
	}

	function getCookie(key) {
	// console.log(document.cookie);
	var res = document.cookie.split(";");
	// console.log(res);
	for (var i = 0; i < res.length; i++) {
	// console.log(res[i]);
	var temp = res[i].split("=");
	// console.log(temp);
	if (temp[0].trim() === key) {
	return temp[1];
	}
	}
	}
	console.log(getCookie("name"));

	// 默认情况下只能删除默认路径中保存的 cookie, 如果想删除指定路径保存的 cookie, 那么必须在删除的时候指定路径才可以
	function delCookie(key, path) {
	addCookie(key, getCookie(key), -1, path);
	}
	delCookie("name", "/");
	}
	</script>
	</head>

	<body>

	</body>

	</html>

b站视频教程 ：https://www.bilibili.com/video/BV17W41137jn

Ajax

# 01-get-post

# 01-get-post.html

# 01-get-post.php

# 02-post-file

# 2-post-file.html

# 02-post-file.php

# 03-ajax-get

# 03-ajax-get.html

# 03-ajax-get.php

# 04-ajax-get

# 04-ajax-get.html

# 04-ajax-get.txt

# 05-ajax-get (封装)

# myAjax.js

# 05-ajax-get.html

# 05-ajax-get.php

# 06-ajax-post (封装)

# myAjax2.js

# 06-ajax-post.html

# 06-ajax-post.php

# 07-ajax-jquery

# 07-ajax-jquery.html

# 07-ajax-jquery.php

# 08-ajax-xml

# 08-info.xml

# 08-ajax-xml.php

# 08-ajax-xml.html

# 09-ajax-test

# 09-ajax-test.xml

# 09-ajax-test.text

# 09-ajax-test.html

# 09-ajax-test.php

# 10-ajax-json

# 10-ajax-json.html

# 10-ajax-json.php

# 10-ajax-json.txt

# 11-cookie

# 12-cookie - 封装

李南江老师 Ajax 笔记 いち

尚硅谷 3小时Ajax入门到精通 いち

李南江老师 Ajax 笔记いち

尚硅谷 3小时Ajax入门到精通いち