zhangzhenhu
zhangzhenhu

使用 JavaScript 拦截和跟踪浏览器中的 HTTP 请求

转自：http://www.cn-java.com/www1/bbs/viewthread.php?tid=19343

作者简介



  要克俭是一位工作在 IBM CSDL 的软件工程师。目前从事网页在线翻译应用的开发，您可以通过 [email protected] 联系到他。




  金发华是一位 IBM CSDL 的软件工程师。目前从事企业电子商务应用的开发，您可以通过 [email protected] 联系到他。
转自于developerWorks 社区

使用 JavaScript 拦截和跟踪浏览器中的 HTTP 请求

HTTP 请求的拦截技术可以广泛地应用在反向代理、拦截 Ajax 通信、网页的在线翻译、网站改版重构等方面。而拦截根据位置可以为服务器端和客户端两大类，客户端拦截借助 JavaScript 脚本技术可以方便地和浏览器的解释器及用户的操作进行交互，能够实现一些服务器端拦截不容易实现的功能。本文将重点介绍通过 JavaScript 脚本在客户端对页面内容进行拦截修改的一些原理和技术。


HTTP 请求的拦截功能的应用

随着互联网应用及 B/S 架构的 软件 系统的风行，越来越多的基于浏览器的应用得以 开发 和部署。对已经上线的应用系统进行拦截和跟踪可以方便、快捷地实现很多功能。例如，
IBM 的 Tivoli Access Manager 单点登录（SSO，关于更多 TAM 的信息，请参见本文后附的资源列表）就是基于逆向代理服务器的原理实现的，逆向代理服务器的实现必须要对既有页面中的一些 URL 进行拦截和改写；
现今一些有趣的匿名代理服务器也是根据逆向代理服务器的原理实现的（如  http://www.youhide.com/ ），这类网站也有 URL 改写的需求；

另外，IBM 提供的在线翻译网页的服务中，为了能够让被翻译页面的链接所指向的页面在用户交互时继续得到翻译，我们同样需要使用 URL 的拦截和改写功能。


不仅仅是 URL 改写，通过拦截和跟踪技术可以在极小修改或者使用反向代理不修改原网页的前提下为基于 BS 的 Web 应用提供更复杂的页面改写，脚本改写等功能。

基本原理
如图 1 所示，传统的 Web 访问模型通过浏览器向 HTTP 服务器获取 Web 数据，浏览器将获取的数据进行解释渲染，得到用户的客户端界面。

图 1. 传统 Web 访问模型

而在带有服务器端和浏览器端跟踪和拦截的访问模型中，传统的访问方式发生了变化。服务器端和浏览器端的跟踪和拦截将页面中的拦截对象，在适当的拦截时机进行了拦截变化，导致用户面前的浏览器的解释渲染结果和 HTTP 服务器上的内容存在了逻辑上的差异，而这种差异恰巧是 HTTP Server 所需要的结果，而不方便将差异部署在 HTTP Server 上。 Server trace 可以作为反向代理服务器的一项逻辑功能存在，Browser trace 是通过脚本完成在客户端拦截和跟踪行为。


服务器端实现和客户端浏览器实现的比较

拦截根据位置可以分为服务器端和客户端两大类，客户端拦截借助 JavaScript 脚本技术可以方便地和浏览器的解释器和用户的操作进行交互，能够实现一些服务器端拦截不容易实现的功能。如果将服务器端和客户端拦截融合在一起，可以很好地处理拦截和跟踪问题。


表 1. 服务器端拦截和客户端拦截的功能比较

功能比较                                             服务器端拦截                                     客户端拦截  
向页面头部插入代码                         强。简洁，无需逐个加入代码            麻烦。需要逐个为页面加代码 
访问资源的权限                                强。可以访问跨域资源。                  受限。浏览器间有差异 
会话的控制和访问                             强。可以使用相应 API 。                 受限。需要使用 cookie 
页面 HTML 的拦截和跟踪                  一般。通过正则跟踪。                     强。可以使用 DOM 操作 
页面脚本的拦截和跟踪                      一般。 通过正则跟踪                        强。可以利用解释器环境 
跟踪用户的交互行为                         一般。  通过正则跟踪                        强。可以利用浏览器事件 


从表 1 可以看出服务器端拦截和客户端拦截具有很强的互补性，服务器端拦截擅长服务器 - 浏览器的通信控制、资源的访问以及批量页面的操作，浏览器端拦截可以依靠 Script 解释器的环境，擅长个体页面的逻辑拦截和跟踪。本文因篇幅限制，主要针对使用 JavaScript 的 浏览器端的拦截和跟踪进行介绍。不过在进入具体的实现之前，先介绍几个术语。

