一：BOM常用对象

BOM常用对象：window、screen、history、location、navigator、event

1、history：保存当前窗口的历史记录（历史url）

作用：
前进：history.go(1);
后退：history.go(-1);
刷新：history.go(0);

2、location：保存当前窗口的正在打开的url

1、常识：一个url由5部分组成

http://127.0.0.1:8020/bom02/new/01-3.html
https://www.baidu.com/s?wd=178&rsv_spt=1...
协议：http/https（请求响应模式）/ftp（传输文件）/ws（广播收听模式：直播） - 网页的功能不同
主机号/域名：www.baidu.com/127.0.0.1 - 主机号不方便记忆所以多半都会购买域名，而且127.0.0.1只能访问自己
端口号：:8020 - 默认端口：http - 80 https - 443，默认端口可以省略不写
文件的相对路径：new/01-3.html /s -百度加密了
查询字符串：?wd=178&rsv_spt=1... - 表单提交到服务器的东西 - 请求消息
一般来说一个网址一定有5部分：协议://域名:端口号/文件路径?查询字符串

2、属性：可直接用console.log(location)可以查看到有哪些属性

作用：获取：协议、域名、端口号、文件路径、查询字符串

3、API：跳转

location="新url"
location.href="新url"
location.assign("新url");
以上三个操作功能相同都是跳转页面，意味着以后不一定非要用a标签跳转

替换后禁止后退：location.replace("新url")
刷新：location.reload();

3、navigator：保存了当前浏览器的信息（浏览器的名称/版本号）

属性：navigator.userAgent;
根据字符串截取出浏览器名称&版本号：本来的目的是为了做兼容，但是没用，因为所有的API前辈们都已经设置好了兼容

案例：判断是什么浏览器及浏览器的类型
            <body>
		<div id="d1"></div>
		<script type="text/javascript">
			var str=navigator.userAgent;//截取这句话得到关键部分，判断出浏览器和版本号
			console.log(str);
			//判断出浏览器
			var browser,version;
			if(str.indexOf("OPR")!=-1){
				browser="Opera";
				d1.style.background="purple";
				d1.onclick=function(){
					alert("1111")
				}
			}else if(str.indexOf("Chrome")!=-1){
				browser="Chrome";
				d1.style.background="pink";
				d1.onclick=function(){
					alert("2222")
				}
			}else if(str.indexOf("Safari")!=-1){
				browser="Safari";
				d1.style.background="gold";
				d1.onclick=function(){
					alert("3333")
				}
			}else if(str.indexOf("Firefox")!=-1){
				browser="Firefox";
				d1.style.background="red";
				d1.onclick=function(){
					alert("4444")
				}
			}else if(str.indexOf("MSIE")!=-1){
				browser="IE";
				d1.style.background="black";
				d1.onclick=function(){
					alert("5555")
				}
			}		
			//判断出版本号
			if(browser=="Opera"){
				var i=str.indexOf("OPR")+4;
				version=str.substr(i,4);
			}else{
				var i=str.indexOf(browser)+browser.length+1;
				version=str.substr(i,4);
			}		
			document.write("<h1>浏览器:"+browser+"</h1>");
			document.write("<h1>版本号:"+version+"</h1>");
		</script>
	</body>

4、event：事件对象

事件：多半用户触发或浏览器自动触发的操作

1、绑定事件：3种

a、在HTML元素上绑定
<elem on事件名="js语句"></elem>
缺点：
1、没有实现JS与HTML的分离 - 要HTML（内容）/CSS（样式）/JS（行为）分离
2、无法动态绑定事件 - 一次只能绑定一个元素
3、无法同时绑定多个函数对象

b、使用JS的事件属性绑定 elem.on事件名=function(){js语句}
优：1、实现JS与HTML的分离
2、可以动态绑定事件
缺：1、无法同时绑定多个函数对象 - 算不上是缺点，因为可以写一起

c、使用JS的API绑定事件：

主流：elem.addEventListener("事件名",callback)
老IE：elem.attachEvent("on事件名",callback);
兼容：if(elem.addEventListener){
	elem.addEventListener("事件名",callback)
      }else{
	elem.attachEvent("on事件名",callback);
      }

