javascript里前后端交互梳理

面向对象
1.面向对象的目标 - 类和构造函数
- 强调类的概念，通过类可以创建任意多个具有相同属性和方法的实例对象
- 目的是减少全局污染(全局变量-属性，全局函数-方法)
- 理解系统的类和构造函数(Array,Date),进而知道系统类(构造函数)对应的实例对象的意义。
- 以小博大(面向对象适合复杂的程序，简单一些效果理解面向对象)

2.面对象的写法
- 混合开发(构造函数+原型)
- ES6 class开发
- 上面两种写法基于函数 - 语法糖

3.面向对象的理论概念
- 面向对象的特点(封装，继承，多态)
- 面向对象和面向过程的区别：
-面向过程：函数式(过程化)；思想是把一个项目、一件事情按照一定的顺序，从头到尾一步一步地做下去，先做什么，后做什么，一直到结束。
-面向对象：强调类的概念，通过类可以创建任意多个具有相同属性和方法的实例对象。思想是把一个项目、一件事情分成更小的项目，或者说分成一个个更小的部分，每一部分负责什么方面的功能，最后再由这些部分组合而成为一个整体。
- 构造函数的概念
- 首字母大写
- new关键字调用
- this指向
- 原型的概念
- 原型(prototype):每一个函数都有一个原型对象(属性对象),原型上面绑定是公有的属性或者方法,而且里面的this依然指向实例对象
- 以new操作符调用函数的时候，函数内部发生以下变化.
- 1、创建一个空对象，并且 this 变量引用该对象。
- 2、属性和方法被加入到 this 引用的对象中。
- 3、并且最后隐式的返回 this （创建也是隐式）。

4.类是抽象的，不占用内存，而对象是具体的，占用存储空间。属性是修饰对象描述对象，方法是对象的功能。

本地存储localstorage.
1.localStorage sessionStorage cookie三者的区别 - 面试题。
-localstorage和sessionstorage储存空间都是5m，cookie是4k；
-localstorage是永久储存，除非手动删除；sessionstorage是只在当前页面保存，关闭页面就删除；cookie是自己设置有效期，如果不设置就是页面关闭删除
-三者的数据都是储存在浏览器
2.localStorage的特点
- 永久存储，除非手动删除
- 只有在高版本的浏览器中才支持
- 值类型限定为string类型，如果需要json格式的数据需要进行转换
- 本质上是字符串的读取，所以存储内容多的话会消耗内存空间，会造成页面卡顿
- 不同的浏览器本地存储不能相互进行访问
3.localStorage存储，获取，删除 前面的window可以省略
-localStorage.setItem(key,value)
-localStorage.getItem(key)
-localStorage.removeItem(key)
-window.localStorage.clear() 清除全部数据

PHP+MYSQL
1.非常熟练做服务器的配置(apache)
2.生成前端需要的接口(简单的接口，复杂的接口)
- 简单的接口：将数据变成php的二维数组，josn_encode()输出
- 复杂的接口：将数据赋值给php的对象(class),输出对象。
3.了解navicat创建数据库和表(导入导出)
4.了解sql语句对表里面的数据进行增删改查。数据库连接用new mysqli连接，增删改查内的属性名变量要加引号
-数据库 增加 大小写都一样
$conn->query("INSERT数据库名称values(null{,}^{\prime }zhangsa{n}^{\prime },12,NOW()),(null{,}^{\prime }lis{i}^{\prime },15,NOW()),(null{,}^{\prime }超{人}^{\prime },66,NOW())");-数据库删除-$conn->query(“DELETE FROM 数据库名称 WHERE sid=3”);
-数据库 修改
-$conn->query(“UPDATE 数据库名称 SET age = 10 WHERE username = ‘超人’”);
-数据库 检查
$result = $conn->query(“SELECT*FROM 数据库名称”);也可以加where来指定找满足条件的数据
-echo $result->nu{m}_{r}ows;//获取记录集的条数6-$result->fetch_assoc();//获取记录集，返回数组。
-print_r($result->fetch_assoc());-依次获取第一条记录集

AJAX
1.ajax的概念和特点 - 面试
- 异步JavaScript和XML，是指一种交互式网页开发技术
- AJAX 可以使网页实现异步(局部)更新。
- 服务器负担的工作转移到客户端，利用客户端的闲置的资源进行处理，减轻服务器和带宽的负担，节约空间和成本。
2.xml数据 - 早期的数据
特点：自定义标签
-必须有根元素
-双标签必须关闭
-单标签必须添加/>
-必须有声明
3.ajax的优缺点 - 面试
AJAX的优点
1无刷新更新数据–局部更新
2异步服务器通信
3前端和后端负载平衡
4基于标准被广泛支持
5界面与应用分离(前后端的分离)
AJAX的缺点
1AJAX干掉了Back和History功能，即对浏览器机制的破坏
2AJAX安全问题
3对搜索引擎支持较弱–seo
4AJAX不能很好支持移动设备

3.同步和异步的概念 - 面试
- javascript语言是一门“单线程”的语言,js做事情的时候都是只有一条流水线（主线程），同步和异步的差别就在于这条流水 线上各个流程的执行顺序不同。
- 同步任务指的是，阻塞模式，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
- 异步任务指的是，非阻塞模式，不进入主线程、而进入"任务队列"的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。 (定时器 事件 promise ajax)