拦截对象

拦截对象指的是需要被处理的元素，可能包括 [HTML 标签 ]，[HTML 标签的属性 ]，[ 脚本变量 ]，[ 对象 ]，[ 函数 ] 等。拦截对象 和 拦截时机 就构成了一个个非常实际的功能或用途。

功能：拦截页面中的所有链接，将其 href 属性的值 xxx 改为 http://proxyhost/agent?url=xxx

拦截对象 : 标签

拦截时机：根据需要适当选择

功能：拦截页面中的 document.write 的功能，在调用此函数前修改函数参数

拦截对象 : 对象方法

拦截时机：根据需要适当选择

功能 : 拦截页面中用户自定义的函数 functionA 的调用

拦截对象： 用户自定义函数

拦截时机 : 根据需要适当选择

插入点和拦截时机

插入点: 插入点指的是拦截脚本 (JavaScript) 植入页面文件的位置。

拦截时机: 拦截时机从页面的载入过程可以分为 [ 页面加载前 ]，[ 页面加载中 ]，[ 页面加载后 ] 。

通常来说，在页面加载后进行处理代码相对简单，但是功能也相对受限。页面加载前处理代码实现相对复杂，但是功能相对丰富。用户可以根据需要混合使用。

从用户的角度出发，自然希望插入点简单，拦截时机和拦截点丰富。 因此本文的讨论的拦截和跟踪的技术的出发点也就明了了，即 : 在尽可能少的对原有系统的改变的前提下，通过 JavaScript 代码跟踪并改变系统的行为与内容。

拦截时机的实现 

拦截时机中讲到的 [ 页面加载前 ] 是指在用户的 page 内容被浏览器解释前进行拦截的时机。这种拦截可以在用户没有看到渲染结果的时候完成拦截修改，这种技术将在第五种方法中详细介绍。

[ 页面加载中 ] 拦截通常是将代码放在页面中合适的位置，实现代码简单，但是代码的插入点 ( 也就是页面的合适位置 ) 可能阻碍了这种时机的使用频度，也违背了本文的初衷。因此 [ 页面加载中 ] 的拦截时机通常使用 [ 页面加载前 ] 的拦截时机进行替代。

例如 : 某 Web 页面的第 100 行有如下内容：

 


在页面的第 200 行调用了上面定义的函数，如：

 


在 lib.js 文件中，通过改变 window.onload 的定义来构建我们的代码入口。为了保持功能，建议首先保存原来的函数的指针。典型的实现代码可以参考如下 :

var oldOnload = window.onload; 
window.onload = function() {
    //code to insert
    if(oldOnload != null) { 
        oldOnload(); 
    } 
} 


在文件末尾 前植入代码，是为了尽量防止其他加载代码的覆盖，如果不考虑加载过程中的代码覆盖的话，也可以考虑将代码放在页面的相对靠前的位置。

只要不是在加载过程中执行的代码和效果都可以考虑通过 [ 页面加载后 ] 这种拦截时机实现。这种代码的结构简单，可以很好的执行拦截和跟踪任务。特别是针对函数覆盖这种需求，通常情况下，onload 事件之前系统已经加载好所需要的 script 定义的函数和类，因此 onload 事件中的代码覆盖可以起到很好的作用。下面介绍的几种方法都可以首先考虑这种拦截时机。

常见用法 : 在代码的插入位置，可以植入一些 DOM 的操作，来实现页面的变化。

例如 : 遍历 DOM Tree, 修改特定 Node 的特定属性，或者在特定位置插入新的 Node 等等。


拦截和跟踪的主要方法及其实现
主要方法
在浏览器端的拦截和跟踪主要是利用 JavaScript 的脚本环境完成，根据笔者的经验，主要寻找并总结了如下的方法。这些方法的使用效果和支持平台可以互相弥补。


主要方法的实现
利用浏览器的 Event 
浏览器的事件也可以很好地用来拦截和跟踪页面。 鼠标和键盘的交互事件这里暂不介绍。比较常用的是 onload，onunload 事件和 Mutation Events 事件。 onload 和 onunload 事件可以作用在 window，frame，img 和 object 等对象上，利用 onload 可以在对象载入前执行一些操作 ,onunload 事件可以跟踪浏览器关闭前执行操作。
在浏览器的 Event 中，Mutation Eventsii 是更加重要的跟踪工具之一。 Mutation Events 是 DOM2.0 标准的一部分，目前 Firefox2.x 已经开始支持 Mutation Events, IE6.0 目前尚不支持。 在 IE6.0 中可以是通过使用 onpropertychange 事件及覆盖节点的方法弥补部分的不足。这里重点介绍一下 Mutation Events 。
Mutation Event 主要包括了七种事件，如下所示。

  • DOMAttrModified：跟踪 DOM 节点属性的变化;
  • DOMCharacterDataModified：DOM 节点字符数据的变化;
  • DOMNodeInserted：DOM 新节点被插入到给定的父节点;
  • DOMNodeInsertedIntoDocument：DOM 节点被直接或随着祖先节点而插入;
  • DOMNodeRemoved：DOM 节点被从父节点删除;
  • DOMNodeRemovedFromDocument：DOM 节点被直接或跟随祖先节点被删除;
  • DOMSubtreeModified：DOM 元素或文档变化。
