技术贴
一、如何理解Ajax技术：
是浏览器提供的一种方法：可以在不刷新页面的情况下，实现页面数据的更新，提高用户浏览网站的体验。

二、应用的场景：
a)页面上拉加载更多数据
b)列表数据无刷新分页
c)表单项离开焦点数据验
d)搜索框提示文字下拉列表
e)音频浏览器播放的时候切换页面接着播放

三、Ajax的运行环境
需要运行在网站环境中，所以需要借助node开启网站服务器，通过http协议，实现静态资源的访问

四：运行原理
Ajax相当于是浏览器的代理人，由Ajax向服务端发送请求，并接受服务端的响应，然后利用DOM方法将服务器端发送过来的数据添加到页面中，实现用户边浏览网站边向服务器端请求数据。

五：代码实现：
注意：
为了实现ajax效果，提交按钮用input--->type='button'来写，因为如果用submit，提交的时候会有默认跳转行为，（a链接也有，form表单里面的submit提交），如果用submit就需要阻止默认跳转行为才能显示ajax效果，

阻止默认跳转行为的方法有：
.1 return false
.2 event.preventDefauit（）
在ajax中，我们需要手动拼接字符串

1】get请求参数
在请求地址中拼接参数
post请求参数第一种方式
2】post请求参数-------与地址栏URL无关所以参数后面没有“ ？”
设置报文的格式
请求参数放在send中
post请求参数第二种方式
3】json+post方式传递参数
前端和后端沟通只能通过字符串（二进制流）
客户端的数据发送请求的时候需要转换成字符串
服务端输数据数据的时候还是字符串
服务端的数据和html字符串进行拼接的时候需要转换成对象
发送请求：
  xhr.send(JSON.stringify({name: 'lisi', age:50}));
拼接数据：
var obj=JSON.parse(xhr.responseText); document.body.innerHtml=obj.name; //拼接对象

Ajax状态码（xhr.readyState)：返回值是0.1.2.3.4表示ajax请求的过程，代码运行到哪一步
http状态码(xhr.status)：400/200/500等，是服务器端返回的，表示整个过程运行的结果

低版本浏览器的缓存问题：因为请求地址不变，所以只有第一次是想服务端发送请求，后面拿到的数据是从缓存中拿的，
解决办法：在请求地址后面拼接上一个随机数作为一个参数，让每次地址不一样

异步函数的三种方法=====>目的：当前代码不会阻塞后面代码的执行
.1回调函数
.2promise
.3async await=====最常用


Ajax函数的封装：封装后的ajax的写法
1、模板引擎的作用
使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来

n模板引擎的安装
            npm  install art-template --save

使用：
步骤：
.1引入js文件---art-template 引入的时候注意如果app.js里面有绝对路径了，引入的时候应该放的是/js/template-web.js、、
6=
.2.准备 art-template 模板
3.告诉模板引擎将哪一个模板和哪个数据进行拼接
4.数据和html字符串要如何拼接
5.将拼接好的html字符串添加到页面中
2/4. 通过模板语法告诉模板引擎，数据和html字符串要如何拼接 1.引入库文件 3.告诉模板引擎将哪一个模板和哪个数据进行拼接 var html = template('tpl', {username: 'zhangsan', age: '20'}); 5.将拼接好的html字符串添加到页面中 document.getElementById('container').innerHTML = html;
FormData 对象的作用：
1.模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。
2.异步上传二进制文件
formDate：
第一个相当于整个表单写完后的提交（上传）功能
第二种是相当于只是表单中上传头像的提交（上传）功能
4个属性
n获取表单对象中属性的值
formData.get('key');

n设置表单对象中属性的值
formData.set('key', 'value');

n删除表单对象中属性的值
formData.delete('key');

n向表单对象中追加属性值
formData.append('key', 'value');

nAppend 与 Set 方法的区别
注意：set 方法与 append 方法的区别是，在属性名已存在的情况下，set 会覆盖已有键名的值，append会保留两个值。

二进制下文件上传代码：
一、同源政策：
.1Ajax请求限制：
Ajax只能想自己的服务器发送请求。

