功能需求

1. 在添加的时候做用户名唯一性检查

1. 做数据展示做一个无刷新分页（分页插件 layUI 闲心）

1. 做删除的时候做Ajax无刷新删除 + 事件代理完成、事件委托

实操-添加

用户注册-唯一性检验

1. 编写一个user.html文件，展示一个注册表单

效果

1. 在user.html页面编写js代码进行校验用户信息，如果前台校验成功，使用ajax发送网络请求，进行用户唯一性处理

注意：这里的swal函数使用的是sweetalert插件提供的。

1. 在后台编写一个checkUser.php文件完成用户唯一性校验，可以注册返回1，不可以注册返回0

用户注册-添加入库

1. 编写一个user.html文件，展示一个注册表单

效果

1. 在user.html页面编写js代码进行校验用户信息，如果前台校验成功，使用ajax发送网络请求，进行用户入库操作

注意：这里的swal函数使用的是sweetalert插件提供的。

3. 在后台编写一个addkUser.php文件完成用户入库操作，成功返回1，失败返回0

sweetalert插件

相关网站：

http://www.bootcdn.cn/sweetalert/

http://mishengqiang.com/sweetalert/

1. 在bootcdn网站查询sweetalert插件

1. 自己的页面引入对应的css和js资源文件，调用 swal 函数进行测试

效果：

实操-用户展示

用户的展示-无刷新分页

昨天使用了一个叫做layUI提供的一个layPage的分页插件。

功能需求分析：

代码实现：

1. 定义一个ulst.php展示用户的列表，默认获取显示第一页的数据

1. 定义一个formatDataEs6方法格式化用户信息，返回一个HTML字符串

1. 定义一个userList.php页面，接收分页请求，返回数据

underscore工具库

简介：

1. 编写一个HTML文件，引入underscore.js文件，编写js代码，调用该工具库提供的方法

注意：_.each() 用于遍历数组 _.uniq() 用于数组去重

2. 效果

实操-用户删除

功能需求：

1. 在ulst.php为table元素定义一个id属性

1. 为该table元素绑定一个点击事件

1. 定义一个ajaxDelUser函数，发送ajax请求，删除用户信息

事件优化处理机制简介

优化处理

json简介

①-json是什么？

1. 什么是json？

答：json是由一个叫做道格拉斯（道叔，josn规范的制定者，一般他是json发现者）发现的一种在多种语言（js\php\java\c\python…）之间进行数据传递的一个文本的数据格式。以前也可以使用XML来组织格式来交换数据，但是XML操作起来非常的麻烦，慢慢的更多的是使用json格式数据做传递。

注意：虽说现在json非常的流行，但不意味着XML没有使用的必要的。在很多的领域XML还是有其独特的优势，尤其是在数据传递格式非常严苛的情况下（DTD：文档约束，主要是可以去约束XML的定义），例如银行的系统。并且可以做小型的数据库、还可以做配置文件（Java里面很多的配置文件都是使用xml）。

注意：json也是可以作为配置文件的，例如composer的包管理器的配置文件。(现在很多的项目都是使用json作为配置文件)

注意：多种格式的数据都可以作为配置文件

1. php.ini
2. httpd.conf
3. conf.yaml
4. composer.json
5. config.xml

面试：json还是XML好？没有什么好或不好，主要是实际的业务需求，以及公司领导的安排。

官网：http://www.json.org.cn/

json是啥？

网站：http://www.json.org.cn/standard.htm

②-json格式到底是如何定义的？

形如下面的数据结构被称为json格式的文本，需要注意：json格式里面的 key/value对是无序的。和php里面的关联数组比较类型，也和js里面的json字面量对象很像。

定义语法：

{

“key”: “value1”, // value值是字符串的时候必须加上双引号，同时 key 必须要加双引号

“age” : 12,

“isBool”: true // 最后的key value 不能加逗号

}

通过工具进行校验：

https://www.bejson.com/

③-php里面如何处理json格式数据？

1. 如何把php里面的复合数据类型转换为json格式的字符串数据？（json_encode 1. 中文 gb2312 2. Unicode编码）

效果

1. 如何把json格式的数据转换为php里面的复合数组类型？(json_decode)

效果：

备注：如果json_decode($jsonString) 不加第二个参数，则转换成php里面的一个标准对象

效果

1. 注意小的细节：在php里面如果要把一个复合数据类型，里面的中文，转换成json格式字符串，php里面的复合数据类型必须是utf-8的编码。并且转换后的中文数据使用的16进制Unicode编码。同时如果这个时候不希望将中文字符转换为16进制的编码该如何处理呢？