可以说利用 Onload 事件的拦截，我们基本上解决了静态 HTML 内容的拦截，而对于脚本操作的 HTML 变化，我们就可以通过 Mutation Event 来进行解决。
下面类似的实现框架可以用来跟踪 src、action、href 等属性的变化。

document.addEventListener("DOMAttrModified", AttributeNodeModified, false); 

function AttributeNodeModified(evt)

 {    

 if(evt.attrName == "href") { }     

if(evt.attrName == "src") { }    

 if(evt.attrName == "action") { } 

 }

通过 DOMAttrModified、DOMNodeInserted 等事件可以很好地跟踪和拦截 HTML 的变化。只可惜在 IE6.0 平台上还不能支持 Mutation Event，导致在 IE6.0 上进行拦截和跟踪的效果大打折扣。针对此平台，通过覆盖 document.write/DomNode.appendChild/DomNode.insertBefore 等方法和利用 onpropertychange 事件可以有限度地支持拦截和跟踪 HTML。
通过 AOP 技术拦截  
针对对象方法调用的拦截，比较成熟的方案是使用 JavaScript 平台下的 AOP 技术。
目前，JavaScript 平台上的 AOP 方案主要有 Ajaxpectiii、jQuery AOPiv、Dojo AOPv 等。这些代码库主要功能是给指定对象的指定方法添加 Before, After,Around 等通知，从而达到拦截对象方法调用的目的 , 并且支持正则搜索方法名称。
Ajaxpect 的示例代码如下 :

var thing = {    

makeGreeting: function(text) {        

return 'Hello ' + text + '!';    

 }

}

function aopizeAdvice(args) {    

 args[0] = 'AOP ' + args[0];return args;

}

function shoutAdvice(result) {    

return result.toUpperCase();

}

 Ajaxpect.addBefore(thing, 'makeGreeting', aopizeAdvice); 

Ajaxpect.addAfter(thing, /make*/, shoutAdvice);

当然，在不方便使用上述代码库并且需求简单的时候，我们同样可以通过对象的方法覆盖的方式达到同样的效果。但是无论 AOP 还是方法覆盖， 都存在一个问题， 就是拦截代码的插入点不能做到很简捷，因为拦截代码的存在位置直接影响了代码的执行效果，因此在使用上还有一定的不方便。另外，针对 IE 平台的 ActiveX 对象，代码库不能很好的发挥功效，这是一些不足的地方。
覆盖系统类 / 方法进行拦截  
覆盖已定义的函数是一种比 AOP 更直接的拦截和跟踪脚本调用的方式。
其原理是在原函数定义后，调用前通过定义同名函数，达到拦截和跟踪的目的。其一般形式多如下面 :

 var oriFunction = someFunction; 

 someFunction = function () {

     return oriFunction(); //or  oriFunction.call(x,);

 }

第一步是（第一行代码）为了将指向原来函数的指针保存，以便后续使用。
第二步便是定义同名函数，在同名函数里面的适当位置调用原来的功能。这种方法不但可以跟踪原来函数，还可以修改和过滤函数的参数，甚至可以修改返回值。当需要操纵参数的时候，只需在新定义的函数中访问 arguments 对象即可。
例如：针对系统函数 window.open(URL,name,specs,replace) 我们可以通过下面的代码进行拦截：

var oriWindowOpen = window.open; 

window.open = function(url,names,specs,replace)  {    

url = "http://www.ibm.com"; //or arguments[0]="http://www.ibm.com";    

return oriWindowOpen(url,names,specs,replace); 

 }