.2什么是同源政策：
指协议（http/https）、域名（www.baidu.com/www.xinlang.com等）、端口（80/3000等)相同的页面，参数不考虑进去，如果这三个有一个不相同就不是同源

2-2:同源政策的目的：
保证用户的信息安全，防止恶意窃取数据

如果不同源的话，就会出现跨域的问题，ajax访问的时候就会报错（因为浏览器在做限制）
但是有些情况是需要跨域的(比如天气预报--需要访问期气象局的数据)

解决跨域问题的方法：
目前了解到的有三种 jsonp、 cors 、 代理（nginx代理）

.1jsonp（json with padding）====老版，现在很少用，用于面试回答原理
原理：利用scritp标签可以跨域
实现：
.1封装一个函数
.2把地址单独领出来作为一个变量参数
.3前后端建立一个联系，前端设置一个全局函数，后端调用同名数据对象（字符串类型）
解析：A网站的前端需要设置一个全局函数，函数的参数是从后台接收到的数据对象，需要在B网站的服务器里面设置返回的值是调用同名函数返回数据，然后利用script标签可以跨域的属性，设置src的属性为B网站的地址，就可以实现跨域访问了。


优化：
.1优化函数名
把url地址抽离出来，然后给函数fn规定命名为callback/cb=fn
在给fn拼接一个随机参数，防止重复
.2动态创建script标签----让这个事件可控，可以通过绑定点击事件
用creatElement（'script')的方法--设置script.src值的内容----通过appendChild追加到页面---添加onload事件，在script标签加载完毕用removeChild（script）删除属性，
.3封装json函数，方便发送请求

封装好的函数包含以下属性：
url:需要请求的地址
data：需要传入的参数，可以是键值对的形式
success：我们需要对拿到的数据进行的操

注意：在JQuery中，将ajax和jsonp放在一起，因为JQuery在封装函数的时候，进行了判断，所以我们再写的时候只需要再添加一个type属性就可以，在type里面输入ajax或者jsonp就可以
jsonp与ajax的区别：
.1json只能用于发送get请求，不能处理post请求
.2jsonp不安全，不能拒绝别人的请求-----谁都可以访问
.3jsonp不是在network的xhr中查看，而是在all中查看
4.jsonp返回的并不是一个json字符串，而是一个函数的调用形式
(1)       形象的被称之为jsonp = json with padding

为什么在封装jsonp函数的时候 没有设置请求方式？
因为jsonp不支持post 只能get


解决跨域方法二-----cors：跨域资源共享------>现在常用---需要前后端配合
cors：Corss-origin resource sharing
允许浏览器向跨域服务器发送ajax请求
原理：
后端需要做以下处理，设置哪些网站可以跨域访问，以及允许哪种请求方式
•        res.header('Access-Control-Allow-Origin','白名单不限制的域名 可以用通配符')
•        res.header('Access-Control-Allow-Methods','get,post')
前端直接用ajax访问就可以（不需要做任何操作）
理解：
•        A网站中的ajax不能访问B网站中的数据，因为会跨域
•        跨域的原因：浏览器在做限制
•        A网站就在服务器代码中去请求B网站中的数据，做为一个路由
•        A网站的ajax去请求A网站的这个路由

•        环境搭建
•        1、mongo
•        2、use admin
•        3、db.auth('root','root')
•        4、use todo
•        5、db.createUser({user:'itcast',pwd:'itcast',roles:['readWrite']})
•        6、按住CTRL+C两次退出
•       
•        链接老师的数据库
•        mongoose.connect('mongodb://itcast:itcast@192.168.16.86:27017/todo', {useNewUrlParser: true })
•       
•        JQuery中数据自动拼接成字符串类型，并转换为对象，方便调用
•        serialize（）
•        注意：要有name属性
•        缺点：拿到的值是字符串形式，不方便调用
•        serializeArray（）
•        拿到的值是数组形式，需要运用遍历的方法 拿到对象形式的值，方便调用
       
XML现在很少会在ajax的时候作为前后端交互的数据格式，因为它有如下两个缺点：
1、冗余数据太多了，数据太沉重
2、操作起来太麻烦了（必须使用DOM的操作方式）