http://www.laruence.com/2011/10/10/2239.html

效果：

注意：如果中文使用的gb2312编码保存的，则转换不成功。

效果：

总结：在使用json_encode做复合数据类型转换的时候，如果数据里面存在中文，则必须是utf-8的编码，如果不是，则准换不成功。（千万注意：公司的老的项目使用的是gb2312编码的，这个时候在做接口处理的时候，特别注意，需要把gb2312转换成utf-8编码）。

4. 在php里面如果要把一个复合数据类型，里面的中文转换成json格式字符串，php里面的复合数据类型必须是utf-8的编码。并且转换后的中文数据使用的16进制Unicode编码。同时如果这个时候不希望将中文字符转换为16进制的编码该如何处理呢？

http://www.laruence.com/2011/10/10/2239.html

代码：

header(‘Content-Type:text/html;charset=utf-8’);

$data = array(‘name’=> ‘中文’);

echo json_encode($data, JSON_UNESCAPED_UNICODE);

效果：

④-js里面如何处理json格式的数据？

1. 如何把js里面的复合数据类型转换成json格式的数据？

效果

1. 如何把json格式的数据转换成js里面的复合数据类型？

效果

注意：也可以使用eval 转换（eval可以执行一个满足js语法格式的字符串）

效果

网站：https://www.zhihu.com/question/19884767

1. 在jQuery里面也提供对应的转换函数，遍历函数

1. json2.js文件，可以在js里面把对象和字符串相互的转换（ JSON.parse 和 JSON.stringify 一样，只是做了一个浏览器的兼容性处理，一般在自己的项目的html文件，引入该文件即可，自己会做兼容操作：如果低版本的浏览器不存在JSON.parse 和 JSON.stringify 则使用json2.js文件里面提供的；如果浏览器存在两个方法，则使用浏览器本身提供的方法处理）

网站：https://github.com/douglascrockford/JSON-js

Ajax之文件上传

文章：http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

http://blog.csdn.net/inuyasha1121/article/details/51915742

①-简介

1. 使用Ajax实现文件的上传，但是这个标准只在w3c高版本的浏览器里面有实现，是属于一个ajax level2的标准。在低版本的IE里面是不兼容的。

网站：https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

1. 在使用Ajax做文件上传的时候，需要借助一个FormData对象，这个对象具有收集表单数据的能力，可以收集表单里面普通的数据，也可以收集文件信息。可以参考下面提供的文件。

②-FormData对象简单使用

在ajax里面做无刷新文件上传之前，我们需要先了解一个叫做FormData对象，然后这个对象可以帮我们去收集表单的数据（1. 基本数据 text 2. 可以收集上传文件）。

1. 设计一个如下的注册的表单（收集基本数据 text password）

效果

1. 利用FormData对象收集表单数据，然后使用Ajax技术发送给后台

注意：在使用FormData对象收集表单数据，使用Ajax发送POST请求的时候，不要设置请求头，如果设置，在服务器端，则无法正常收集post提交的数据信息。

1. 服务器定义一个 register.php 文件，接收ajax请求

③-文件上传-显示进度条效果

进度条效果

需求分析：

1. 由于我们上传要显示进度条，文件一般都是很大的文件，所以需要修改post上传数据的大小。
2. 整个表单提交的大小

b. 单个文件提供的大小

1. 创建一个上传文件的表单页面

效果

1. 使用Ajax做文件上传的时候，我们需要不断得知文件已经上传文件的大小和文件总大小的一个百分比。
   1. (loaded size )/ ( total size) 等于小的div宽度的百分比
   2. 如何获取文件已经上传的大小和总大小？

答：利用Ajax leval2 第一个新的方法（在这个Ajax对象上面存在一个upload属性，属性里面存在一个onprocess属性，可以这个属性设置一个回调函数，这个回调函数，会在有文件上传的时候，距离一定的间隔进行触发调用）

1. 在浏览器使用ajax完成图片上传

1. 定义一个register.php文件，接收ajax请求，完成上传

6. 效果

④-上传插件

现在一般来说我们很少自己使用ajax进行文件上传，一般都使用现成插件进行完成。底层的原理使用的 FormData 对象 + ajax ，注意，如果是低版本的IE浏览器也需要做无刷新文件上传，则FormData对象不能在使用，则我们可以使用 iframe技术进行无刷新上传。

插件：

