网络
可乐雪碧薄荷糖
这个作者很懒,什么都没留下…
展开
-
网络-17【网站手机验证码注册模块实战】
一.实现思路整体分为两个模块文件1.主模块index.js 负责所有的事件调用,以及用户登入网页时的cookie认证2.子模块user.js中有分为两个模块一个为登录模块一个为注册模块3.将子模块通过入参的方式注入即可实现调用二.补充知识(1).图片验证码的实现方式图片验证码是后台发送的,底层实现操作并非前端操作,前端负责通过图片的路径后+随机数实现refreshCode: function(obj){ var imgUrl = obj.src;原创 2020-11-25 14:05:19 · 393 阅读 · 0 评论 -
网络-16【获取远程图片渲染瀑布流】
一.瀑布流实现原理 先固定排列第一行,将图片的高度存储到数组当中 判断第二行开始(i%5)?=1,寻找数组中最小(Math.min)的一个高度,获取该元素的高度+间距+第一行固定高度/offsetleft+间距 通过绝对定位实现瀑布流,再将该元素的高度+=间距放到数组里二.瀑布流计算公式每一个盒子的宽度总宽度-(列数-1)*间距/列数盒子距左间距(循环数i+1)%列数 ==1 ? ‘0’ : (盒子宽度+间距)*循环数盒子高度图片高度*盒子宽度/图片宽度第一行上间距原创 2020-11-25 14:03:17 · 160 阅读 · 0 评论 -
网络-15【后台列表管理模块】
一.补充知识及思路(1).思路本项目可以分解成三条线路书写1.基础数据的展示及搜索2.分页3.修改/恢复/删除第一条线路获取基础数据后调用_setDatas进行渲染,_setData可以去控制每次的数据渲染,再去控制是渲染翻页还是渲染列表数据,搜索获取到val后直接调用_setDatas去渲染即可第二条路线获取当前页数再调用_setDatas第三条路线修改通过顶层input的显示盖住下方span实现视觉编辑,失去焦点和会车时提交即可恢复删除共用一个函数来实现原创 2020-11-25 13:59:54 · 150 阅读 · 0 评论 -
网络-14【视频上传模块】
一.基础知识(1).appliaction/x-www-form-urlencodedPOST的默认的编码格式就是appliaction/x-www-form-urlencoded把表单数据变成键值对的编码方式(2).multipart/form-data二进制形式的编码用来传输文件form表单也叫同步上传(3).多文件上传<input type="file" name="file[]" multiple/>加multiple多上传,记得加[](4).原创 2020-11-25 13:58:06 · 187 阅读 · 0 评论 -
网络-13【cookie+token实现网站『持久登录』模拟】
1原创 2020-11-25 13:55:03 · 284 阅读 · 0 评论 -
网络-12【Cookie增删改查、用户追踪】
一.Cookie基础介绍只有4kb空间大小,容易造成空间不足(1).用户跟踪方式1.HTTP headers (referer)2.IP地址3.用户登录4.胖URL5.Cookie(2).原理流程服务器发送给用户浏览器并保存在本地得一小块数据,通过服务端发送一个Set-Cookie来设置(3).设置及配置项得放在服务器上才会返回才能设置好cookiedocument.cookie = 'name=xiaohong';如果过期时间为负时间,浏览器关闭得时原创 2020-11-25 13:51:02 · 134 阅读 · 0 评论 -
网络-11【JSONP跨域之『豆瓣网音乐搜索』】
重点: 加入防抖 html通过设置<meta name="referrer" content="no-referrer" />来访问被限制图片//https://api.douban.com/v2/music/search?q=关键字&callback=回调函数&count=返回条数;(function(){ var jTpl = document.getElementById('J_searchItemTpl').innerHTML, oLi原创 2020-11-25 13:48:43 · 139 阅读 · 0 评论 -
网络-10【JSONP跨域之百度联想词搜索】
一.JSONP跨域(1).说明JSONP-JSON with Padding:跨域获取JSON数据的一种非官方的使用模式JSON和JSONP不是一个类型 JSON是数据交换格式 JSONP是一种跨域获取JSON数据的交互技术 JSONP抓取的资源并不直接是JSON数据,而是带有JSON数据参数的函数执行JSON返回的:{"name":"cc"}JSONP返回的:callback({'name':'cc'})(2).前奏同源策略到底给谁走了后门? img的src lin原创 2020-11-25 13:47:14 · 133 阅读 · 0 评论 -
网络-9【六种跨域获取数据的方法】
一.基础引导(1).通过Ifram获取数据通过Ifram 的contentWindow获取index2.html数据index1<iframe src="index2.html" id="myIframe"></iframe><script type="text/javascript"> var myIframe = document.getElementById('myIframe'); myIframe.onload = functi原创 2020-11-25 13:37:58 · 506 阅读 · 0 评论 -
网络-8【AJAX版本、响应状态、超时设置、同步与异步】
一.AJAX版本XMLHttpRequest标准又分为Level 1 和Level 2XMLHttpRequest Level 1 缺点: 无法发送跨域请求 不能非纯文本的数据 无法获取传输进度XMLHttpRequest Level 2 改进 可以发送跨域请求 支持获取二进制数据(非纯文本数据) 支持上传文件 formData对象 可以获取传输进度 可以设置超时时间兼容性问题 IE8/9/Opara Mini不支持xhr对象 IE10/11不支持相应原创 2020-11-25 13:33:17 · 215 阅读 · 0 评论 -
网络-7【同步与异步请求、混编、AJAX、原生AJAX封装】
一.同步与异步请求浏览器与服务器之间的通信基础是HTTP协议用户通过网址或向服务器提交请求,服务器向浏览器发送相应的响应问题:如何通过点击能获取数据并展示在页面上1.混编模式2.调用接口如果不是异步请求会导致页面刷新二.混编jsp pthon php这样前后端是不分离的三.AJAXAsynchronous JavaScript and XML异步的JavaScript和XML(1).历史1999 IE5.0 允许JS脚本向服务器单独发起HTTP请求原创 2020-11-24 10:22:42 · 139 阅读 · 0 评论 -
网络-6【http版本、关闭TCP、四次挥手、同源策略】
一.HTTP协议版本(1).HTTP/0.9仅支持GET请求方式仅能请求访问HTML格式的资源(2).HTTP/1.0增加POST和HEAD请求方式支持多种数据格式的请求与访问支持cache缓存功能新增状态码,多字符集支持,内容编码等早期HTTP/1.0不支持keep-alive长连接,只支持串行连接后期HTTP/1.0增加Connection:keep-alive字段(非标准字段),开始支持长连接(3).HTTP/1.1增加持久连接(默认开启Connecti原创 2020-11-24 10:19:22 · 173 阅读 · 0 评论 -
网络-5【缓存、长短连接、Content-Length、referrer】
一.缓存(1).缓存把已请求并返回的WEB资源(HTML页面,图片,js文件,css文件,数据等)复制成一个副本存储在浏览器的缓存中缓存的好处1.减少网络带宽的消耗2.降低服务器压力3.减少网络延迟(2).Pragma:no-cache(响应头)指示浏览器忽略资源缓存副本(该缓存还是缓存),每次访问需要到服务器获取http1.0中字段,http1.1用Cache-Control替代(http协议向下兼容,所以很多网站依旧有这个字段)(3).Cache-Contro原创 2020-11-24 10:16:30 · 336 阅读 · 0 评论 -
网络-4 【http状态码、accept、Content-Type】
一.http状态码(1).状态码1xx 信息,服务器收到请求,需要请求者继续执行操作 2xx 成功,操作被成功接收并处理 3xx 重定向,需要进一步的操作以完成请求 4xx 客户端错误,请求包含语法错误或无法完成请求 5xx 服务器错误,服务器在处理请求的过程中发生了错误(2).304重定向Etag服务端资源唯一标识符(优先级高于Last Modified)Last-modified资源在服务器最后修改的时间(精确到秒)->所以需要唯一标识符访问流程1原创 2020-11-24 10:14:05 · 693 阅读 · 0 评论 -
网络-3 【HTTP报文、请求方式、GET与POST】
一.HTTP报文(1).概念基础HTTP基于TCP/IP通信协议来传递数据 HTTP基于客户端/服务端(C/S)架构模型 通过一个可靠得连接来交换信息,是一个无状态得请求/响应协议 限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间 只要客户端和服务器知道如何处理的数据内容,任何类型的数据都可以通过HTTP发送,客户端以及服务器指定使用适合的MIME-type内容类型 Miltipurpose Internet Mail Ext原创 2020-11-24 10:10:40 · 498 阅读 · 0 评论 -
网络-2 【DNS、IP、TCP-UDP、HTTP-HTTPS、三次握手】
一.DNS(1).wwwInternet提供了很多服务,其中包括WWW(网页服务),FTP(文件传输),E- mail(电子邮件),TeInet(远程登录)等等。www是用浏览器访问网页的服务,所以网站主页的域名前需要加www。而随着网站服务类型的增加,不同的二级和三级域名对应不同的业务,而业务的处理任务会分配到多个服务器,所以不再需要www来标识主页,很多网站都还会做DNS解析www,原因是尊重用户习惯。(国外网站基本不用www标注主页)(2).DNS解析Domain Name Serve原创 2020-11-23 08:54:45 · 265 阅读 · 0 评论 -
网络-1 【网络初探、URL、客户端与服务端、域名操作】
一.网络初探(1).端简介Client客户端Server服务端(2).请求流程1.Client客户端输入uri2.DNS解析域名为IP地址3.经历TCP/IP三次握手建立TCP连接向Server端发起HTTP请求4.Client得到HTML代码开始解析5.Client请求下载HTML中的静态资源渲染页面6.四次挥手中断连接请求开始渲染(3).图示二.URL(1).URIUniform Resource Identifier即统一资源标识符,用来原创 2020-11-23 08:53:23 · 267 阅读 · 2 评论