优：1、实现JS与HTML的分离
2、动态绑定事件
3、同时绑定多个函数对象
缺：需要处理兼容性问题

2、事件周期：

主流：3个周期
1、捕获阶段：由外向内，记录着要执行的事件
2、目标触发：当前点击的元素优先出发
3、冒泡触发：由内向外的冒泡触发事件

老IE：2个周期
没有捕获阶段

3、获取到事件对象event：

主流：事件函数中传入一个形参e，就可以自动接住事件对象event
老IE：window.event;
兼容：event;不光老IE可用，主流浏览器也可以使用\

获取到了事件对象event可以做的操作：
1、获取鼠标的位置

 e.screenX/Y;  --相对于屏幕
e.clientX/Y;  --相对于浏览器客户端
e.pageX/Y;  --相对于网页

2、阻止冒泡：重要在于面试中/笔试中，但是开发中绝对不会阻止冒泡，更需要利用冒泡

主流：e.stopPropagation();
老IE：e.cancelBubble=true;
兼容：if(e.stopPropagation){
	e.stopPropagation()
     }else{
	e.cancelBubble=true;
     }

阻止冒泡案例1
	<body>
		<div id="max">
			<div id="middle">
				<div id="min"></div>
			</div>
		</div>
		<script type="text/javascript">
			max.addEventListener("click",function(){
				var e=event;
				this.style.background="yellow";
				alert(this.id);
				this.style.background="";
				if(e.stopPropagation){
				e.stopPropagation()
			      }else{
				e.cancelBubble=true;
			      }
			})
			middle.addEventListener("click",function(){
				var e=event;
				this.style.background="yellow";
				alert(this.id);
				this.style.background="";
				if(e.stopPropagation){
				e.stopPropagation()
			      }else{
				e.cancelBubble=true;
			      }
			})
			min.addEventListener("click",function(){
				var e=event;
				this.style.background="yellow";
				alert(this.id);
				this.style.background="";
				if(e.stopPropagation){
					e.stopPropagation()
			    }else{
					e.cancelBubble=true;
			    }
			})
		</script>	
	</body>

阻止冒泡案例2：选项卡
	<body>
		<div id="max">
			<div id="middle">
				<div id="min"></div>
			</div>
		</div>
		<script type="text/javascript">
			max.addEventListener("click",function(){
				var e=event;
				this.style.background="yellow";
				alert(this.id);
				this.style.background="";
				if(e.stopPropagation){
				e.stopPropagation()
			      }else{
				e.cancelBubble=true;
			      }
			})
			middle.addEventListener("click",function(){
				var e=event;
				this.style.background="yellow";
				alert(this.id);
				this.style.background="";
				if(e.stopPropagation){
				e.stopPropagation()
			      }else{
				e.cancelBubble=true;
			      }
			})
			min.addEventListener("click",function(){
				var e=event;
				this.style.background="yellow";
				alert(this.id);
				this.style.background="";
				if(e.stopPropagation){
					e.stopPropagation()
			    }else{
					e.cancelBubble=true;
			    }
			})
		</script>	
	</body>

3、事件委托（利用冒泡）：

为什么：优化，每绑定一个事件，相当于就创建了一个事件监听对象，创建的对象越多，网页的性能越低下
建议：把事件都绑定在自己的父元素身上一次即可
获取目标元素：触发的元素 - 永远不变就是你触发到的元素

主流：e.target;
老IE：e.srcElement;
兼容：e.srcElement;不光老IE可用，主流浏览器也可以使用

事件委托案例1：计算器
        <body>
		<div id="d1">
			<textarea id="txt" readonly></textarea>
			<button>1</button>
			<button>2</button>
			<button>3</button>
			<button>4</button>
			<button>5</button>
			<button>6</button>
			<button>7</button>
			<button>8</button>
			<button>9</button>
			<button>0</button>
			<button>.</button>
			<button>+</button>
			<button>-</button>
			<button>*</button>
			<button>/</button>
			<button>%</button>
			<button>C</button>
			<button>=</button>
		</div>	
		<script type="text/javascript">
			d1.onclick=(e)=>{
				e=event;
				var target=e.srcElement;
				if(target.nodeName=="BUTTON"){
					if(target.innerHTML=="C"){
						txt.innerHTML=""
					}else if(target.innerHTML=="="){
						txt.innerHTML=eval(txt.innerHTML);
					}else{
						txt.innerHTML+=target.innerHTML;
					}
				}
			}
		</script>
	</body>