1. 百度出的 webuploader

1. zyupload

Ajax跨域问题

①-什么是跨域？

答：当使用Ajax技术去请求本域名的资源信息的时候，是可以直接请求的。但是如果去别的域名的资源信息的时候，这个时候由于浏览器的一个同源政策的限定，是不允许直接去获取别的域名下的资源信息。

例如：www.sinsea.cn/index.html(ajax) —————>http://www.tngou.net/doc/food(提供的一个接口)

上面的这种请求就是一个跨域请求。

②-浏览器的同源政策是什么？

答：现代的浏览器默认只能让Ajax去请求本域名里面的资源信息，如果要请求域名的资源信息，则是不允许的。（备注：严格是是允许请求，但是请求后，会把响应的数据丢弃掉）

为什么浏览器存在同源政策的限定？

答：主要是为了安全。但是由于现在的项目融合比较多，肯定存在跨域的需求。

③-跨域示例

本域名：local.php.com

请求域名：local.test.com

两个域名不是同一个域。则使用ajax请求就会报错。

④-跨域成熟的解决方案

对于Ajax的跨域成熟的解决方案存在如下三种：

1. jsonp技术【最早技术来解决，比ajax还早】
2. 同域代理【需要自己服务器进行处理】
3. cors 响应头【缺陷 HTML5新标准，现代浏览器才支持】

目前使用最多应该是jsonp技术。其次就是同域代理。最后cors设置

jsonp的原理-只支持get方式-需要目标网站支持

简介

1. 由于同源政策的限定，Ajax是没办法直接请求别的域名的资源信息
2. 但是img script 等标签，可以发送网络请求，这些标签不受同源政策的限定
3. 我们可以动态去创造一个script标签，然后把它的src设置我们请求的地址，然后请求的时候还传递一些参数（传递一个叫做callback参数）
4. 请求的目标站，接受请求，过滤参数，对对应的数据格式化成json【把格式化后的json数据放置在传递过程中传递的一个叫做callback的回调函数里面】，然后在进行响应。

注意：jsonp只能完成get请求，同时jsonp需要目标网站的支持（把需要返回的数据填充在一个callback的回调函数里面）。

uuid相关资料：

http://www.jianshu.com/u/811a3c46491e

功能需求

请求历史上的今天进行数据获取

API接口：

https://api.asilu.com/

历史上的今天：

https://api.asilu.com/today/todayonhistory/

实操

1. 在自己网站定义一个页面，使用jsonp完成网络请求

效果

1. 引入jsonp.js文件，使用jsonp进行数据请求

3. 效果

同域代理

由于jsonp的技术需要目标网站的支持完成get请求，然后才可以完成请求。现在可以在自己的域名下创建一个动态的脚本文件.php（服务器端不受同源政策的限定），让这个php文件帮我们发送目标网站的请求。

原理图：

场景：

1. A域名希望通过Ajax请求B域名接口提供的天气信息，直接请求存在跨域，肯定是不允许的

2. A域名的Ajax可以先请求A域名的一个动态的脚本文本（携带一个参数？请求的B域名目标网站），让该脚本文件帮我们请求B域名的接口，然后请求完成后，把数据进行返回给本域名Ａ

3. A域名就可以通过中间的PHP脚本获取到数据

4. 中间的服务器充当的是一个代理人

代码：

A域名的Ajax请求

A域名的代理op.php 进行代理请求

效果

cors设置响应头-需要注意目前只支持w3c的浏览器

网站：http://www.cnblogs.com/Darren_code/p/cors.html

网站：http://www.cnblogs.com/hustskyking/

网站：http://www.cnblogs.com/TomXu/

原理：在目标网站设置一个允许访问的响应头。

在B域名的目标网站，设置一个响应头

在A域名可以直接使用Ajax调用B域名的资源信息

扩展-允许cors进行跨域

接口：https://cnodejs.org/api/v1/topics

总结：

对于ajax跨域，其真实的解决方法只有 cors（响应头）。

用的 jsonp 、同域代理（解决ajax不能跨域的一种方案）。

功能-自己实现

头条网站接口：

http://v.juhe.cn/toutiao/index?type=&key=d0c418c9d5324a8ddf197e85c3dc9c5a

不支持 jsonp 也不支持 cors 。那么只能进行同域代理。

效果

加载更多

0、知识点补充

查找节点：

firstChild lastChild：会把空白计算在内

firstElementChild lastElementChild ：只查找元素类型的子节点，不会计算空白，但是在IE8+才支持

