Author: admin

Javascript Fetch API 教程

admin web前端 暂无评论 445 浏览

fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。

浏览器原生提供这个对象。本章详细介绍它的用法。

目录 [隐藏]

基本用法

fetch()…

    
Read more

WebSocket 使用教程

admin web前端 暂无评论 390 浏览

WebSocket 是一种网络通信协议，很多高级功能都需要它。

初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？

答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。HTTP 协议的这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用“轮询”：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。…

Read more

使用javascript Page Visibility API,判断用户是否关闭了浏览器窗口(html页面)

admin web前端 暂无评论 424 浏览

Page Visibility API

 

简介

有时候，开发者需要知道，用户正在离开页面。常用的方法是监听下面三个事件。

  • pagehide
  • beforeunload
  • unload

但是，这些事件在手机上可能不会触发，页面就直接关闭了。因为手机系统可以将一个进程直接转入后台，然后杀死。

  • 用户点击了一条系统通知，切换到另一个 App。
  • 用户进入任务切换窗口，切换到另一个 App。
  • 用户点击了 Home 按钮，切换回主屏幕。
  • 操作系统自动切换到另一个 App（比如，收到一个电话）。

上面这些情况，都会导致手机将浏览器进程切换到后台，然后为了节省资源，可能就会杀死浏览器进程。

以前，页面被系统切换，以及系统清除浏览器进程，是无法监听到的。开发者想要指定，任何一种页面卸载情况下都会执行的代码，也是无法做到的。为了解决这个问题，就诞生了 Page Visibility API。不管手机或桌面电脑，所有情况下，这个 API 都会监听到页面的可见性发生变化。

这个新的 API 的意义在于，通过监听网页的可见性，可以预判网页的卸载，还可以用来节省资源，减缓电能的消耗。比如，一旦用户不看网页，下面这些网页行为都是可以暂停的。

  • 对服务器的轮询
  • 网页动画
  • 正在播放的音频或视频

document.visibilityState

这个 API 主要在document对象上，新增了一个document.visibilityState属性。该属性返回一个字符串，表示页面当前的可见性状态，共有三个可能的值。

…
    
Read more

原使用PHP做 http pxory 缓存&代理, 使用redis做缓存,支持毫秒过期,拥有超高性能

admin PHP 暂无评论 350 浏览

使用PHP做 http pxory 缓存&代理, 使用 redis 做缓存,支持毫秒过期,拥有超高性能

<?php

 //PHP http pxory 缓存&代理, 使用redis做缓存,支持毫秒过期,拥有超高性能

 $url=@$_GET['url'];
if (empty($_GET['url'])) {
     echo 'url is empty ';
     exit;
}

 $path=parse_url($url, PHP_URL_PATH);
 $key=$path;

 $redis = new Redis();
 $redis->pconnect('127.0.0.1', 6379);

if ($content=$redis->get($key)) {
     echo $content;
     exit;
}
…
                        
Read more

浏览器中的preflight请求-预检请求

admin 概念 暂无评论 527 浏览

什么是preflight请求？

preflight，一个cors预检请求，属于options请求。该请求会在浏览器认为即将要执行的请求可能会对服务器造成不可预知的影响时，由浏览器自动发出。
利用预检请求，浏览器能够知道当前的服务器是否允许执行即将要进行的请求，只有获得了允许，浏览器才会真正执行接下来的请求。
所以，总结有几点：

  • 浏览器自动发出该请求，不需要用户干预
  • 该请求发生在用户发送的请求之前，只有预检请求通过，用户发送的请求才能发送到服务器，否则抛出CORS错误。

prefilght触发条件

preflight预检请求属于cors规范的一部分，是一种服务器验证机制。目前所有浏览器都实现了该规范，但是不免有些浏览器会对规范内容进行扩充。但是必须实现的规范是：只有以下条件都满足的情况下才不会发送预检请求，否则会在发送用户请求之前发送预检请求，以免在获得允许之前对服务器产生不可预知的影响。
条件有：

  1. 请求方法限制

只能使用GET、POST方法

  1. 请求头限制

只能包含九种请求头:

  • Accept
  • Accept-language
  • Content-Language
  • Content-Type
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
  1. Content-type限制

只能包含三种类型：

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded
  1. XMLHttpRequestUpload对象限制

该对象没有注册任何事件监听器

  1. ReadableStream对象限制

请求中不能使用ReadableStream对象

如果以上条件有一条不满足，浏览器则会自动发起预检请求

配置preflight请求

浏览器自动发送的预检请求，一般采用三个字段来表示：

  • Origin：表示当前请求的访问来源（域名）
  • Access-Control-Request-Headers：告知服务器实际请求所携带的自定义首部字段
…
Read more

js如何在一个日期上面加上几小时 几分钟 几秒

admin web前端 暂无评论 3,241 浏览

1. 打开任一浏览器，本文以chrome浏览器为例，打开后，按F12，进入开发者模式，点击【Console】标签

2. 在【Console】页签中，书写js代码，首先将当前日期时间赋值给一个js变量curTime，代码如下：

var curTime = new Date();

3.在当前时间curTime变量上加上1个小时，并将结果赋值给addHour变量，代码如下：

var addHour = curTime.setHours(curTime.getHours() 1);

4.从运行效果可以看到，addHour变量的值不是一个日期时间格式，需要使用new Date()，将其转换为日期时间格式，代码如下：

new Date(addHour);

5.在当前时间curTime变量上加上10分钟，再转换为日期时间格式，代码如下：

new Date(curTime.setMinutes(curTime.getMinutes() 10));

6.在当前时间curTime变量上加上10秒钟，再转换为日期时间格式，代码如下：

new Date(curTime.setSeconds(curTime.getSeconds() 10));

7.在当前时间curTime变量上加上1分40秒，其实也就相当于加100秒，代码如下：

new Date(curTime.setSeconds(curTime.getSeconds() 100));

…

Read more