XHR

帮助文档： http://www.treejs.cn/v3/api.php *** <link type="text/css" rel="stylesheet" href="css/ztree/zTreeStyle.css" /> <script type="text/javascript" src="js/jquery-latest.js"></script> <script type="text/javascript" src="js/ztree/jquery.ztree.all.js"></script> *** function createZTreeProject(){ var url=*; var type="post"; var async=false; var userInfo = getUserParameter(); var parm={ "data":null, "user":JSON.stringify(userInfo) }; var dataProvider = getDataByAjax(url,type,async,parm); console.log(dataProvider); var ztree = "<ul id='tree' class='ztree' style='overflow:auto;'></ul>"; $('

文件上传是最古老的互联网操作之一，20多年来几乎没有怎么变化，还是操作麻烦、缺乏交互、用户体验差。 一、前端代码 英国程序员 Remy Sharp 总结了这些 新的接口 ，本文在他的基础之上，讨论在前端采用HTML5的API，对文件上传进行渐进式增强： * iframe上传 　　 * ajax上传 　　 * 进度条 　　 * 文件预览 　　 * 拖放上传 1.1 传统形式 　　文件上传的传统形式，是使用表单元素file，参考 http://www.ruanyifeng.com/blog/2012/08/file_upload.html ： <form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" > 　　　　<input type="file" id="upload" name="upload" /> <br /> 　　　　<input type="submit" value="Upload" /> </form> 所有浏览器都支持上面的代码，点击上传按钮后，网页"锁死"，用户只能等待上传结束，然后浏览器刷新，跳到表单的action属性指定的网址。 1.2 iframe上传 　　用户点击submit时，动态插入一个iframe元素 var form = $("

文章目录 4.3. CSRF 4.3.1. 简介 4.3.2. 分类 4.3.2.1. 资源包含 4.3.2.2. 基于表单 4.3.2.3. XMLHttpRequest 4.3.3. 防御 4.3.4. 参考链接 4.3. CSRF 4.3.1. 简介 CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF，是一种对网站的恶意利用。尽管听起来像跨站脚本（XSS），但它与XSS非常不同，XSS利用站点内的信任用户，而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站。 4.3.2. 分类 4.3.2.1. 资源包含 资源包含是在大多数介绍CSRF概念的演示或基础课程中可能看到的类型。这种类型归结为控制HTML标签（例如 、、、、 由于缺少对Cookie的源点检查，如上所述，此攻击不需要XSS，可以由任何攻击者控制的站点或站点本身执行。此类型仅限于GET请求，因为这些是浏览器对资源URL唯一的请求类型。这种类型的主要限制是它需要错误地使用安全的HTTP请求方式。 4.3.2.2. 基于表单 通常在正确使用安全的请求方式时看到。攻击者创建一个想要受害者提交的表单; 其包含一个JavaScript片段，强制受害者的浏览器提交。 该表单可以完全由隐藏的元素组成

目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

python爬虫-翻页url不变网页的爬虫探究 url随着翻页改变的爬虫已经有非常多教程啦，这里主要记录一下我对 翻页url不变网页 的探究过程。 学术菜鸡第一次写CSDN，请大家多多包容～ 如果对你有一点点帮助，请帮我点个赞吧！ 翻页url不变 与 翻页url改变 有什么区别？ url其实就是链接，翻页url改变的链接就是 翻页请求在url中体现的链接 ，比方说很多爬虫初学者的第一个爬虫实例：爬取豆瓣电影top250的信息。 注意看这个网站的链接！！ 这里可以看到控制页数的参数start直接在url中体现了，改变start=之后的数值就能够实现翻页。 start=25对应的页面就是从26开始的电影，start=0对应的页面就是从1开始的电影。那么只需要控制start之后的数字以25为步长递增就可以通过for函数实现翻页。 但是有时候会遇到明明你点击了翻页，但url却不改变的情况，比如这个： 这种情况没有办法在python中直接通过改变url实现翻页。 找到翻页命令 事实上，控制网页翻页总得有一个参数，只是在翻页url改变的情况中，这个翻页参数体现在了url中，这使得我们可以通过直接改变url的方式实现翻页。对于翻页url不变的情况，我们其实只需要找到翻页命令所在的位置，然后控制这条命令即可。 下面介绍我找到翻页命令的一种方式： 打开开发者模式 在打开开发者模式的情况下点击翻页

