摘要：
就像画画一样, 首先得有一支笔, 这支笔有粗细, 有颜色, 可以画直线, 也可以画曲线, 然后我们会从某个位置点开始起笔, 然后在另一个位置点结束. 这样就可以画一条线啦~. 具体步骤如下: 1. 创建一条路径: ctx.beginPath(), 表示拿起画笔准备开画. 2. 将笔移到准备绘制的第一 阅读全文
2019年9月23日
2019年9月22日
摘要：
有三种方法: 1. ctx.fillRect(x, y, width, height); 2. ctx.strokeRect(x, y, width, height); 3. ctx.clearRect(x, y width, height); 方法1. ctx可以认为是一支画笔, 所有的和绘图有关 阅读全文
摘要：
1. 如果网页必须使用canvas, 则需要告知用户更换或更新浏览器. 这时可以通过在<canvas>标签之间添加替代元素进行 2. 如果对不支持canvas的浏览器提供第二套方案, 或者行为逻辑, 则需要在js脚本中判断浏览器是否支持canvas. 阅读全文
摘要：
1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签: 2. 我们需要控制这个画布, 在画布里面绘制图形, 这时就需要通过js控制: 完成了上面两步以后就可以认为是初始化了一个画布(canvas)环境. 阅读全文
摘要：
Canvas 是一种在网页中的画布, 是一个HTML5新增的标签, 是一种高效的绘制图形的技术, 在JavaScript中有一个专门的API用于给他赋能( CanvasRenderingContext2D ) 注意: 1. canvas可以做动画 / 游戏 / 各种图表 / 数据可视化等, 功能强大 阅读全文
摘要：
删除Cookie的唯一方法是: 将Expires设置为一个过去值, 一般会设置为 Thu, 01-Jan-1970 00:00:01 GMT 因为这是时间零点, 设这个总不会错. 阅读全文
摘要：
可以使用 document.cookie, 这个属性可读可写, 读时是读取所有没有设置HttpOnly的cookie作为一个字符串返回, 写时是将一个cookie写入到document.cookie中, 注意, 这个写时追加而非覆盖, 而且每次只能写入一个cookie. 具体示例如下: 注意: 1. 阅读全文
摘要：
使用Cookie的 SameSite 属性. 1. SameSite=Strict; 这个模式下, 服务器将会完全禁止第三方Cookie, 在跨站点时, 任何情况下都不会发送Cookie, 也就是说, 只有当前页面URL 符合Cookie设置的Domain和Path要求时才会被带上. 2. Same 阅读全文
摘要：
1. Cookie往往是用来存储用户信息的, 但有些恶意站点设法伪造了带有正确Cookie的HTTP请求, 这时就会产生安全问题( CSRF 攻击 ). 这里恶意网站获取cookie的行为就是第三方cookie. 2. 我们是用Google / Baidu / Facebook 搜索的网站, 都可以 阅读全文
摘要：
所谓" 不能通过js脚本获取 " 主要指的是: 使用document.cookie / XMLHttpRequest对象 / Request API 等无法获取到当前cookie. 设置方法为: HttpOnly. 没错, 这是一个没有值的属性, 只要在 Set-Cookie里面附带了这个属性, 那 阅读全文
摘要：
使用 Secure 属性. 注意, 这个属性基本是"自动"的, 也就是说, 如果当前网页是https请求的, 那里面的各种HTTP请求的cookie都会自定加上这个属性, 如果当前请求时http, 那不管cookie是否设置了这个属性, 那都会被浏览器自定忽略. 阅读全文
摘要：
Domain 属性指定浏览器发出HTTP请求时, 哪些域名需要附带这个Cookie. 比如 Domain 设置为 example.com, 那 abc.example.com 也会在发起请求时附带这个cookie. Path 属性指定浏览器发出HTTP请求时, 设置的域名下的哪些路径可以附带这个Co 阅读全文
摘要：
1. 使用Cookie的: Expires 属性. 它可以设置cookie的过期时间. 下面的代码表示id这条cookie的过期时间是2015年10月21日早上7点28分; 2. 使用Cookie的: Max-Age 属性. 它可以指定从现在开始Cookie存在的秒数. 秒数过完则cookie过期. 阅读全文
摘要：
Cookie的修改也需要借助 Response-Header 的 Set-Cookie 字段, 不过需要注意的是: 待修改cookie的 key / domain / path / secure 必须要完全一致, 否则就会生成两个名字相同但属性不同的cookie, 如下所示: 1. 正常修改cook 阅读全文
摘要：
因为 Cookie 是服务器保存在浏览器中的一小段信息, 因此这个设置应当是服务器发起的, 设置方法是在Response Header中添加: Set-Cookie字段, 值是多个键值对. 如下: 注意: 1. Response Header 中可以添加多个Set-Cookie字段; 2. 一个Se 阅读全文
2019年9月21日
摘要：
使用: window.navigator.cookieEnabled; 这样设置以后, 浏览器就不会接受和保存服务器传过来的cookie, 也就不会在发起HTTP请求时向服务器发送cookie. 阅读全文
摘要：
一. 什么是Cookie Cookie是服务器保存在浏览器里的一小段文本信息, 大小一般不超过4KB, 浏览器每次向服务器发起HTTP请求时就会自动附带上这段信息. 二. Cookie 的主要作用 1. 保存登录 / 购物车等需要记录的信息 2. 保存用户偏好, 如字体大小 / 背景颜色等 3. 追 阅读全文
2019年9月20日
摘要：
通过监听 window.onload 和 window.onunload事件, 使用 Navigator.sendBeacon() 进行HTTP请求: 阅读全文
摘要：
比如有需求是要让页面关闭时, 在数据库中记录用户的一些数据或log日志. 这时就需要在用户关闭页面时发起HTTP请求. 做法是对window.onunload设置事件监听函数, 在函数内发起AJAX请求. 不过有时候页面已经卸载了, 但请求还没有发出, 这时就失败了, 解决这一问题的思路有两种: 1 阅读全文
摘要：
使用 xhr.abort() 注意: xhr.abort() 会直接终止请求, xhr.readyState值变为4, xhr.onreadystatechange事件触发. 阅读全文
摘要：
1. 使用 xhr.getResponseHeader()可以获取指定响应头字段值. 2. 使用 xhr.getAllResponseHeader() 可以获取所有响应字段值 注意: 1. 如果没有接收到服务器返回的头信息, 则两个方法都返回null; 2. xhr.getResponseHeade 阅读全文
摘要：
一般情况下, 我们会通过 xhr.responseType 告诉服务器我们想要什么类型的返回数据. 然后xhr.response 会根据xhr.responseType属性值来自动解析返回值. 但有时候服务器无法返回我们需要的数据类型, 但客户端不知道服务器无法返回, 所以就算xhr.respons 阅读全文
摘要：
使用: xhr.setRequestHeader(); 注意: xhr.setRequestHeader() 必须在xhr.open()之后, xhr.send()之前调用; 阅读全文
摘要：
1. 获取表单(form)节点 2. 对FormData实例做相关操作 3. 发起HTTP请求 阅读全文
摘要：
需要使用 xhr.send(); 参数为请求数据体, 如果没有就传入null, 一般来说, GET请求是不用传参的, POST就视情况而定, 理论上所有GET请求都可以改为POST, 反之则不行. 下面是POST请求的示例: 注意: 1. 所有xhr的监听事件都必须在xhr.send()方法调用之前 阅读全文
摘要：
xhr.open() 接收5个参数, 用于初始化一个http请求, 它接收5个参数: 1. method: 请求类型; 2. url: 请求的url; 3. async: 是否为异步, 默认为true; 默认为true 4. user: 认证用户名; 可选 5. password: 认证密码; 可选 阅读全文
摘要：
使用: xhr.upload.onprogress事件监听属性. 注意: 除了可以监听上传进度之外, 还可以监听: loadstart、loadend、load、abort、error、timeout. 阅读全文
摘要：
第一步: 服务器必须在Response Header中设置: Access-Control-Allow-Credentials: true 第二步: 客户端发起请求时需要将 xhr.withCredentials设为: true; 注意: 1. 按照上面设置后, 不仅Cookie会被附带上, 认证的 阅读全文
摘要：
1. 监听请求成功: xhr.onload 2. 监听请求失败: xhr.onerror 3. 监听请求数据下载中: xhr.onprogress 注意: xhr.onprogress是其中仅有的一个具有事件参数的事件监听属性, e.loaded表示下载了多少数据, e.total表示数据总量, e 阅读全文
摘要：
1. 监听HTTP请求发出的事件是: xhr.onloadstart 2. 监听HTTP请求结束的事件是: xhr.onloadend 注意: onloadend 事件不管请求失败或成功, 只要xhr.readyState等于4时就会触发. 阅读全文
摘要：
1. 设置请求超时时间: xhr.timeout, 如果超时, 请求会自动终止; 参数是毫秒; 2. 设置请求超时监听函数: xhr.ontimeout, 如果请求超时, 则会触发ontimeout事件的监听函数; 阅读全文
摘要：
1. 获取HTTP状态码: xhr.status; 2. 获取HTTP状态提示文本: xhr.statueText; 以下是以下常见的HTTP状态码: 200, OK, 访问正常; 301, Moved Permanently, 永久移动; 302, Moved temporarily, 暂时移动; 阅读全文
摘要：
使用: xhr.responseURL; 注意: 1. xhr.responseURL和xhr.open()中的URL可能是不一样的, 因为服务器也可能发生跳转, 前者返回的是最后实际返回数据的URL; 2. 如果原始请求URL包含锚点(#), 则该属性会将锚点抽离; 阅读全文
摘要：
使用 xhr.responseXML; 通过这个属性正常获取XML或HTML文档对象有两个前置条件: 1. Content-Type头信息的值等于: text/xml 或 application/xml 2. xhr.responseType 需要赋值为: "document" 注意: 如果Cont 阅读全文
摘要：
使用: xhr.responseText; 注意: xhr.responseType等于空字符或"text"时, 可以使用xhr.responseText获取 阅读全文
摘要：
使用: xhr.responseType; 这个属性可读写, 也就是说, 我们可以在xhr.open()之后, 在xhr.send()之前, 设置 xhr.responseType属性, 使其告诉服务器客户端需要什么类型的数据; xhr.responseType 的属性值可以是: 1. 空字符串: 阅读全文
摘要：
使用: xhr.response 属性, 可获得response body 内的数据, 注意, 这些数据类型不一样, 比如字符串 / 对象 / 二进制文件 等. 注意: 1. 如果返回的是xml或html, xhr.response会自动解析成网页文档, 而xhr.responseText 不会; 阅读全文
摘要：
可以使用 xhr.onreadystatechange 属性指向的函数去监听 xhr.readyState 值的变化. 示例如下: 注意: 除了xhr的正常请求过程会改变 xhr.readyState 值以外, 类似xhr.abort()这种会终止请求的方法也会改变xhr.readyState的值. 阅读全文
摘要：
一个XMLHttpRequets实例从创建到发起请求再到获取数据, 期间会有一些中间状态, 这些状态是必要的, 我们可以通过判断这些状态值来进行不同的动作. xhr中获取请求状态的属性是: xhr.readyState 它有五种状态可供返回: 0: xhr实例已经创建, 但xhr.open()方法尚 阅读全文
