1.对象
// 实例化构造函数创建对象
var obj = new Object();
obj.name = '张三'; // 添加属性
obj.age = 18;
// 字面量创建对象
var obj = {
name: '张三',
age: 18
};
// 通过.访问成员变量
console.log(obj.name); // 张三
// 通过[]访问成员变量
console.log(obj['name']); // 张三
.和[]的最大区别是[]支持传入参数,访问不确定的属性值
obj.属性名 = 属性值 -> 属性名不可以修改
obj[‘属性名’] = ‘属性值’ -> [] 里面可以放变量
2.JSON
JSON(JavaScript Object Notation, JS对象简谱)是一种轻量级的数据交换格式。它基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言
JSON是一个序列化的对象或数组
JSON.stringify
该方法可以将一个JS对象序列化为一个JSON字符串
var data = {
name: '张三',
age: 18
}
JSON.stringify(data); // '{"name":"张三","age":18}'
JSON.parse
该方法可以将一个序列化的JSON字符串转换为一个JS对象
var str = '{"name":"张三","age":18}';
JSON.parse(str); // {name:"张三",age:18}
3.计算机基础知识
进程和线程
- 进程:是具有一定独立功能的程序关于某个数据集合上的一次进行活动,是系统进行资源分配和调度的一个独立单位
- 线程:是进程的一个实体,是cpu调度和分派的基本单位,他是比进程更小的能够独立运行的基本单位,线程自己基本上不拥有系统资源,只拥有一点在运行中必不可少的资源。一个线程可以创建和撤销另一个线程
- 一个进程里面至少有一个线程
JS是单线程语言,JS的单线程与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成这门语言的核心特征,将来也不会改变(所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个)
同步和异步
同步
上一件事情没有完成,继续处理上一件事情,只有上一件事情完成了,才会做下一件事情,事件一个一个完成
异步
规划要做一件事情,但是不是当前立马去执行这件事情,需要等一定的时间,这样的话,我们不会等着他执行,而是继续执行下面的操作,事件同时开始,不等待完成
端口
端口是英文port的意译,可以认为是设备与外界通讯交流的出口。端口可分为虚拟端口和物理端口,其中虚拟端口指计算机内部或交换机路由器内的端口,不可见。例如计算机中的80端口、21端口、23端口等。物理端口又称为接口,是可见端口,计算机背板的RJ45网口,交换机路由器集线器等RJ45端口。电话使用RJ11插口也属于物理端口的范畴
端口分类
- 公认端口(Well Known Ports):从0到1023,它们紧密绑定(binding)于一些服务。通常这些端口的通讯明确表明了某种服务的协议
- 注册端口(Registered Ports):从1024到49151。它们松散地绑定于一些服务。也就是说有许多服务绑定于这些端口,这些端口同样用于许多其它目的
- 动态和/或私有端口(Dynamic and/or Private Ports):从49152到65535。理论上,不应为服务分配这些端口。实际上,机器通常从1024起分配动态端口
常见的默认端口
- 21端口:FTP 文件传输服务
- 22端口:SSH 远程连接服务
- 23端口:TELNET 终端仿真服务
- 25端口:SMTP 简单邮件传输服务
- 53端口:DNS 域名解析服务
- 80端口:HTTP 超文本传输服务
- 443端口:HTTPS 加密的超文本传输服务
- 3306端口:MYSQL数据库端口
- 5432端口:postgresql数据库端口
- 6379端口:Redis数据库端口
- 8080端口:TCP服务端默认端口
- 8888端口:Nginx服务器的端口
- 9200端口:Elasticsearch服务器端口
- 27017端口:mongoDB数据库默认端口
- 22122端口:fastdfs服务器默认端口
4.ajax的概念和优缺点
ajax的概念
Ajax即“Asynchronous Javascript And XML”(异步的JavaScript和XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。又称为异步无刷新技术
ajax的优点
- 无刷新更新数据:AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息,减少用户等待时间,带来非常好的用户体验
- 异步服务器通信:AJAX使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。优化了Browser和Server之间的沟通,减少不必要的数据传输、时间及降低网络上数据流量
3.前后端负载均衡:AJAX可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能 - 基于标准被广泛支持:AJAX基于标准化的并被广泛支持的技术,不需要下载浏览器插件或者小程序,但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟,一些简化 Ajax使用方法的程序库也相继问世。同样,也出现了另一种辅助程序设计的技术,为那些不支持JavaScript的用户提供替代功能
- 前后端分离AJAX使WEB中的界面与应用分离(也可以说是数据与呈现分离),有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统
ajax的缺点
- AJAX干掉了Back和History功能,即对浏览器机制的破坏在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在Ajax应用程序中,这将无法实现
- AJAX存在安全问题AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁,Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比 以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知 的安全弱点,诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等
- 对搜索引擎支持较弱对搜索引擎的支持比较弱。如果使用不当,AJAX会增大网络数据的流量,从而降低整个系统的性能
5.ajax的核心代码
ajax技术的核心是XMLHttpRequest构造函数,通过实例化对象以及方法的调用完成数据请求
// 创建xhr,确认事件(挖洞 修地铁)
var xhr = new XMLHttpRequest(); // 创建ajax对象
// 开辟通道(开通 指定运行路线 目标)
xhr.open('get', './mockdata/txt.txt', true);
// 事件监听(雷达探测器)
xhr.onreadystatechange = function () {
// 状态满足特定条件的时候
// xhr.readyState == 4 表示前端成功 -- 状态码
// xhr.status == 200 表示后端成功 -- 响应码
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText); // 响应的文本
}
}
// 发射
xhr.send(); // 发送请求和数据
6.ajax的细节
ajax的状态码
readyState表明当前请求所在的状态,共有5个值
- 0 => 未初始化状态(unitialized),open还没有调用
- 1 => 正在加载(loading),服务器连接已建立,open已调用
- 2 => 加载完毕(loaded),请求已接收头信息
- 3 => 交互(interactive),请求处理中,已接收主体信息
- 4 => 完成(complete),响应已完成
var xhr = new XMLHttpRequest();
console.log(xhr.readyState); // 0
xhr.open('get', './mockdata/txt.txt', true);
console.log(xhr.readyState); // 1
xhr.onreadystatechange = function () {
console.log(xhr.readyState); // 2 3 4
}
console.log(xhr.readyState); // 1
xhr.send();
只有在事件监听中才可以拿到 2,3,4 状态码
ajax的响应码
- 1:信息类,表示收到web浏览器的请求,正在进一步的处理中
- 2:成功,表示用户被正确接收,比如200 ok
- 3:重定向,表示请求没有成功,客户端必须采取进一步的动作
- 4:客户端错误,表示客户端提交的请求有错误,比如404,请求中所引用的文档不存在
- 5:服务器错误,表示服务器不能完成队请求的处理,比如500
常见的响应码
- 200:交易成功
- 304:客户端已经执行了GET,但文件未变化
- 404:没有发现文件、查询或URL
- 500:服务器产生内部错误
- 100:客户必须继续发出请求
- 101:客户要求服务器根据请求转换HTTP协议版本
- 201:提示知道新文件的URL
- 202:接受和处理、但处理未完成
- 203:返回信息不确定或不完整
- 204:请求收到,但返回信息为空
- 205:服务器完成了请求,用户代理必须复位当前已经浏览过的文件
- 206:服务器已经完成了部分用户的GET请求
- 300:请求的资源可在多处得到
- 301:删除请求数据
- 302:在其他地址发现了请求数据
- 303:建议客户访问其他URL或访问方式
- 305:请求的资源必须从服务器指定的地址得到
- 306:前一版本HTTP中使用的代码,现行版本中不再使用
- 307:申明请求的资源临时性删除
- 400:错误请求,如语法错误
- 401:请求授权失败
- 402:保留有效ChargeTo头响应
- 403:请求不允许
- 405:用户在Request - Line字段定义的方法不允许
- 406:根据用户发送的Accept拖,请求资源不可访问
- 407:类似401,用户必须首先在代理服务器上得到授权
- 408:客户端没有在用户指定的饿时间内完成请求
- 409:对当前资源状态,请求不能完成
- 410:服务器上不再有此资源且无进一步的参考地址
- 411:服务器拒绝用户定义的Content - Length属性请求
- 412:一个或多个请求头字段在当前请求中错误
- 413:请求的资源大于服务器允许的大小
- 414:请求的资源URL长于服务器允许的长度
- 415:请求资源不支持请求项目格式
- 416:请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If - Range请求头字段
- 417:服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求
- 501:服务器不支持请求的函数
- 502:服务器暂时不可用,有时是为了防止发生系统过载
- 503:服务器过载或暂停维修
- 504:关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长
- 505:服务器不支持或拒绝支请求头中指定的HTTP版本
ajax的请求中状态
var xhr = new XMLHttpRequest();
xhr.open('get', './mockdata/txt.txt', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.body.innerHTML = xhr.responseText;
} else {
// 请求中的状态(不成功)
document.body.innerHTML = 'loading...';
}
}
xhr.send();
7.异步与回调
异步特性
我们知道JS是单线程的,既然是单线程那么就很容易出现线程被堵塞的情况,而异步就可以解决堵塞的问题,当然JS是单线程的它本身是不能异步的,但JS的宿主环境浏览器是多线程的,宿主环境通过某种方式使得JS具备了异步的特性,会脱离当前的执行顺序
var num = 1;
setTimeout(function() {
num++;
console.log(num);
}, 1000);
console.log(num);
// 两次输出结果并是不2 1而是1 2
通常我们会使用回调函数来解决异步的问题
8.ajax调用接口
var xhr = new XMLHttpRequest();
xhr.open('get', 'api');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
}
xhr.send();
9.同源策略和跨域
同源策略
同源策略(same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收
同源指的是域名/IP,协议,端口都相同
跨域
跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。同源策略限制了以下行为:
- Cookie、LocalStorage和IndexDB无法读取
- DOM和JS对象无法获取
- Ajax请求发送不出去
CORS(XHR2)
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制
// PHP CORS
//解决跨域问题
header("Access-Control-Allow-Origin:*");
10.用户注册接口
<?php
header('content-type:text/html; charset=utf8'); // 返回文本和html内容,编码方式utf-8
header("Access-Control-Allow-Origin:*"); // 告诉浏览器,别拦我,谁都可以访问
$server = 'localhost:3306'; // 服务器
$username = $password = 'root'; // 用户名 密码
$dbname = 'mall2004'; // 库名(数据库名)
// 数据库连接对象,mysqli_connect的作用是负责连库,$conn代表当前连好的库
$conn = mysqli_connect($server, $username, $password, $dbname);
mysqli_set_charset($conn, 'utf8'); // 解决数据库中文乱码
if (!$conn) { // 如果$conn不存在,表示:数据库连接失败
die('数据库连接失败');
}
// echo '数据库连接成功';
// 后端接收前端传过来的参数
// $_REQUEST 支持get和post拿到的参数
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];
// 注册
$sql = "SELECT * from userinfo WHERE username = '$username'"; // 从库里面找到当前参数,$username 表示用户传进来的数据
$result = mysqli_query($conn, $sql); // 得到结果集
$data = mysqli_fetch_assoc($result); // 从结果集中拿一条数据(数据只能一条一条拿)
if ($data) { // 表示当前库中 用户名 存在
echo json_encode(array( // json_encode() 是将 PHP对象/数组 变为一个 json数据(以字符串的形式体现的)
'code' => 0, // 表示失败
'msg' => '用户名已存在', // 表示为什么失败
));
} else { // 表示 用户名 不存在
$sql = "INSERT INTO userinfo (username, password) VALUES ('$username', '$password')"; // 在数据库中创建并插入数据
mysqli_query($conn, $sql); // 表示:受影响行数
$rows = mysqli_affected_rows($conn);// 拿到受影响行数
if ($rows > 0) { // 表示:受影响行数至少是 1
echo json_encode(array(
'code' => 1, // 表示成功
'msg' => '注册成功',
));
}
}
11.用户登录接口
<?php
header('content-type:text/html;charset=utf-8'); // 返回文本和html内容,编码方式utf-8
header("Access-Control-Allow-Origin:*"); // 告诉浏览器,别拦我,谁都可以访问
$server = 'localhost:3306'; // 服务器
$username = $password = 'root'; // 用户名 密码
$dbname = 'mall2004'; // 库名(数据库名)
// 数据库连接对象,mysqli_connect的作用是负责链接库,$conn代表当前连好的库
$conn = mysqli_connect($server, $username, $password, $dbname);
mysqli_set_charset($conn, 'utf8'); // 解决数据库中文乱码
if (!$conn) { // 如果$conn不存在,表示:数据库连接失败
die('数据库连接失败');
}
// echo '数据库连接成功';
$obj = array( // 定义 $obj, 给一个默认值
'code' => 0, // 默认失败(满足条件时才成功)
'msg' => '登录失败', // 默认登录失败
);
// 如果前端的 username 没有 拿到(存在/传入) 或者 前端的 password 没有 拿到(存在/传入)
if (!isset($_REQUEST['username']) || !isset($_REQUEST['password'])) { // 判断当前 参数是否传入
$obj['msg'] = '缺少必要参数'; // 缺少必要参数
die(json_encode($obj)); // 表示后面的 路 都不走了
}
// 后端接收前端传过来的参数
// $_REQUEST 支持get和post拿到的参数
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];
// 登录
$sql = "SELECT * from userinfo WHERE username = '$username'"; // 查询用户:从库里面找到当前参数,$username 表示用户传进来的数据
$result = mysqli_query($conn, $sql); // 得到结果集
$data = mysqli_fetch_assoc($result); // 从结果集中拿一条数据(数据只能一条一条拿)
if ($data) { // 表示当前库中 用户名 存在
// 当用户名存在时,进行密码的比对
if ($data['password'] === $password) { // 如果从$data中拿出的密码 password 恒等于用户传进来的密码 password
$obj['code'] = 1; // 表示成功
$obj['msg'] = '登录成功'; // 表示登录成功
} else { // 表示从$data中拿出的密码 password 不恒等于用户传进来的密码 password
$obj['msg'] = '用户名或密码错误'; // 失败
}
} else { // 表示 用户名 不存在
$obj['msg'] = '用户名或密码错误'; // 失败
}
echo json_encode($obj); // 给前端返回
12.用户列表接口
<?php
header('content-type:text/html;charset=utf-8'); // 返回文本和html内容,编码方式utf-8
header("Access-Control-Allow-Origin:*"); // 告诉浏览器,别拦我,谁都可以访问
$server = 'localhost:3306'; // 服务器
$username = $password = 'root'; // 用户名 密码
$dbname = 'mall2004'; // 库名(数据库名)
// 数据库连接对象,mysqli_connect的作用是负责连库,$conn代表当前连好的库
$conn = mysqli_connect($server, $username, $password, $dbname);
mysqli_set_charset($conn, 'utf8'); // 解决数据库中文乱码
if (!$conn) { // 如果$conn不存在,表示:数据库连接失败
die('数据库连接失败');
}
// echo '数据库连接成功';
// 用户列表
$sql = 'select * from userinfo'; // 查 用户列表
$result = mysqli_query($conn, $sql); // 得到结果集
$list = array(); // 创建一个 空数组
// 循环中 拿到所有的数据($data)
while ($data = mysqli_fetch_assoc($result)) { // 循环的条件:当 $data 不等于 null 时
// 伪插是 $list[]
$list[] = $data; // 将拿到的所有 数据($data)插入 空数组中
};
echo json_encode(array( // 包装数组:json_encode() 是将 PHP对象/数组 变为一个 json数据(以字符串的形式体现的)
'code' => 1, // 表示成功
'data' => $list // data 中放入 $list 数组
));
13.用户删除接口
<?php
header('content-type:text/html; charset=utf8'); // // 返回文本和html内容,编码方式utf-8
header("Access-Control-Allow-Origin:*"); // 告诉浏览器,别拦我,谁都可以访问
$server = 'localhost:3306'; // 服务器
$username = $password = 'root'; // 用户名 密码
$dbname = 'mall2004'; // 库名(数据库名)
// 数据库连接对象,mysqli_connect的作用是负责链接库,$conn代表当前连好的库
$conn = mysqli_connect($server, $username, $password, $dbname);
mysqli_set_charset($conn, 'utf8'); // 解决数据库中文乱码
if (!$conn) { // 如果$conn不存在,表示:数据库连接失败
die('数据库连接失败');
}
// 后端接收前端传过来的参数
// $_REQUEST 支持get和post拿到的参数
$uid = $_REQUEST['uid']; // 从前端拿到一个uid(唯一标识)
// 删除
$sql = "DELETE FROM userinfo WHERE uid = $uid"; // 删除 userinfo 表中 uid 为 $uid 的数据
mysqli_query($conn, $sql); // 执行 sql 删除
$rows = mysqli_affected_rows($conn); // 从 $conn 中拿到受影响行数
$obj = array( // 给一个默认值
'code' => 0, // 默认失败(满足条件时才成功)
'msg' => '服务器异常'
);
if ($rows > 0) { // 表示:受影响行数至少是 1
$obj = array(
'code' => 1, // 表示成功
'msg' => '删除成功' // 表示删除成功
);
}
echo json_encode($obj); // 给前端返回
14.用户更新接口
<?php
header('content-type:text/html; charset=utf8'); // // 返回文本和html内容,编码方式utf-8
header("Access-Control-Allow-Origin:*"); // 告诉浏览器,别拦我,谁都可以访问
$server = 'localhost:3306'; // 服务器
$username = $password = 'root'; // 用户名 密码
$dbname = 'mall2004'; // 库名(数据库名)
// 数据库连接对象,mysqli_connect的作用是负责链接库,$conn代表当前连好的库
$conn = mysqli_connect($server, $username, $password, $dbname);
mysqli_set_charset($conn, 'utf8'); // 解决数据库中文乱码
if (!$conn) { // 如果$conn不存在,表示:数据库连接失败
die('数据库连接失败');
}
// 后端接收前端传过来的参数
// $_REQUEST 支持get和post拿到的参数
$uid = $_REQUEST['uid']; // 从前端拿到一个uid(唯一标识)
$password = $_REQUEST['password']; // 从前端拿到一个password,需要修改
// 修改,更新
$sql = "UPDATE userinfo SET `password` = '$password' WHERE uid = $uid"; // 修改/更新 userinfo 表中 uid 为 $uid 的数据
mysqli_query($conn, $sql); // 执行 sql 修改/更新
$rows = mysqli_affected_rows($conn); // 从 $conn 中拿到受影响行数
$obj = array( // 给一个默认值
'code' => 0, // 默认失败(满足条件时才成功)
'msg' => '更新失败',
);
if ($rows > 0) { // 表示:受影响行数至少是 1
$obj = array(
'code' => 1, // 表示成功
'msg' => '更新成功', // 表示更新成功
);
};
echo json_encode($obj); // 向前端返回