Ajax 是异步的xml 和javascript，是一种综合技术。 利用 XMLHttpRequest(xhr)和后端进行数据交换。通过js 动态的渲染页面实现网页异步局部更新 同步与异步 同步代码会按顺序执行，当前面代码未执行完毕，后续代码不会执行，会阻塞代码执行 异步不会阻塞代码 XMLHttpRequest(xhr) 创建xml对象 var xhr = new XMLHttpRequest(); 打开HTTP连接 xhr.open(method,url,aync=true) 监听xhr的变化 xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ console.log(xhr.responseText); p.innerHTML = xhr.responseText; } } 设置头信息 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 发送数据 xhr.send(); GET //建立一个xhr对象 var xhr = new XMLHttpRequest(); //打开的方法，地址，是否异步 xhr.open("GET","./be.txt",true); xhr.send()

前言 前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。 本文完整的源代码请猛戳 github博客 ，纸上得来终觉浅，建议大家动手敲敲代码。 一、什么是跨域？ 1.什么是同源策略及其限制内容？ 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 同源策略限制内容有： Cookie、LocalStorage、IndexedDB 等存储性内容 DOM 节点 AJAX 请求发送后，结果被浏览器拦截了 但是有三个标签是允许跨域加载资源： <img src=XXX> <link href=XXX> <script src=XXX> 2.常见跨域场景 当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域 。不同域之间相互请求资源，就算作“跨域”。常见跨域场景如下图所示： 特别说明两点： 第一：如果是协议和端口造成的跨域问题“前台”是无能为力的。 第二：在跨域问题上，仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配” 。 这里你或许有个疑问： 请求跨域了，那么请求到底发出去没有？ 跨域并不是请求发不出去

　　说到WebSocket技术，其实源于服务器推送技术，在现实中很多时候需要的数据是不断变化的，比如股市数据、聊天软件，因此就需要一种客户端想要在不刷新页面的情况下实时获取到服务器端最新数据的技术，而以往的数据获取都是基于客户端主动请求，服务端返回对应数据。因此就有了服务器推送技术。 　　服务器推送技术主要由以下几种：Ajax短轮询、Ajax长轮询、SSE、HTTP流、WebSocket。 一、服务器推送技术 　　1、Ajax短轮询 　　实现简单，客户端（浏览器）定时向服务器端发送请求，获取最新的数据。可以通过在一个定时器中触发ajax请求来实现。 　　优点：实现非常简单，JS端进行一些更改即可，无需后端服务任何改动； 　　缺点：轮询的间隔过长，会导致用户不能及时接收到更新的数据；轮询的间隔过短，会导致查询请求过多，增加服务器端的负担。 　　　　　　　　　　 　　代码如下： // 每两秒触发一次ajax请求，获取最新的数据 setInterval(function(){ // do some ajax call here to retrieve latest data },2000); 　　2、Ajax长轮询 　　在Ajax轮询的基础上做的一点改进，在后端数据没有更新的时候不再返回空响应，而且后端一直保存连接，直到后端有数据变化，则相应请求并且关闭连接，前端收到数据

文件上传是最古老的互联网操作之一，20多年来几乎没有怎么变化，还是操作麻烦、缺乏交互、用户体验差。 一、前端代码 英国程序员 Remy Sharp 总结了这些 新的接口 ，本文在他的基础之上，讨论在前端采用HTML5的API，对文件上传进行渐进式增强： * iframe上传 　　 * ajax上传 　　 * 进度条 　　 * 文件预览 　　 * 拖放上传 1.1 传统形式 　　文件上传的传统形式，是使用表单元素file，参考 http://www.ruanyifeng.com/blog/2012/08/file_upload.html ： <form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" > 　　　　<input type="file" id="upload" name="upload" /> <br /> 　　　　<input type="submit" value="Upload" /> </form> 所有浏览器都支持上面的代码，点击上传按钮后，网页"锁死"，用户只能等待上传结束，然后浏览器刷新，跳到表单的action属性指定的网址。 1.2 iframe上传 　　用户点击submit时，动态插入一个iframe元素 var form = $("