事件委托案例2：选项卡
<body>
	<ul id="tree">
		<li class="closed"><span>考勤管理</span>
			<ul class="hide">
				<li class="li">日常考勤</li>
				<li class="li">请假申请</li>
				<li class="li">加班/出差</li>
			</ul>
		</li>
		<li class="closed"><span>信息中心</span>
			<ul class="hide">
				<li class="li">通知公告</li>
				<li class="li">公司新闻</li>
				<li class="li">规章制度</li>
			</ul>
		</li>
		<li class="closed"><span>协同办公</span>
			<ul class="hide">
				<li class="li">公文流转</li>
				<li class="li">文件中心</li>
				<li class="li">内部邮件</li>
				<li class="li">即时通信</li>
				<li class="li">短信提醒</li>
			</ul>
		</li>
	</ul>
	<script type="text/javascript">
		tree.onclick=e=>{
			e=event;
			var target=e.srcElement;
			if(target.nodeName=="SPAN"){
				target.parentNode.className=target.parentNode.className=="closed"?"open":"closed";
				target.nextElementSibling.className=target.nextElementSibling.className=="hide"?"show":"hide";
			}else if(target.className=="li"){
				target.className="li active";
			}
		}
	</script>
</body>

事件委托案例3：轮播
    <body>
		<div id="carousel" class="carousel">
			<div class="carousel_img">
				<img class="active" src="img/1.jpg"/>
				<img src="img/2.jpg"/>
				<img src="img/3.jpg"/>
			</div>
			<img src="img/3.jpg"/>
			<button><</button>
			<button>></button>
			<ul>
				<li dy="0" class="active"></li>
				<li dy="1"></li>
				<li dy="2"></li>
			</ul>
		</div>	
		<script type="text/javascript">
			var imgs=document.getElementsByTagName("img"),
			lis=document.querySelectorAll("li"),
			j=0;
			carousel.onclick=e=>{
				e=event;
				var target=e.srcElement;			
				if(target.nodeName=="BUTTON"){
					if(target.innerText==">"){
						j++;
						j==lis.length&&(j=0);
						lis.forEach((li,i)=>{
							li.className="";
							imgs[i].className="";
						})
						imgs[j].className="active";
						lis[j].className="active";					
					}else{
						j--;
						j==-1&&(j=lis.length-1);
						lis.forEach((li,i)=>{
							li.className="";
							imgs[i].className="";
						})
						imgs[j].className="active";
						lis[j].className="active";
					}
				}else if(target.nodeName=="LI"){
					j=parseInt(target.getAttribute("dy"));
					lis.forEach((li,i)=>{
							li.className="";
							imgs[i].className="";
						})
						imgs[j].className="active";
						lis[j].className="active";
				}
			}
		</script>
	</body>

4、阻止浏览器的默认行为：

哪些：比如：F5带来的刷新，F12带来的控制台，右键带来的菜单框，F11全屏，a自带跳转，submit自带提交...

主流：e.preventDefault();
老IE：e.returnValue=false;
兼容：if(e.preventDefault){
	e.preventDefault()
      }else{
        e.returnValue=false;
      }

阻止浏览器的默认行为的案例
        <body>
		<a id="a" href="https://www.baidu.com">百度</a>
		<form method="post">
			<input type="text" name="name" />
			<input id="inp" type="submit"/>
		</form>
		<script type="text/javascript">
                
         阻止右键带来的菜单框  
			window.oncontextmenu=e=>{
				console.log(1);
				e=event;
				if(e.preventDefault){
					e.preventDefault()
				}else{
					e.returnValue=false;
				}
			}
	
        阻止a标签自带跳转
			a.onclick=function(){
				console.log(1);
				e=event;
				if(e.preventDefault){
					e.preventDefault()
				}else{
					e.returnValue=false;
				}
			}
	阻止submit自带提交		
			inp.onclick=function(){
				console.log(1);
				e=event;
				if(e.preventDefault){
					e.preventDefault()
				}else{
					e.returnValue=false;
				}
			}

        阻止F5带来的刷新，F12带来的控制台，F11的全屏
			window.onkeydown=function(){
				e=event;
				if(e.keyCode==116||e.keyCode==123||e.keyCode==122){
					if(e.preventDefault){
						e.preventDefault()
			      	}else{
						e.returnValue=false;
			     	}
				}
			}
		</script>
	</body>