克隆节点：cloneNode()

一、案例—淡入效果

1、做默认的html+css

2、每隔两秒生硬的变化

加入临界条件，控制inIndex和outIndex的范围：

3、创建一个设置透明图的方法

4、让图片慢慢变化

5、解决变化过程中，最后一张总是显示的问题

变化过程中，待显示的图片的透明度还没有达到1，也就是半透明状态，而其他图片的z-index值又都为1，z-index值相同的话，默认总是显示最后一张。

解决的办法，变化这一刻（在变化的1秒钟之内），待显示的图片的z-index设置为3，其他的图片的z-index的值设置为1，让待隐藏的图片的z-index值为2.

二、事件与事件对象

1、事件监听与移除事件监听

事件监听要解决的问是给一个dom对象绑定多个事件。

1、事件监听

针对IE8+及火狐浏览器，使用addEventLister()，在绑定事件的时候，不要写on。

针对IE8及更低版本浏览器使用attachEvent()，绑定的事件倒序执行。

写一个兼容性的函数：

2、移除事件监听

兼容性写法：

2、事件对象

事件对象存在于事件处理函数中。

事件对象就是描述当前事件的具体的情况的对象。这个对象根据事件的不同，内容可能会发生细微的变化，比如键盘事件，事件对象就会包括keyCode，比如单击事件，事件对象就会包含点击的坐标。

获取事件对象的兼容性写法：

shiftKey：表示是否按了shift键，如果按了返回true，没有按返回false

ctrlKey：表示是否按了ctrl键，如果按了返回true，没有按返回false

altKey：表示是否按了alt键，如果按了返回true，没有按返回false

keyCode：表示键盘的代码，是一个数字，每个键都会对应一个数字。具体查看“键盘KeyCode对照表.docx”

判断是否按了@键：

3、阻止冒泡事件

1、什么是冒泡事件？

在点击b这个div的时候，由于b在a的上面，也相当于点击了a。所以会触发两个事件，这种情况就是冒泡事件。

2、如何阻止冒泡行为

如果要阻止冒泡，

标准浏览器使用evt.stopPropagation()

IE内核浏览器使用window.event.cancelBubble = true;

4、阻止默认行为

比如表单提交或者超链接跳转，都会有一个地址，点击表单中的提交按钮或者超链接就会跳转到相应的地址。如果点击之后不希望这样跳转，就使用js方法阻止它，这就是阻止默认行为。

另外的方法：

三、案例—可编辑的表格

1、完成html+css布局

css：

2、隔行换色

3、找到包括名字的td，并绑定单击事件

4、点击td后，将input放到td中

设置input的样式，阻止产生多个input

5、给input绑定事件

四、面向对象概述

1、什么是对象

我喜欢大眼睛，长头发，大长腿，小蛮腰，会洗衣服，会做饭，会生孩子的女孩。比如有孙俪，范冰冰。

上面这句话中的“大眼睛，长头发，大长腿，小蛮腰，会洗衣服，会做饭，会生孩子”表示一类人，在程序中就是一个类。而孙俪，范冰冰是符合这类的人，在程序中就的对象。

2、面向对象编程

面向对象编程简称OOP（Object-Oritened Programming）为软件开发人员敞开了一扇大门，它使得代码的编写更加简洁、高效、可读性和维护性增强。它实现了软件工程的三大目标：（代码）重用性、（功能）扩展性和（操作）灵活性，它的实现是依赖于面向对象的三大特性：封装、继承、多态。在实际开发中 使用面向对象编程 可以实现系统化、模块化和结构化的设计 它是每位软件开发员不可或缺的一项技能。

五、自定义对象

1、构造函数和类的说明

PHP中要声明一个对象的话，必须先声明一个类，然后通过关键字new实例化得到一个对象。

在js中，没有类的概念，只有构造函数的概念，js中会把构造函数当做类。

在ES6（ECMAScript6）中才引入了类的概念。

2、this关键字和成员

用this关键字，在构造函数中添加成员：

this表示根据Person实例化的每个对象。当前用的是哪个对象，this就表示哪个对象。

3、删除成员

使用的关键字是delete。delete关键字用于删除对象的成员，既可以删除成员属性，也可以删除成员方法。

4、练习

案例目的是设置dom对象的css样式：

使用的办法不是直接设置，而是将设置dom对象css样式写到对象的成员方法中

完成链式调用：

5、自定义对象在内存中的表现形式