4.ajax编写步骤
ajax的四部曲
第一步：创建ajax对象
let ajax = new XMLHttpRequest();
console.log(ajax.readyState); //0
第二步：open(请求方式get/post,接口地址,是否异步-true异步)
ajax.open(‘get’, ‘http://localhost/JS2004/Day%2021_php+mysql/data.php’, true);
console.log(ajax.readyState); //1
第三步：发送、解析 send()
ajax的属性：readyState:就绪状态码–0(初始化) 1(请求建立) 2(发送完成) 3(解析) 4(完成)**
0：请求初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
//post方式加请求头ajax.setRequestHeader(‘content-type’, ‘application/x-www-form-urlencoded’);
ajax.send();//post方式数据通过send和请求头发送数据到后端，get方式拼接在地址栏后面
第四步：监听就绪状态码的事件
ajax.onreadystatechange = function() { //就绪状态码发生改变。
if (ajax.readyState === 4) { //响应完成
if(ajax.status ===200){//http状态码
//ajax.responstText:获取接口的返回值。 类型是string
console.log(ajax.responseText);
}
}
}

5.get和post区别 - 面试题
- 语义：get获取，post传输。
- 安全：get不安全，post安全。
- 长度：get限制长度，post理论上不限制的(4k,可以配置)。
- 传输数据：get通过地址栏，post通过send和设置请求头。
- 缓存：get有缓存，post没有缓存

6.http常见状态码 – 面试
HTTP状态码（英语：HTTP Status Code）是用以表示网页服务器超文本传输协议响应状态的3位数字代码。
//200 请求成功
//304 没有修改，缓冲中取
//404 没有找到
//403 服务器已经理解请求，但是拒绝执行它。

// 301 被请求的资源已永久移动到新位置
// 302 请求的资源临时从不同的 URI响应请求。

//1开头 ： 消息类
//2开头 ： 成功
//3开头 ： 重定向
//4开头 ： 请求错误
//5开头 : 服务器错误。

7.js处理兼容的方式
-if语句
-或运算符 - ||
-三目运算符
-容错处理 - try…catch…finally
先执行 try { … }的代码,如果try里面的代码出错，转而执行 catch (e) { … }代码，最后执行 finally { … }代码，也就是finally里面的代码一定会执行。 最后请注意，catch和 finally可以不必都出现(省略)。

JSONP
1.为什么产生跨域 - 同源策略
-浏览器的同源策略
-同源策略：同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。
2.同源策略的概述
3.有哪些方式会产生跨域
-域名和域名对应的ip地址
-域名不同
-协议不同http/https
-端口不同
4.解决跨域的方式
1.后端代理（后端不存在跨域）
-$data = file_get_contents(‘网址’);
2.CORS解决跨域(xhr2)
-header(‘Access-Control-Allow-Origin:*’);//任意域名访问
-header(‘Access-Control-Allow-Method:POST,GET’);//允许的请求方式
3.jsonp----前端常用的；有格式和get方式的要求，格式就是类似于函数的调用形式

5.简述jsonp的特点。
//script标签的src不存在跨域，加载数据。(数据填充在一个函数内部)
//通过callback的形式获取值实现跨域访问
//jsonp仅支持get方法。(弊端)

Callback & Promise
1.回调函数（高阶函数）：函数当参数，传递另外一个函数
2.回调函数的嵌套：回调地狱。
3.回调函数的嵌套：可读性很差。
4.ajax的依赖调用–callback–封装ajax函数

promise承诺
- Promise 异步编程的一种解决方案，比传统的解决方案（回调函数）更合理和更强大。
特点：
- Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（resolve已成功）和rejected（已失败）.
- 一旦状态设定，就不会再变
promise原型下面三个常用的方法：
- Promise.prototype.then
- Promise.prototype.catch
- Promise.prototype.finally
- Promise.all()：用于将多个 Promise 实例，包装成一个新的 Promise 实例，接受一个数组作为参数，只有数组里面的每个状态都变成resolve，则新的 Promise 实例状态才会变成resolve.
- promise.race（）：跟着第一个走，第一个往catch走，那么其他的也跟catch走

前端传值给后端的方式：
1.form+submit+name 此提交方式通过submit动作完成的。 全部数据
//不需要js代码，通过name值
//不管是get还是post前端直接设置，后端采用合适的方式获取(${}_{G}ET[]/$_POST[]/$_REQUEST[])

2.ajax形式 - get方式
// let inputs = document.querySelectorAll(‘input’);
// inputs[1].onclick = function() {
// let ajax = new XMLHttpRequest();
// ajax.open(‘get’, ‘http://localhost:8088/JS2004/demo/1.demo.php?username=’ + inputs[0].value, true);
// ajax.send();
// };

3.ajax形式 - post方式
// let inputs = document.querySelectorAll(‘input’);
// inputs[1].onclick = function() {
// let ajax = new XMLHttpRequest();
// ajax.open(‘post’, ‘http://localhost:8088/JS2004/demo/1.demo.php’, true);
// ajax.setRequestHeader(‘content-type’, ‘application/x-www-form-urlencoded’);
// ajax.send(‘username=’ + inputs[0].value);
// };

4.利用地址栏+get方式 a标签可以通过地址栏传递数据到后端，通过get方式
//http://localhost:8088/JS2004/demo/4.form.php?id=12