技术贴
一、如何理解Ajax技术：
是浏览器提供的一种方法：可以在不刷新页面的情况下，实现页面数据的更新，提高用户浏览网站的体验。

二、应用的场景：
a)页面上拉加载更多数据
b)列表数据无刷新分页
c)表单项离开焦点数据验
d)搜索框提示文字下拉列表
e)音频浏览器播放的时候切换页面接着播放

三、Ajax的运行环境
需要运行在网站环境中，所以需要借助node开启网站服务器，通过http协议，实现静态资源的访问

四：运行原理
Ajax相当于是浏览器的代理人，由Ajax向服务端发送请求，并接受服务端的响应，然后利用DOM方法将服务器端发送过来的数据添加到页面中，实现用户边浏览网站边向服务器端请求数据。

五：代码实现：
注意：
为了实现ajax效果，提交按钮用input--->type='button'来写，因为如果用submit，提交的时候会有默认跳转行为，（a链接也有，form表单里面的submit提交），如果用submit就需要阻止默认跳转行为才能显示ajax效果，

阻止默认跳转行为的方法有：
.1 return false
.2 event.preventDefauit（）
在ajax中，我们需要手动拼接字符串

1】get请求参数
在请求地址中拼接参数
post请求参数第一种方式
2】post请求参数-------与地址栏URL无关所以参数后面没有“ ？”
设置报文的格式
请求参数放在send中
post请求参数第二种方式
3】json+post方式传递参数
前端和后端沟通只能通过字符串（二进制流）
客户端的数据发送请求的时候需要转换成字符串
服务端输数据数据的时候还是字符串
服务端的数据和html字符串进行拼接的时候需要转换成对象
发送请求：
  xhr.send(JSON.stringify({name: 'lisi', age:50}));
拼接数据：
var obj=JSON.parse(xhr.responseText); document.body.innerHtml=obj.name; //拼接对象

Ajax状态码（xhr.readyState)：返回值是0.1.2.3.4表示ajax请求的过程，代码运行到哪一步
http状态码(xhr.status)：400/200/500等，是服务器端返回的，表示整个过程运行的结果

低版本浏览器的缓存问题：因为请求地址不变，所以只有第一次是想服务端发送请求，后面拿到的数据是从缓存中拿的，
解决办法：在请求地址后面拼接上一个随机数作为一个参数，让每次地址不一样

异步函数的三种方法=====>目的：当前代码不会阻塞后面代码的执行
.1回调函数
.2promise
.3async await=====最常用


Ajax函数的封装：封装后的ajax的写法
1、模板引擎的作用
使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来

n模板引擎的安装
            npm  install art-template --save

使用：
步骤：
.1引入js文件---art-template 引入的时候注意如果app.js里面有绝对路径了，引入的时候应该放的是/js/template-web.js、、
6=
.2.准备 art-template 模板
3.告诉模板引擎将哪一个模板和哪个数据进行拼接
4.数据和html字符串要如何拼接
5.将拼接好的html字符串添加到页面中
2/4. 通过模板语法告诉模板引擎，数据和html字符串要如何拼接 1.引入库文件 3.告诉模板引擎将哪一个模板和哪个数据进行拼接 var html = template('tpl', {username: 'zhangsan', age: '20'}); 5.将拼接好的html字符串添加到页面中 document.getElementById('container').innerHTML = html;
FormData 对象的作用：
1.模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。
2.异步上传二进制文件
formDate：
第一个相当于整个表单写完后的提交（上传）功能
第二种是相当于只是表单中上传头像的提交（上传）功能
4个属性
n获取表单对象中属性的值
formData.get('key');

n设置表单对象中属性的值
formData.set('key', 'value');

n删除表单对象中属性的值
formData.delete('key');

n向表单对象中追加属性值
formData.append('key', 'value');

nAppend 与 Set 方法的区别
注意：set 方法与 append 方法的区别是，在属性名已存在的情况下，set 会覆盖已有键名的值，append会保留两个值。

二进制下文件上传代码：
一、同源政策：
.1Ajax请求限制：
Ajax只能想自己的服务器发送请求。