5、获取键盘的键码

e.keyCode;//不需要记忆，直接输出查看 或 百度 keyCode表

5、window对象

1、鼠标右击：window.oncontextmenu

2、键盘事件：window.onkeydown

6、扩展：客户端存储技术

以前使用cookie（缺点：大小有限2kb，30天必死），HTML5提出了一个新概念webStorage：2种（优：大小有限8mb，生命周期无限，缺点：老IE不支持）
1、localStorage：本地级 - 浏览器关闭甚至电脑关闭，第二天打开依然存在
2、sessionStorage：会话级 - 浏览器一旦关闭自动死亡
作用/用途：
1、数据可以跨页面传输
2、皮肤、主题
3、浏览器的历史记录

语法：非常简单，类似于对象：
添加：xxxxStorage.属性名="值";
获取：xxxxStorage.属性名;
删除：xxxxStorage.removeItem("属性名");//只会删除这一个
清空：xxxxStorage.clear();//删除所有

客户端存储技术案例1：皮肤/主题
        首页  <body id="bd" class="green">
		<h1>首页</h1>
		<a href="15news.html">新闻页</a>
		请选择皮肤/主题：
		<select id="sel">
			<option value="green">绿色</option>
			<option value="dark">黑色</option>
			<option value="pink">粉色</option>
			<option value="purple">紫色</option>
			<option value="gold">金色</option>
		</select>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus eligendi modi commodi repellendus doloribus quod odit voluptatum qui error minima provident omnis libero voluptatem molestias neque corrupti praesentium? Voluptatum earum!</p>
		<script type="text/javascript">
			if(localStorage.skin){
				bd.className=localStorage.skin;
			}	
			sel.onchange=e=>{
				e=event;
				var v=e.target.value;
				bd.className=v;
				
				localStorage.skin=v;
			}
		</script>
	</body>
        
       新闻页  <body id="bd">
		<h1>新闻页</h1>
		<a href="15index.html">首页</a>		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus eligendi modi commodi repellendus doloribus quod odit voluptatum qui error minima provident omnis libero voluptatem molestias neque corrupti praesentium? Voluptatum earum!</p>
		<script type="text/javascript">
			if(localStorage.skin){
				bd.className=localStorage.skin;
			}
		</script>
	</body>

客户端存储技术案例2：历史记录 +
 
    <body id="bd">
		<input id="inp" /><button id="btn">回车</button><button onclick="localStorage.clear();history.go(0)">清空历史记录</button><br>		
		<script type="text/javascript">
			if(localStorage.num===undefined){
				console.log(1);
				localStorage.arr=[];
				localStorage.num=1;
			}		
			if(localStorage.arr.length>0){
				var arr=localStorage.arr.split("&");
				for(var i=0;i<arr.length-1;i++){
					var div=document.createElement("div");
					var a=document.createElement("a");
					var obj=JSON.parse(arr[i]);
					for(var j in obj){
						if(j=="name"){
							a.innerHTML=obj[j];
						}else{
							a.href=obj[j];
						}
					}
					div.appendChild(a);
					bd.appendChild(div);
				}
			}		
			btn.onclick=()=>{
				var user=inp.value;
				var obj={};//
				if(user.indexOf("baidu")!=-1){
					obj.name="百度";	
				}else if(user.indexOf("jd")!=-1){
					obj.name="京东";	
				}else if(user.indexOf("taobao")!=-1){
					obj.name="淘宝";	
				}
				obj.href=user;
				localStorage.arr+=JSON.stringify(obj)+"&";
				location=user;
			}		
		</script>
	</body>