创建一个对象后，会在内存中栈和堆都开辟一个新的空间，堆中存储的是对象的实际内容，栈区存放的是堆的地址。

删除其中一个对象，会不会对另外的对象有影响？

六、json格式的对象

1、json简介

json就是符合某种格式的字符串。

JavaScript 对象表示法（JavaScript Object Notation）。

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析

JSON是独立于语言和平台的。所有的编程语言都认识JSON，这一点和XML一样。

2、json格式

有两种写法：

①：方括号在外层，和JavaScript中的数组格式一样。

[‘apple’, ‘banana’, ‘pear’, ‘orange’, ‘xigua’]

[{id:1, name:’宋江’, nickname:’及时雨’}, {id:2, name:’卢俊义’, nickname:’玉麒麟’},{id:1, name:’林冲’, nickname:’豹子头’}]

②、大括号在外，和JavaScript中的对象格式一样。

{键:值, 键:值, ….}

{键:[], 键:[], …}

只要是[]，就要符合中括号的语法（和数组写法一样）;

只要是大括号，就要符合大括号的语法（键:值, …）

3、json格式的对象

我们最终要讨论的是JavaScript的对象写法，只不过这种写法和json的格式一样。

成员属性和成员方法：

调用成员：

七、内置对象

手册位置：上面的JavaScript—左侧的JavaScript—右侧的参考书

1、Object

2、String对象

使用方法：

属性

length：表示字符串的长度。

方法：

indexOf() – 查找一个字符串是否存在，返回值是存在的位置（存在的情况），或-1（不存在）

substr() – 截取字符串。两个参数，第一个参数表示起始位置可以是负数；第二个参数可选，表示长度，非负，不填表示到结尾

substring() –截取字符串。两个参数，都是非负数。分别表示起始位置和结束位置，第二个参数不写表示到结尾

slice() –截取字符串。两个参数，第一个表示起始位置，可以是负数。第二个是结尾位置。注意结尾位置不能在起始位置之前。

split() – 将字符串分割成数组。两个参数，第一个表示分隔符，第二个可选表示数组的最大长度

replace – 替换字符串中的值。两个参数，第一个表示查找的值，第二个表示替换后的值。

3、Date对象

使用方法，先new Date()，得到一个对象，然后用这个对象调用它里面的成员方法。

4、Array对象

属性：

length，表示数组元素个数

方法：

concat() 连接两个或更多的数组，并返回结果。

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

reverse() 颠倒数组中元素的顺序。

shift() 删除并返回数组的第一个元素

slice() 从某个已有的数组返回选定的元素

splice() 删除元素，并向数组添加新元素。

toString() 把数组转换为字符串，并返回结果。

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

5、Math对象

方法：

abs(x) 返回数的绝对值。 正数的绝对值是它本身，负数的绝对值是它的相反数。

ceil(x) 对数进行上舍入。

floor(x) 对数进行下舍入。

max(x,y) 返回 x 和 y 中的最高值。

min(x,y) 返回 x 和 y 中的最低值。

random() 返回 0 ~ 1 之间的随机数。包含0，不包含1。[0,1)

随机整数公式：Math.floor(i + Math.random() * (j – i + 1))

round(x) 把数四舍五入为最接近的整数。

6、window对象

方法：

alert(); — 弹出一个警告框

confirm(‘你确定要删除吗’); 点击确定返回true，点击取消返回false

prompt() – 弹出一个可输入的对话框，点击确定返回输入的内容，点击取消返回null

open() – 打开一个新窗口

var s =setTimeout(“js代码或js函数”, 毫秒数) – 表示多少毫秒后，执行前面的js代码或函数，只执行一次

var t =setInterval(“js代码或js函数”, 毫秒数) – 表示每隔多少毫秒，执行一次前面的js代码或函数。

clearTimeout(s); — 清除由setTimeout产生的定时器

clearInterval(t); — 清除由setInterval产生的定时器

7、navigator

navigator.userAgent，从这个结果中可以查看到浏览器及浏览器的版本。

8、screen

screen.availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。

screen.availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。

screen.height返回显示屏幕的高度

screen.width返回显示屏幕的宽度

9、history

back() 加载 history 列表中的前一个 URL。

forward() 加载 history 列表中的下一个 URL。

go() 加载 history 列表中的某个具体页面。

10、location

reload() – 刷新页面，和点击浏览器中的刷新按钮是一个意思，如果添加参数为true表示强制刷新，和按Ctrl+F5一样，都表示清除缓存刷新。

location的属性：