1.jQuery高级用法- jQuery实现文件上传

1.定义UI结构

<!-- 导入 jQuery --> <script src="./lib/jquery.js"></script> <!-- 文件选择框 --> <input type="file" id="file1" /> <!-- 上传文件按钮 --> <button id="btnUpload">上传</button>

2.验证是否选择了文件

$('#btnUpload').on('click', function() { // 1. 将 jQuery 对象转化为 DOM 对象，并获取选中的文件列表 var files = $('#file1')[0].files // 2. 判断是否选择了文件 if (files.length <= 0) { return alert('请选择图片后再上传！‘) } })

3.向FormData中追加文件

var fd = new FormData() fd.append('avatar', files[0])

4.使用jQuery发起上传文件的请求

 什么是axios

Axios 是专注于网络数据请求的库。 相比于原生的 XMLHttpRequest 对象， axios 简单易用。 相比于 jQuery ， axios 更加轻量化，只专注于网络数据请求。

axios发起GET请求

axios.get('url', { params: { /*参数*/ } }).then(callback)

// 请求的 URL 地址

var url = 'http://www.liulongbin.top:3006/api/get' // 请求的参数对象 var paramsObj = { name: 'zs', age: 20 } // 调用 axios.get() 发起 GET 请求 axios.get(url, { params: paramsObj }).then(function(res) { // res.data 是服务器返回的数据 var result = res.data console.log(res) })

axios发起POST请求

axios.post('url', { /*参数*/ }).then(callback) // 请求的 URL 地址 var url = 'http://www.liulongbin.top:3006/api/post' // 要提交到服务器的数据 var dataObj = { location: '北京', address: '顺义' } // 调用 axios.post() 发起 POST 请求 axios.post(url, dataObj).then(function(res) { // res.data 是服务器返回的数据 var result = res.data console.log(result) }) 直接使用 axios 发起请求

 

 

 

同源: 如果两个页面的协议，域名和端口都相同，则两个页面具有 相同的源 。 同源策略: （英文全称 Same origin policy ）是 浏览器 提供的一个 安全功能 MDN 官方给定的概念 ：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。 即非同源网站之间不能进行资源交互 跨域 : 两个页面的协议，域名和端口有一个不相同,即跨域 出现跨域的根本原因： 浏览器的同源策略 不允许非同源的 URL 之间进行资源的交互 如: 网页： http://www.test.com/index.html 接口： http://www.api.com/userlist

实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS 。

JSONP ： 出现的早，兼容性好（兼容低版本 IE ）。是前端程序员为了解决跨域问题，*想出来的一种 临时解决方案。 缺点 是只支持 GET 请求，不支持 POST 请求。 CORS ： 出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请 求。 缺点 是不兼容某些低版本的浏览器

JSONP 的实现原理，

就是通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过 函 数调用 的形式，接收跨域接口响应回来的数据 缺点 JSONP 只支持 GET 数据请求，不支持 POST 请求。

jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据

 

请求，例如：

 

默认情况下，使用 jQuery 发起 JSONP 请求，会自动携带一个 c allback=jQueryxxx 的参数， jQueryxxx 是随机生成的一个回调函数名称

什么是防抖

防抖策略 （ debounce ）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触 发，则重新计时。 好处： 能够保证用户在频繁触发某些事件的时候，不会频繁的执行回调，只会被执行一次 防抖的应用场景 : 少请求次数，节约请求资源； 实现输入框的防抖 防抖动的 timer 定义防抖的函数，函数里面定义一个延时器，在演示器里面调用发起 JSONP 的请求 在触发 keyup 事件时，立即清空 timer ，然后调用防抖的函数

节流 （ throttle ），顾名思义，可以减少一段时间内事件的触发频率。 节流的应用场景 ① 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次;② 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

 

防抖 ：如果事件被频繁触发，防抖能保证只有最有一次触发生效！前面 N 多次的触发都会被忽 略！ 节流 ：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分 事件！