二：服务器端

1、概念：简单来说就是一台PC机

2、对于开发人员来说：

硬件服务器 - PC机
软件服务器 - 中间件（软件可以将你的电脑变为一个台服务器，其他人可以访问）

3、软件架构：服务器很重要

1、C/S - Client客户端/Server服务器端

举例：QQ、大型网络游戏
优点：用户体验较好、运行稳定、对带宽的要求低
缺点：占硬盘空间、更新过于复杂 - 服务器和客户端都要更新

2、B/S - Browser浏览器端/Server服务器端

举例：网页版QQ、网页游戏
优点：几乎不占硬盘、更新简单 - 只需要更新服务器端
缺点：体验感相对较差（越来越好的）、对带宽的要求较高

4、XAMPP软件 - 中间件

1、安装步骤：双击 -> 一路点下去

Apache - 用于运行PHP环境的服务，点击start
出现错误：
1、直接弹出一个警告框，你的电脑里缺少api-ms-win-crt-conio-l1-1-0.dll文件
解决：粘贴到c:/windows/sysWow64/里面
2、错误日志：error：apache shutdown unexpectedly - 端口号被占用了
解决：打开：D:\xampp\apache\conf\httpd.conf文件
查找：ctrl+F：listen 80
随意换为4位数
建议：你能用默认端口就不要去修改他，好处：不需要写出来
3、切忌安装时一定要安装在盘符下，不可以安装在某个文件夹内
4、如果以上三种解放方案都不行，说明系统问题-重装系统

2、如何访问apache服务器：其实apache控制着一个文件夹：D:\xampp\htdocs

打开浏览器：
127.0.0.1:端口号
localhost:端口号
主机号：代表自己的电脑

3、搭建一个自己的服务器端应用：

把你的任意一个项目 - 复制到D:\xampp\htdocs

4、其他人来访问：需要找到ipv4

打开cmd：ipconfig
172.168.20.xxx

5、添加网页小图标：

随便一张图片：名字改为：favicon.ico
放到D:\xampp\htdocs

6、修改顶级域名：- 假象（没花钱，只有自己用）

打开C:\Windows\System32\drivers\etc\hosts
问题1：系统文件不允许你保存，另存为到桌面，拖进去覆盖掉
问题2：你打开是个白板，没有任何代码

三：MySQL

1、数据库产品

1、关系数据库 - 以表格为主

Oracle - Oracle（甲骨文）主要应用于【企业级】开发市场
MySQL - Oracle（甲骨文）主要应用于【互联网】开发市场 - 中小型公司的首选
sql server - 微软主要应用于大学讲课

2、非关系型数据库 - 没有固定格式的

是一种运动 - 反关系型数据库
主流产品 - mongoDB

2、MySQL基本内容

1、访问：

1、图形化界面（更简单更方便）
要求：同时打开mysql和apache
访问：127.0.0.1:端口号/phpmyadmin
localhost:端口号/phpmyadmin
2、命令行方式 - 复杂很多，但是才能学到真正的SQL语句
如何进入数据库：
必须打开mysql
a、打开cmd
b、输入：cd d:/xampp/mysql/bin 回车
c、登录：mysql -uroot -p 回车不要加分号
d、退出：exit

3、学习SQL语句：关系型数据公用的SQL语句

1、数据库：

创建数据库：CREATE DATABASE IF NOT EXISTS 数据库名称 CHARACTER SET utf8;
查看数据库：SHOW DATABASES;
切换数据库：USE 数据库名称;

2、数据表：

a、数据库的数据类型：
数值：Int-整型
Float/Double-浮点型
DECIMAL-精确值
字符串：
CHAR - 长度固定的
VARCHAR - 长度可变的
日期：
DATE - YYYY/MM/DD
DATETIME - YYYY/MM/DD hh:mm:ss
TIMESTAMP - 时间戳（标识：唯一不重复的）

b、创建数据库表：

CREATE TABLE 表名(
	字段名 数据类型,
	...
);

举例：
	CREATE TABLE user(
		id INT PRIMARY KEY AUTO_INCREMENT,
		name VARCHAR(30),
		pwd VARCHAR(30),
		email VARCHAR(30),
		vip VARCHAR(1)
	);

	主键约束：PRIMARY KEY
	主键自增：AUTO_INCREMENT