上面的拦截会导致所有的 window.open 调用全部打开  http://www.ibm.com  窗口 。
函数覆盖的适用范围较广，不但可以模拟 AOP 的实现，还可以对非对象函数进行操作。函数覆盖可以根据使用的差异分成若干情况 :
  • 覆盖系统定义的函数、对象的方法：覆盖系统定义的函数或方法可以不用顾及代码插入点的问题，大可以将函数覆盖的代码放置在页面的最前边，并参照上面的形式进行操作。但是特别注意在 IE 平台下对 ActiveX 的对象的方法无效。
  • 覆盖用户自定义的函数、对象的方法：覆盖用户自定义的函数，对象的方法需要考虑代码插入点的问题。正确的代码插入点的位置应该是在原函数定义之后，调用之前。
  • 覆盖构造函数：覆盖构造函数是满足上面两种情况的一种特殊使用形式，跟踪对象创建之除，可以有效地针对对象的需要作出各种特殊的设置。 覆盖构造函数的一般形式 :
    var oriFunction = someFunction;
    someFunction = function () {   
     temp = oriFunction(); //oriFunction.call(x,);   
     return temp;}
下面结合动态代理的方法给出 IE/Firefox 平台的 Ajax 通信拦截的一种简单实现。
Ajax 通信的核心是通过 XMLHttpRequest 对象和 HTTP Server 进行通信 ( 同步 / 异步 )，Firefox 和 IE 平台对 XMLHttpRequest 对象的实现不一样，因此两种浏览器的拦截方案也大相径庭。我们通过上面的技术将对 XMLHttpRequest 对象的方法进行跟踪。
拦截方法调用，我们可以使用 AOP，当然也可以直接覆盖函数。
在 Firefox 平台，我们可以通过下面的代码实现拦截 Ajax 对象的通信：

var oriXOpen = XMLHttpRequest.prototype.open;

 XMLHttpRequest.prototype.open = function(method,url,asncFlag,user,password) {    

//code to trace or intercept   

 oriXOpen.call(this,method,url,asncFlag,user,password);

 };

但是在 IE 6.0 平台，上面的代码将不会有作用，因为在 IE 6.0 平台，Ajax 通信对象是通过 ActiveX 对象完成的，JS 中的函数覆盖不能起到作用。
通过动态代理进行拦截  
当在 IE6.0 平台遭遇 ActiveX 对象的时候，面对直接的函数覆盖不能奏效的时候，我们可以考虑通过另外一种办法，即动态代理 ActiveX 对象的方式实现拦截和跟踪。
首先我们通过覆盖构造函数的方法，将创建 XMLHttpRequest 对象的过程进行改造。

var oriActiveXObject = ActiveXObject; ActiveXObject = function(param) {   

 var obj = new oriActiveXObject(param);   

 if(param == "Microsoft.XMLHTTP" ||         param=="Msxml2.XMLHTTP" ||         param == "Msxml2.XMLHTTP.4.0") {        

         return createActiveXAgent(obj);  

   }     

return obj;

  };

我们将构造过程拦截下来后，进行自己的改造，主要操作是创建对象，对象中设置与 ActiveX 对象相同的属性和方法，并且还需要同步属性方法。

function createActiveXAgent(ao) {  

  var agent = new Object;    

agent.activeXObject = ao; //被包裹的内核，是真正的通信对象    

agent.syncAttribute = function() { //syncAttribute是用来同步属性的               

 try{            this.readyState = this.activeXObject.readystate;          

  this.responseText = this.activeXObject.responseText;            

this.responseXML = this.activeXObject.responseXML;           

 this.status = this.activeXObject.status;         

   this.statusText = this.activeXObject.statusText;     

   }catch(e) { }   

 };   

 agent.trigStateChange = function() { //模拟onreadystatechange        

agent.syncAttribute();        

if(agent.onreadystatechange != null) {            agent.onreadystatechange();        }   

 };   

 agent.activeXObject.onreadystatechange = agent.trigStateChange;    

agent.abort = function() { //模拟abort       

 this.activeXObject.abort();       

 this.syncAttribute();   

 };   

 agent.getAllResponseHeaders =function()         { //模拟内核对应的方法       

 var result = this.activeXObject.getAllResponseHeaders();        

this.syncAttribute();         

 return result;    

};   

 agent.getResponseHeader = function(headerLabel) { //模拟内核对应的方法        

var result = this.activeXObject.getResponseHeader(headerLabel);        

this.syncAttribute();         

return result;   

 };    

agent.open = function(method,url,asyncFlag,userName,password) {      //code to trace and intercept;       

 this.activeXObject.open(method,url,asyncFlag,userName,password);       

 this.syncAttribute();    

 };  

  agent.send = function(content) { //模拟内核对应的方法       

 this.activeXObject.send(content);       

 this.syncAttribute();   

  };   

 agent.setRequestHeader = function (label,value) { //模拟内核对应的方法        

this.activeXObject.setRequestHeader(label,value);       

 this.syncAttribute();    

 };   

 return agent;};