.2什么是同源政策：
指协议（http/https）、域名（www.baidu.com/www.xinlang.com等）、端口（80/3000等)相同的页面，参数不考虑进去，如果这三个有一个不相同就不是同源

2-2:同源政策的目的：
保证用户的信息安全，防止恶意窃取数据

如果不同源的话，就会出现跨域的问题，ajax访问的时候就会报错（因为浏览器在做限制）
但是有些情况是需要跨域的(比如天气预报--需要访问期气象局的数据)

解决跨域问题的方法：
目前了解到的有三种 jsonp、 cors 、 代理（nginx代理）

.1jsonp（json with padding）====老版，现在很少用，用于面试回答原理
原理：利用scritp标签可以跨域
实现：
.1封装一个函数
.2把地址单独领出来作为一个变量参数
.3前后端建立一个联系，前端设置一个全局函数，后端调用同名数据对象（字符串类型）
解析：A网站的前端需要设置一个全局函数，函数的参数是从后台接收到的数据对象，需要在B网站的服务器里面设置返回的值是调用同名函数返回数据，然后利用script标签可以跨域的属性，设置src的属性为B网站的地址，就可以实现跨域访问了。


优化：
.1优化函数名
把url地址抽离出来，然后给函数fn规定命名为callback/cb=fn
在给fn拼接一个随机参数，防止重复
.2动态创建script标签----让这个事件可控，可以通过绑定点击事件
用creatElement（'script')的方法--设置script.src值的内容----通过appendChild追加到页面---添加onload事件，在script标签加载完毕用removeChild（script）删除属性，
.3封装json函数，方便发送请求

封装好的函数包含以下属性：
url:需要请求的地址
data：需要传入的参数，可以是键值对的形式
success：我们需要对拿到的数据进行的操

注意：在JQuery中，将ajax和jsonp放在一起，因为JQuery在封装函数的时候，进行了判断，所以我们再写的时候只需要再添加一个type属性就可以，在type里面输入ajax或者jsonp就可以
jsonp与ajax的区别：
.1json只能用于发送get请求，不能处理post请求
.2jsonp不安全，不能拒绝别人的请求-----谁都可以访问
.3jsonp不是在network的xhr中查看，而是在all中查看
4.jsonp返回的并不是一个json字符串，而是一个函数的调用形式
(1)       形象的被称之为jsonp = json with padding

为什么在封装jsonp函数的时候 没有设置请求方式？
因为jsonp不支持post 只能get


解决跨域方法二-----cors：跨域资源共享------>现在常用---需要前后端配合
cors：Corss-origin resource sharing
允许浏览器向跨域服务器发送ajax请求
原理：
后端需要做以下处理，设置哪些网站可以跨域访问，以及允许哪种请求方式
•        res.header('Access-Control-Allow-Origin','白名单不限制的域名 可以用通配符')
•        res.header('Access-Control-Allow-Methods','get,post')
前端直接用ajax访问就可以（不需要做任何操作）
理解：
•        A网站中的ajax不能访问B网站中的数据，因为会跨域
•        跨域的原因：浏览器在做限制
•        A网站就在服务器代码中去请求B网站中的数据，做为一个路由
•        A网站的ajax去请求A网站的这个路由

•        环境搭建
•        1、mongo
•        2、use admin
•        3、db.auth('root','root')
•        4、use todo
•        5、db.createUser({user:'itcast',pwd:'itcast',roles:['readWrite']})
•        6、按住CTRL+C两次退出
•       
•        链接老师的数据库
•        mongoose.connect('mongodb://itcast:itcast@192.168.16.86:27017/todo', {useNewUrlParser: true })
•       
•        JQuery中数据自动拼接成字符串类型，并转换为对象，方便调用
•        serialize（）
•        注意：要有name属性
•        缺点：拿到的值是字符串形式，不方便调用
•        serializeArray（）
•        拿到的值是数组形式，需要运用遍历的方法 拿到对象形式的值，方便调用
       
XML现在很少会在ajax的时候作为前后端交互的数据格式，因为它有如下两个缺点：
1、冗余数据太多了，数据太沉重
2、操作起来太麻烦了（必须使用DOM的操作方式）