3、数据：4句以后最常用的操作

a、增：INSERT INTO 表名 VALUES(字段值,...);
举例：INSERT INTO user VALUES(0,"小明","123123","xiaoming@qq.com","1");

b、删：DELETE FROM 表名 WHERE id=几;
举例：DELETE FROM user WHERE id=3;

c、改：UPDATE 表名 SET 字段名=字段值,... WHERE id=几;
举例：UPDATE user SET name="王小明",email="wangxiaoming@qq.com" WHERE id=3;

d、查：3种语法：
SELECT * FROM 表名;//获取此表所有的数据
SELECT * FROM 表名 WHERE id=几;//获取id为几的那一条数据
SELECT 字段名,... FROM 表名;//获取此表所有的对应的字段值

四：PHP：最简单的一门后端语言

php文件后缀名.php

1、如何运行php文件：

打开apache，并且将你的项目放到htdocs文件夹中，打开浏览器输入：127.0.0.1:端口号，打开你需要的文件
特殊：其实PHP文件也支持前端代码和PHP代码，以后我们上网时，看到网页后缀.php也不必惊讶 - 比js严格

2、PHP语法基础：

1、输出方式：

1、echo(想要输出的内容); 或 echo 想要输出的内容; - 只能输出4种标准类型，不能输出别的
2、var_dump(想要输出的内容);//输出数据类型和值
缺点：
a、输出的太过完整，以后PHP只要输出在页面上的东西，都会被前端使用ajax拿走
b、复合类型暂时也只能用var_dump输出 - 以后不会再用了

2、变量和常量：

1、变量：值可以改变
语法：$变量名=值;
注意：使用时$也不能省略

2、常量：值一旦创建，不可以改变
语法：const 常量名=值;

3、数据类型：

四种标准/基础类型：
a、整型：Int
b、浮点型：Float/Double
c、布尔：Boolean
d、字符串：String - 不太一样
单引号：直接放纯文本
双引号：支持放入变量
例：echo "我的名字叫{$name}今年{$age}岁喜欢{$hobby}";

两种复合类型：
a、Array - 数组
创建：

1、直接量：$arr=[值1,....]; - 索引数组
2、内置函数：$arr=array( - hash数组。其实就是对象
                "key"=>value,
                ...
	     )

访问：$数组名[下标/"自定义"]
遍历：循环 b、Object - 面向对象

两种特殊类型：
1、Resource - 资源类型：连接上数据库才会看到
2、Null - 释放内存
"" - 有值，值为空
null - 没有

4、运算符：除了一个不同：字符串的拼接使用的是.

5、分支：与js完全一样

6、循环：与js完全一样

7、函数：与js完全一样

8、API：理论上完全一样，但是操作却不同，不需要做任何的记忆，百度搜索

五：全栈：

1、前端->后端：

前端需要发起请求：

1、表单请求提交
注意：
a、input必须添加name属性，甚至有的input/textarea/select*option还要添加value属性
b、form表单必须添加action="服务器端文件的路径";
c、method到底用get还是post，和后端沟通（安全性为主）
只负责发送，不负责保存

2、服务器端需要接收住前端传来的请求消息
语法：$_GET/POST/REQUEST["input的name的值"];
REQUEST->请求：能接住一切请求不管是get还是post

前端->后端 语法举例

html文件  
        <body>
		<form action="10前端传到服务器端.php" method="get">
			用户名：<input name="name" /><br>
			密码名：<input name="pwd" /><br>
			<input type="submit"/>
		</form>
	</body>
        
php文件
        <?php
            $name=$_REQUEST["name"];
            $pwd=$_REQUEST["pwd"];
            echo "前端传来的用户名是：$name,密码是：$pwd";
        ?>

2、后端<->数据库：PHP自带操作MySQL数据的API，只需要学习4句话

1、创建出连接数据库对象

$conn=mysqli_connect("hostname","username","userpwd","dbname");
例：  $conn=mysqli_connect("127.0.0.1","root","","wangxiaoming");