从上面的代码可以看出来，代理对象通过自身的方法模拟了原来 ActiveX 对象的方法。而更关键的属性问题，是通过在函数调用前后的属性同步函数实现的。即：在调用代理内核方法之前，将属性从代理对象同步给内核对象；在内核方法调用之后，将属性从内核对象同步给代理对象。
因为 AJAX 对象的属性几乎不被用户写入，故上面的实现只需要单向属性同步，即将内核属性同步给代理属性。对于复杂的应用，可以通过双向属性同步函数来解决属性的代理问题。
这种动态代理的方法将 ActiveX 对象像果核一样包裹起来，通过代理对象自身的同名属性和方法提供给外界进行访问，从而达到跟踪和拦截的目的。
通过自代理和 HTML 解析进行拦截  
当代码拦截点需要简单可靠的时候，上面的方法无法很好的满足需求。于是我们需要新的思路来解决代码的拦截点问题。
自代理和 HTML 解析是通过拦截原有的 HTTP 通信，通过重新通信获得内容后，在浏览器解析前通过我们自己的代码进行简单解析过滤的方式进行代码处理的方案。
首先是拦截原有的解析，重新加载新的内容：

var s = document.location.href;

var comm = new ActiveXObject("Microsoft.XMLHTTP"); 

comm.open('get',s,false); 

comm.onreadystatechange = function() {    

if(comm.readyState == 4) {        

 document.execCommand("stop");     

    var retText = removeMe(comm.responseText);     

   retText = processContent(retText);    

} 

}

 comm.send(null);

如果将上面的代码写在一个 js 文件里，然后通过

