Ajax案例-会员模块-curd-作业

功能需求

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

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

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

实操-添加

用户注册-唯一性检验

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

效果

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

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

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

用户注册-添加入库

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

效果

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

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

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

sweetalert插件

实操-用户展示

用户的展示-无刷新分页

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

功能需求分析：

代码实现：

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

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

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

underscore工具库

简介：

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

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

2. 效果

实操-用户删除

功能需求：

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

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

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

事件优化处理机制简介

优化处理

json简介

①-json是什么？

什么是json？

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

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

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

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

php.ini
httpd.conf
conf.yaml
composer.json
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格式数据？

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

效果

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

效果：

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

效果

注意小的细节：在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格式的数据？

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

效果

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

效果

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

效果

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

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

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

①-简介

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

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

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

②-FormData对象简单使用

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

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

效果

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

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

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

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

进度条效果

需求分析：

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

b. 单个文件提供的大小

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

效果

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

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

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

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

6. 效果

④-上传插件

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

插件：

百度出的 webuploader

zyupload

Ajax跨域问题

①-什么是跨域？

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

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

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

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

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

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

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

③-跨域示例

本域名：local.php.com

请求域名：local.test.com

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

④-跨域成熟的解决方案

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

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

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

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

简介

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

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

uuid相关资料：

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

功能需求

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

API接口：

https://api.asilu.com/