1.5、立马为数据库传输设置中文编码

mysqli_query($conn,"SET NAMES utf8");

2、创建SQL语句：

$sql="INSERT/DELETE/UPDATE/SELECT";

3、某个数据库要执行某个操作

$rs=mysqli_query($conn,$sql);

//$rs：
增删改，是一个布尔值，true->成功，false->失败

查：是一个我们都不认识的结果集：
解决：将不认识结果集变为我们认识的数据
mysqli_fetch_row($rs)//一次只能得到一行的数据，是一个索引数组
mysqli_fetch_assoc($rs)//一次只能得到一行的数据，是一个hash数组  
解决的固定套路：
	while(($row=mysqli_fetch_assoc($rs))!=null){
		$row;//当前行数据，做什么操作就看你了
	}

4、断开和数据库的连接

mysqli_close($conn);

后端<->数据库 语法举例
<?php
	$conn=mysqli_connect("127.0.0.1","root","","userstable");
	mysqli_query($conn,"SET NAMES utf8");
	$sql="INSERT INTO user VALUES(0,'李小明','123123','zhm@qq.com','0')";//增
	$sql="DELETE FROM user WHERE name='李小明'";//删
	$sql="UPDATE user SET name='李晓明' WHERE id=6";//改
	$sql="SELECT * FROM user";//查
	$rs=mysqli_query($conn,$sql);
	$arr=[];
	while(($row=mysqli_fetch_assoc($rs))!=null){
		array_push($arr,$row);
	}
	echo JSON_encode($arr);
	mysqli_close($conn);
?>

3、扩展：

<input type="hidden" name="hide" value="登录" /> - 隐藏作用域，不是给用户看/输入，提交时用户后端判断执行不同代码的

六：同步交互和异步交互：

1、概念

1、同步：

客户端向服务器端发送请求直到服务器端进行响应的全过程，用户只能等待 - 不严格的说法：整个页面都会刷新一下
举例：1、网址提交 2、表单提交

2、异步：

客户端向服务器端发送请求直到服务器端进行响应的全过程，用户不必等待 - 不严格的说法：局部页面会进行刷新
举例：1、ajax

3、很久之前我们就见过异步的技术：

定时器：就算定时器里面的操作在耗时，也不会影响后续代码，用户也能看到后续代码的效果

2、ajax：asynchronous javascript and xml：直译：异步的javascript和xml

1、好处：

a、不会让用户等待
b、不会刷新页面也能和服务器端进行交互（比表单强）
c、将服务器端的数据获取到前端页面

2、使用步骤：4步

1、创建ajax核心对象xhr

var xhr=new XMLHttpRequest();

2、创建和服务器端的连接

xhr.open("GET/POST","xx.php");

3、向服务器端发送请求消息

xhr.send()；
特殊：
1、GET方式，xhr.send失效，还不能省略，必须写为xhr.send(null)，请求消息需要拼接到url?后面
xhr.open("GET","xx.php?key=value&key=value...");
xhr.send(null);

2、POST方式，xhr.send可用，在之前设置请求头部
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("key=value&...");

4、绑定监听状态改变事件

xhr.onreadystatechange=()=>{
    if(xhr.readyState==4&&xhr.status==200){
       xhr.responseText;//php放在页面上的东西 - 服务器端响应的消息
    }
}