你可能感兴趣的:(Web技术,浏览器,javascript,xmlhttprequest,function,服务器,html)

  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • 高级编程--XML+socket练习题 masa010 java开发语言
    1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
  • PHP环境搭建详细教程 好看资源平台 前端php
    PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
  • 下载github patch到本地 小米人er 我的博客gitpatch
    以下是几种从GitHub上下载以.patch结尾的补丁文件的方法：通过浏览器直接下载打开包含该.patch文件的GitHub仓库。在仓库的文件列表中找到对应的.patch文件。点击该文件，浏览器会显示文件的内容，在页面的右上角通常会有一个“Raw”按钮，点击它可以获取原始文件内容。然后在浏览器中使用快捷键（如Ctrl+S或者Command+S）将原始文件保存到本地，选择保存的文件名并确保后缀为.p
  • 使用 FinalShell 进行远程连接（ssh 远程连接 Linux 服务器） 编程经验分享 开发工具服务器sshlinux
    目录前言基本使用教程新建远程连接连接主机自定义命令路由追踪前言后端开发，必然需要和服务器打交道，部署应用，排查问题，查看运行日志等等。一般服务器都是集中部署在机房中，也有一些直接是云服务器，总而言之，程序员不可能直接和服务器直接操作，一般都是通过ssh连接来登录服务器。刚接触远程连接时，使用的是XSHELL来远程连接服务器，连接上就能够操作远程服务器了，但是仅用XSHELL并没有上传下载文件的功能
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • git - Webhook让部署自动化 大猪大猪
    我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • xilinx vivado PULLMODE 设置思路 坚持每天写程序 fpga开发
    1.xilinx引脚分类XilinxIO的分类：以XC7A100TFGG484为例，其引脚分类如下：1.UserIO(用户IO)：用户使用的普通IO1.1专用(Dedicated)IO：命名为IO_LXXY_#、IO_XX_#的引脚，有固定的特定用途，多为底层特定功能的直接实现，如差分对信号、关键控制信号等，不能随意变更。1.2多功能(Multi-Function)IO：命名为IO_LXXY_ZZ
  • Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python开发语言
    一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
  • Linux查看服务器日志 TPBoreas 运维linux运维
    一、tail这个是我最常用的一种查看方式用法如下：tail-n10test.log查询日志尾部最后10行的日志;tail-n+10test.log查询10行之后的所有日志;tail-fn10test.log循环实时查看最后1000行记录(最常用的)一般还会配合着grep用，(实时抓包)例如:tail-fn1000test.log|grep'关键字'（动态抓包）tail-fn1000test.log
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net 佛一脚 errorreactmongodb数据库
    背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不
  • Python多线程实现大规模数据集高效转移 sand&wich 网络python服务器
    背景在处理大规模数据集时，通常需要在不同存储设备、不同服务器或文件夹之间高效地传输数据。如果采用单线程传输方式，当数据量非常大时，整个过程会非常耗时。因此，通过多线程并行处理可以大幅提升数据传输效率。本文将分享一个基于Python多线程实现的高效数据传输工具，通过遍历源文件夹中的所有文件，将它们移动到目标文件夹。工具和库这个数据集转移工具主要依赖于以下Python标准库：os：用于文件系统操作，如
  • 笋丁网页自动回复机器人V3.0.0免授权版源码 希希分享 软希网58soho_cn源码资源笋丁网页自动回复机器人
    笋丁网页机器人一款可设置自动回复，默认消息，调用自定义api接口的网页机器人。此程序后端语言使用Golang，内存占用最高不超过30MB，1H1G服务器流畅运行。仅支持Linux服务器部署，不支持虚拟主机，请悉知！使用自定义api功能需要有一定的建站基础。源码下载：https://download.csdn.net/download/m0_66047725/89754250更多资源下载：关注我。安
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
  • ubuntu安装wordpress lissettecarlr
    1安装nginx网上安装方式很多，这就就直接用apt-get了apt-getinstallnginx不用启动啥，然后直接在浏览器里面输入IP:80就能看到nginx的主页了。如果修改了一些配置可以使用下列命令重启一下systemctlrestartnginx.service2安装mysql输入安装前也可以更新一下软件源，在安装过程中将会让你输入数据库的密码。sudoapt-getinstallmy
  • 深入浅出 -- 系统架构之负载均衡Nginx的性能优化 xiaoli8748_软件开发 系统架构系统架构负载均衡nginx
    一、Nginx性能优化到这里文章的篇幅较长了，最后再来聊一下关于Nginx的性能优化，主要就简单说说收益最高的几个优化项，在这块就不再展开叙述了，毕竟影响性能都有多方面原因导致的，比如网络、服务器硬件、操作系统、后端服务、程序自身、数据库服务等，对于性能调优比较感兴趣的可以参考之前《JVM性能调优》中的调优思想。优化一：打开长连接配置通常Nginx作为代理服务，负责分发客户端的请求，那么建议开启H
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 阿里云服务器4核8G配置购买及价格类文章汇总（10篇） 阿里云最新优惠和活动汇总
    阿里云服务器4核8G配置如何购买？价格是多少？4核8G配置的阿里云服务器可以通过云服务器产品页购买也可以通过阿里云活动去下单购买，一般通过活动购买的用户比较多，但是不同实例规格的阿里云服务器价格不一样，带宽不同价格也不一样，本文为大家汇总了10篇关于阿里云服务器4核8G配置购买教程文章和价格类文章，分为购买类文章和价格类文章，以供大家参考如何购买阿里云服务器4核8G配置和最新优惠价格是多少。阿里云
  • windows下python opencv ffmpeg读取摄像头实现rtsp推流 拉流 图像处理大大大大大牛啊 opencv实战代码讲解视觉图像项目windowspythonopencv
    windows下pythonopencvffmpeg读取摄像头实现rtsp推流拉流整体流程1.下载所需文件1.1下载rtsp推流服务器1.2下载ffmpeg2.开启RTSP服务器3.opencv读取摄像头并调用ffmpeg进行推流4.opencv进行拉流5.opencv异步拉流整体流程1.下载所需文件1.1下载rtsp推流服务器下载RTSP服务器下载页面https://github.com/blu
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • PHP，安卓，UI，java，linux视频教程合集 cocos2d-x小菜 javaUIPHPandroidlinux
    ╔-----------------------------------╗┆                           
  • 各表中的列名必须唯一。在表 'dbo.XXX' 中多次指定了列名 'XXX'。 bozch .net.net mvc
    在.net mvc5中，在执行某一操作的时候，出现了如下错误：       各表中的列名必须唯一。在表 'dbo.XXX' 中多次指定了列名 'XXX'。 经查询当前的操作与错误内容无关，经过对错误信息的排查发现，事故出现在数据库迁移上。 回想过去： 在迁移之前已经对数据库进行了添加字段操作，再次进行迁移插入XXX字段的时候，就会提示如上错误。  &
  • Java 对象大小的计算 e200702084 java
                              Java对象的大小 如何计算一个对象的大小呢？    
  • Mybatis Spring 171815164 mybatis
    ApplicationContext ac = new ClassPathXmlApplicationContext("applicationContext.xml"); CustomerService userService = (CustomerService) ac.getBean("customerService"); Customer cust
  • JVM 不稳定参数 g21121 jvm
            -XX 参数被称为不稳定参数，之所以这么叫是因为此类参数的设置很容易引起JVM 性能上的差异，使JVM 存在极大的不稳定性。当然这是在非合理设置的前提下，如果此类参数设置合理讲大大提高JVM 的性能及稳定性。        可以说“不稳定参数”
  • 用户自动登录网站 永夜-极光 用户
    1.目标:实现用户登录后,再次登录就自动登录,无需用户名和密码 2.思路:将用户的信息保存为cookie            每次用户访问网站,通过filter拦截所有请求,在filter中读取所有的cookie,如果找到了保存登录信息的cookie,那么在cookie中读取登录信息,然后直接
  • centos7 安装后失去win7的引导记录 程序员是怎么炼成的 操作系统
    1.使用root身份(必须)打开 /boot/grub2/grub.cfg 2.找到 ### BEGIN /etc/grub.d/30_os-prober ###   在后面添加    menuentry "Windows 7 (loader) (on /dev/sda1)" { 
  • Oracle 10g 官方中文安装帮助文档以及Oracle官方中文教程文档下载 aijuans oracle
    Oracle 10g 官方中文安装帮助文档下载：http://download.csdn.net/tag/Oracle%E4%B8%AD%E6%96%87API%EF%BC%8COracle%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3%EF%BC%8Coracle%E5%AD%A6%E4%B9%A0%E6%96%87%E6%A1%A3 Oracle 10g 官方中文教程
  • JavaEE开源快速开发平台G4Studio_V3.2发布了 無為子 AOPoraclemysqljavaeeG4Studio
      我非常高兴地宣布,今天我们最新的JavaEE开源快速开发平台G4Studio_V3.2版本已经正式发布。大家可以通过如下地址下载。   访问G4Studio网站 http://www.g4it.org   G4Studio_V3.2版本变更日志 功能新增 (1).新增了系统右下角滑出提示窗口功能。 (2).新增了文件资源的Zip压缩和解压缩
  • Oracle常用的单行函数应用技巧总结 百合不是茶 日期函数转换函数(核心)数字函数通用函数(核心)字符函数
    单行函数;   字符函数,数字函数,日期函数,转换函数(核心),通用函数(核心) 一:字符函数: .UPPER(字符串) 将字符串转为大写 .LOWER (字符串) 将字符串转为小写 .INITCAP(字符串) 将首字母大写 .LENGTH (字符串) 字符串的长度 .REPLACE(字符串,'A','_') 将字符串字符A转换成_
  • Mockito异常测试实例 bijian1013 java单元测试mockito
    Mockito异常测试实例： package com.bijian.study; import static org.mockito.Mockito.mock; import static org.mockito.Mockito.when; import org.junit.Assert; import org.junit.Test; import org.mockito.
  • GA与量子恒道统计 Bill_chen JavaScript浏览器百度Google防火墙
    前一阵子，统计**网址时，Google Analytics（GA） 和量子恒道统计（也称量子统计），数据有较大的偏差，仔细找相关资料研究了下，总结如下：   为何GA和量子网站统计（量子统计前身为雅虎统计）结果不同？ 首先：没有一种网站统计工具能保证百分之百的准确出现该问题可能有以下几个原因：（1）不同的统计分析系统的算法机制不同；（2）统计代码放置的位置和前后
  • 【Linux命令三】Top命令 bit1129 linux命令
    Linux的Top命令类似于Windows的任务管理器，可以查看当前系统的运行情况，包括CPU、内存的使用情况等。如下是一个Top命令的执行结果：     top - 21:22:04 up 1 day, 23:49, 1 user, load average: 1.10, 1.66, 1.99 Tasks: 202 total, 4 running, 198 sl
  • spring四种依赖注入方式 白糖_ spring
      平常的java开发中，程序员在某个类中需要依赖其它类的方法，则通常是new一个依赖类再调用类实例的方法，这种开发存在的问题是new的类实例不好统一管理，spring提出了依赖注入的思想，即依赖类不由程序员实例化，而是通过spring容器帮我们new指定实例并且将实例注入到需要该对象的类中。依赖注入的另一种说法是“控制反转”，通俗的理解是：平常我们new一个实例，这个实例的控制权是我
  • angular.injector boyitech AngularJSAngularJS API
    angular.injector   描述: 创建一个injector对象, 调用injector对象的方法可以获得angular的service, 或者用来做依赖注入.   使用方法: angular.injector(modules, [strictDi])   参数详解: Param Type Details mod
  • java-同步访问一个数组Integer[10]，生产者不断地往数组放入整数1000，数组满时等待；消费者不断地将数组里面的数置零，数组空时等待 bylijinnan Integer
    public class PC { /** * 题目：生产者-消费者。 * 同步访问一个数组Integer[10]，生产者不断地往数组放入整数1000，数组满时等待；消费者不断地将数组里面的数置零，数组空时等待。 */ private static final Integer[] val=new Integer[10]; private static
  • 使用Struts2.2.1配置 Chen.H apachespringWebxmlstruts
    Struts2.2.1 需要如下 jar包: commons-fileupload-1.2.1.jar commons-io-1.3.2.jar commons-logging-1.0.4.jar freemarker-2.3.16.jar javassist-3.7.ga.jar ognl-3.0.jar spring.jar struts2-core-2.2.1.jar struts2-sp
  • [职业与教育]青春之歌 comsci 教育
           每个人都有自己的青春之歌............但是我要说的却不是青春...        大家如果在自己的职业生涯没有给自己以后创业留一点点机会,仅仅凭学历和人脉关系,是难以在竞争激烈的市场中生存下去的....   &nbs
  • oracle连接(join)中使用using关键字 daizj JOINoraclesqlusing
    在oracle连接(join)中使用using关键字 34. View the Exhibit and examine the structure of the ORDERS and ORDER_ITEMS tables. Evaluate the following SQL statement: SELECT oi.order_id, product_id, order_date FRO
  • NIO示例 daysinsun nio
    NIO服务端代码： public class NIOServer { private Selector selector; public void startServer(int port) throws IOException { ServerSocketChannel serverChannel = ServerSocketChannel.open(
  • C语言学习homework1 dcj3sjt126com chomework
    0、 课堂练习做完 1、使用sizeof计算出你所知道的所有的类型占用的空间。 int x; sizeof(x);   sizeof(int);   # include <stdio.h> int main(void) { int x1; char x2; double x3; float x4; printf(&quo
  • select in order by , mysql排序 dcj3sjt126com mysql
    If i select like this: SELECT id FROM users WHERE id IN(3,4,8,1); This by default will select users in this order 1,3,4,8, I would like to select them in the same order that i put IN() values so:
  • 页面校验-新建项目 fanxiaolong 页面校验
    $(document).ready( function() { var flag = true; $('#changeform').submit(function() { var projectScValNull = true; var s =""; var parent_id = $("#parent_id").v
  • Ehcache（02）——ehcache.xml简介 234390216 ehcacheehcache.xml简介
    ehcache.xml简介          ehcache.xml文件是用来定义Ehcache的配置信息的，更准确的来说它是定义CacheManager的配置信息的。根据之前我们在《Ehcache简介》一文中对CacheManager的介绍我们知道一切Ehcache的应用都是从CacheManager开始的。在不指定配置信
  • junit 4.11中三个新功能 jackyrong java
    junit 4.11中两个新增的功能，首先是注解中可以参数化，比如 import static org.junit.Assert.assertEquals; import java.util.Arrays; import org.junit.Test; import org.junit.runner.RunWith; import org.junit.runn
  • 国外程序员爱用苹果Mac电脑的10大理由 php教程分享 windowsPHPunixMicrosoftperl
    Mac 在国外很受欢迎，尤其是在 设计/web开发/IT 人员圈子里。普通用户喜欢 Mac 可以理解，毕竟 Mac 设计美观，简单好用，没有病毒。那么为什么专业人士也对 Mac 情有独钟呢？从个人使用经验来看我想有下面几个原因： 1、Mac OS X 是基于 Unix 的 这一点太重要了，尤其是对开发人员，至少对于我来说很重要，这意味着Unix 下一堆好用的工具都可以随手捡到。如果你是个 wi
  • 位运算、异或的实际应用 wenjinglian 位运算
    一． 位操作基础，用一张表描述位操作符的应用规则并详细解释。       二． 常用位操作小技巧，有判断奇偶、交换两数、变换符号、求绝对值。       三． 位操作与空间压缩，针对筛素数进行空间压缩。    &n
  • weblogic部署项目出现的一些问题（持续补充中……） Everyday都不同 weblogic部署失败
    好吧，weblogic的问题确实……   问题一： org.springframework.beans.factory.BeanDefinitionStoreException: Failed to read candidate component class: URL [zip:E:/weblogic/user_projects/domains/base_domain/serve
  • tomcat7性能调优（01） toknowme tomcat7
        Tomcat优化： 1、最大连接数最大线程等设置 <Connector port="8082" protocol="HTTP/1.1"                useBodyEncodingForURI="t
  • PO VO DAO DTO BO TO概念与区别 xp9802 javaDAO设计模式bean领域模型
    O/R Mapping 是 Object Relational Mapping（对象关系映射）的缩写。通俗点讲，就是将对象与关系数据库绑定，用对象来表示关系数据。在O/R Mapping的世界里，有两个基本的也是重要的东东需要了解，即VO，PO。 它们的关系应该是相互独立的，一个VO可以只是PO的部分，也可以是多个PO构成，同样也可以等同于一个PO（指的是他们的属性）。这样，PO独立出来，数据持