案例：登录注册页面
html文件
            <body>
		<h1>首页</h1>
		<h2>注册</h2>
		<!-- action="服务器端路径  method="post"提交方式更安全  method="get" -->
		<!-- input必须加name属性  有的还要加value -->
		<form action="server.php" method="post">
			用户名：<input name="name" /><br>
			密码名：<input name="pwd" /><br>
			邮箱名：<input name="email" /><br>
			是否是vip：<input type="radio" name="vip" value="1" />是
					  <input type="radio" name="vip" value="0" />否<br>
					  <!-- 隐藏作用域，不是给用户看的，提交时后端判断执行不同的操作 -->
					  <input type="hidden" name="hide" value="注册" />
			<input type="submit" value="注册"/>
		</form>
		<hr />
		<h2>登录</h2>
		<form action="server.php" method="post">
			用户名：<input name="name" /><br>
			密码名：<input name="pwd" /><br>
					<input type="hidden" name="hide" value="登录" />
			<input type="submit" value="登录"/>
		</form>
		<hr />
		<h2>修改密码</h2>
		<form action="server.php" method="post">
			用户名：<input name="name" /><br>
			老密码：<input name="pwd" /><br>
			新密码：<input name="npwd" /><br>
			<input type="hidden" name="hide" value="修改密码" />
			<input type="submit" value="修改密码"/>
		</form>
	</body>
        
 php文件
     <?php
        // 接住用户传过来的数据 登录/注册...  名字  密码
	$hide=$_POST["hide"];
	$name=$_POST["name"];
	$pwd=$_POST["pwd"];
	// 第一步：创建出连接数据库的对象 hostname  username  userpwd dbname
	$conn=mysqli_connect("127.0.0.1","root","","usertable");
	// 第1.5步 : 立马为数据库传输设置中文编码
	mysqli_query($conn,"SET NAMES utf8");
	// 判断是登录还是注册等，做不同的操作
	if($hide=="注册"){
		$email=$_POST["email"];
		$vip=$_POST["vip"];	
		// 第三步：创建SQL语句
		$sql="SELECT name FROM user";//查找有没有这个用户名
		// 第四步：某个数据库要执行的操作
		$rs=mysqli_query($conn,$sql);
		// 查的结果是一个不认识的结果集，解决方法 mysqli_fetch_assoc($rs) 得到一行数据，是一个hash数组
		while(($row=mysqli_fetch_assoc($rs))!=null){
			// 如果用户名存在就保存数据，注册失败，并且跳转到提示页面
			if($row["name"]==$name){
				echo "<script>sessionStorage.state='注册失败';location='status.html'</script>";
				return false;//在php阻止后续代码执行	
			}
		}
		// 如果循环完都没有这个用户名  就创建添加数据的SQL语句
		$sql="INSERT INTO user VALUES(0,'$name','$pwd','$email','$vip')";
		// 某个数据库要执行的某个操作
		$rs=mysqli_query($conn,$sql);
		if($rs){
			echo "<script>sessionStorage.state='注册成功';location='status.html'</script>";
		}
               }else if($hide=="登录"){
		$sql="SELECT name,pwd FROM user";
		$rs=mysqli_query($conn,$sql);
		while(($row=mysqli_fetch_assoc($rs))!=null){
			if($row["name"]==$name&&$row["pwd"]==$pwd){
				echo "<script>sessionStorage.state='登录成功';location='status.html'</script>";
				return false;	
			}
		}
		echo "<script>sessionStorage.state='登录失败';location='status.html'</script>";
	}else if($hide=="修改密码"){
		$npwd=$_POST["npwd"];
		$sql="SELECT id,name,pwd FROM user";
		$rs=mysqli_query($conn,$sql);
		while(($row=mysqli_fetch_assoc($rs))!=null){
			if($row["name"]==$name&&$row["pwd"]==$pwd){
				$id=$row['id'];
				$sql="UPDATE user SET pwd='$npwd' WHERE id=$id";
				$rs=mysqli_query($conn,$sql);
				if($rs){
					echo "<script>sessionStorage.state='修改成功';location='status.html'</script>";
				}
			}
		}
		echo "<script>sessionStorage.state='修改失败';location='status.html'</script>";
	}
	mysqli_close($conn);	
?>

状态页
        <body>
		<!-- 这是一个跳转页面，为了不让用户看到后端的数据 -->
		<h1 id="h1"></h1>
		<p id="p">3秒后自动回到首页</p>	
		<script type="text/javascript">
			// 客户端存储技术  sessionStorage会话级，浏览器关闭就没有了  localStorage本地级，浏览器关闭仍然有
			h1.innerHTML=sessionStorage.state;//保存的是状态--成功还是失败
			// 开启定时器
			setInterval(()=>{
				var s=parseInt(p.innerHTML);
				s-=1;
				// location="新url"  跳转
				if(s==0){location="index.html"}
				p.innerHTML=s+"秒后自动回到首页";
			},1000)
		</script>
	</body>

javascript和数据库 第五周知识点