Ajax保留浏览器历史的两种解决方案（Hash&Pjax）

原文地址：http://leyteris.iteye.com/blog/1107597

想复制代码练习请点击原文。


总是在github down点东西，github整个界面做的不错，体验也很好~对于其中的源代码滑动的特效最为喜欢了~刚开始以为这个只是普通的ajax请求效果，但是发现这个特效能够导致浏览器地址栏跟随变化，并且再点击前进后退按钮后又可以将代码滑回滑出~~于是乎就来研究下吧~

一、通过锚点Hash实现：

在这方面其实国内很早就有做了，比如淘宝画报，通过的是在地址栏后面加#锚点实现的，浏览器是可以识别锚点为单位的历史记录的。但不是说页面本身有这个锚点，锚点的Hash只是起到一个引导浏览器将这次的记录推入历史记录栈顶的作用。

来做一个小小的demo：

Html代码  收藏代码
  1. <style type="text/css">  
  2.     #tab1_header,#tab2_header{  
  3.         cursor:pointer;  
  4.         border:1px solid;  
  5.         width:50px;  
  6.     }  
  7.     #tab1,#tab2{  
  8.         width:90%;  
  9.         height:200px;  
  10.         border:1px solid;  
  11.     }  
  12. </style>  
  13. <div id="tab_header">  
  14.     <span id="tab1_header">Tab1</span>  
  15.     <span id="tab2_header">Tab2</span>  
  16. </div>  
  17. <div id="tab1">1</div>  
  18. <div id="tab2">2</div>  

 一个很简单的Tab切换如果一般情况下就直接：

 

Js代码  收藏代码
  1. $("#tab1_header").click(function() {  
  2.             $("#tab2").hide();  
  3.             $("#tab1").show();  
  4. });  
  5. $("#tab2_header").click(function() {  
  6.             $("#tab1").hide();  
  7.             $("#tab2").show();  
  8. });  

但假如点击到tab2时想通过后退按钮退到tab1时就不行了，假如刷新的话浏览器的行为完全不是出于用户的想法，这样的话，我们可以加入#锚点来模拟新页面，为什么要说模拟呢，假如直接通过js改变window.location浏览器会重新加载页面，但加#就不会重新加载并且能保存在历史中。JS通过window.location.hash来控制URL后面的锚点#。

我们把代码改为这样：

Js代码  收藏代码
  1. $(function(){  
  2.             showTab();  
  3.             $(window).bind('hashchange', function(e){  
  4.                 showTab();  
  5.             });  
  6.             $("#tab1_header").click(showTab1);  
  7.             $("#tab2_header").click(showTab2);  
  8.         });  
  9.   
  10.         function showTab() {  
  11.             if (window.location.hash == "#tab2"){  
  12.                 showTab2();  
  13.             } else {  
  14.                 showTab1();  
  15.             }  
  16.         }  
  17.         function showTab1() {  
  18.             $("#tab2").hide();  
  19.             $("#tab1").show();  
  20.             window.location.hash = "#tab1";  
  21.         };  
  22.         function showTab2() {  
  23.             $("#tab1").hide();  
  24.             $("#tab2").show();  
  25.             window.location.hash = "#tab2";  
  26.         };  

  加上window.location.hash = "#tab1"这一段代码就行了，在点击tab后，地址栏后面就会加上#tab1，点击tab2后就会改成#tab2，当浏览器检测到url变化时就会触发hashchange这一事件，就是用户在点击后退时能够得到的事件就能够通过window.location.hash进行判断并进行ajax操作了，但是haschange这个事件并不是每个浏览器都有的，只有现代高级浏

览器才有，所以在低级的浏览器中需要用轮询来检测URL是否在变化，这个这里就不具体说了。


二、通过HTML5加强型的History对象实现(类Pjax)

可以通过window.history.pushState这个方法无刷新的更新浏览器地址栏，这个方法在更新地址栏的同时将地址压入历史记录堆栈里，而要取出这个栈顶页面则可以用popstate这个事件来捕获~

来模拟一下github的环境，github中每个url是对应一个完整的实际页面的，所以在ajax请求页面时需要异步获取target页面中指定id容器中的内容：

比如有这样两个页面：

index.html

Html代码  收藏代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=gbk">  
  5.         <title>index</title>  
  6.     </head>  
  7.     <body>  
  8.         <script>document.write(new Date());</script>  
  9.         <div id="cn">  
  10.             <a href="second.html">加载前</a>  
  11.         </div>  
  12.     </body>  
  13. </html>  


second.html


Html代码  收藏代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=gbk">  
  5.         <title>second</title>  
  6.     </head>  
  7.     <body>  
  8.         <script>document.write(new Date());</script>  
  9.         <div id="cn">  
  10.             <a href="index.html">加载后</a>  
  11.         </div>  
  12.     </body>  
  13. </html>  

假如用同步的http请求打开的话完全是两个页面，两个页面加入很多地方一样的话我们完全可以用这种方法来实现ajax请求变更DOM，我在这里加了<script>document.write(new Date());</script>语句通过它的变化能得知是否取自两个http请求，局

部的ajax请求是不会改变这个时间显示的。

Js代码  收藏代码
  1. $(function(){  
  2.         var state = {  
  3.                     title: "index",  
  4.                     url: "index.html"  
  5.                 };  
  6.                 $("#cn").click(function(){  
  7.                     window.history.pushState(state, "index", "second.html");  
  8.                     var $self = $(this);  
  9.                     $.ajax({  
  10.                         url:"second.html",  
  11.                         dataType: "html",  
  12.                         complete: function(jqXHR, status, responseText){  
  13.                             responseText = jqXHR.responseText;  
  14.                             if (jqXHR.isResolved()) {  
  15.                                 jqXHR.done(function(r){  
  16.                                     responseText = r;  
  17.                                 });  
  18.                                 $self.html($("<div>").append(responseText.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")).find("#cn"));  
  19.                             }  
  20.                         }  
  21.                     });  
  22.                     document.title = "second";  
  23.                     return false;  
  24.                 });  
  25.                 $(window).bind('popstate', function(e){  
  26.                     var st = e.state;  
  27.                     //$("#cn").load(st.url + " #cn");  
  28.                     $.ajax({  
  29.                         url:"index.html",  
  30.                         dataType: "html",  
  31.                         complete: function(jqXHR, status, responseText){  
  32.                             responseText = jqXHR.responseText;  
  33.                             if (jqXHR.isResolved()) {  
  34.                                 jqXHR.done(function(r){  
  35.                                     responseText = r;  
  36.                                 });  
  37.                                 $("#cn").html($("<div>").append(responseText.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")).find("#cn"));  
  38.                             }  
  39.                         }  
  40.                     });  
  41.                     document.title = e.state.title;  
  42.                 });  
  43. });  

 

上面语句中当#cn元素被点击时将state通过pushState方法压入历史记录栈，并在第三个参数中将浏览器URL框中指向second页面，并通过ajax将second页面异步载入，将相应的部分加入容器中，这样就实现了异步加载并改变地址栏url了，同样用户点击后退时，触发popstate，刚才pushState方法中的第一个参数state便是这里传入的形参e中的state属性，通过var st = e.state取出供开发使用。同时载入index页面中对应内容。时间有限这个js没有进行重构，直接写$.ajax了，其实假如不需要任何特效单纯的异步载入在jQ中可以直接用$("#cn").load(st.url + " #cn");将请求的html对应的#cn放到本页面的#cn容器中，但加入要更加炫的特效的话就要直接操作ajax传回的数据了。

 

Js代码  收藏代码
  1. $("#cn").html($("<div>").append(responseText.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")).find("#cn"));  

 

先创建一个div容器在将经过script过滤过的代码装入这个容器在通过find方法找到里面对应的选择器容器插入本身的页面中，这里可以不用html来填充，可以根据自己的项目需要用slideUp，show什么的特效进行内容显示~~


另外这里要推荐一个jQuery组件叫pjax（https://github.com/defunkt/jquery-pjax），比较牛叉的一个组件，异步的部分load进来另外一个页面对应容器中的内容，实现的机理和我上面的第二种方案一致。pushState + ajax = pjax 感觉这个应用会热起来的。


稍微总结下，两种方案其实对于想IE6或者FF3.6等比较低级的浏览器支持不是很好，前者若要兼容低端浏览器要用轮询来监听浏览器地址栏行为，而后者的话是完全的HTML5应用，对于非HTML5浏览器只能做判断跳转了。

如pjax最后的一段无奈的兼容处理：

 

Js代码  收藏代码
  1. $.support.pjax = window.history && window.history.pushState  
  2.   
  3.   
  4. // Fall back to normalcy for older browsers.  
  5. if ( !$.support.pjax ) {  
  6.   $.pjax = function( options ) {  
  7.     window.location = $.isFunction(options.url) ? options.url() : options.url  
  8.   }  
  9.   $.fn.pjax = function() { return this }  
  10. }  

你可能感兴趣的:(Ajax)

  • 使用 AJAX 前后端传递数据 学c真好玩 ajaxspring
    使用异步操作(ajax)前后端传递数据1、传递对象1.1、jsp文件--%>//创建userinfo对象，具备两个属性username,passwordfunctionuserinfo(username,password){this.username=username;this.password=password;}functionsendAjax1(){//创建对象实例，初始化数据varuser
  • 封装AJAX(带详细注释) Rverdoser okhttp
    封装AJAX请求是前端开发中常见的需求，可以帮助我们简化代码，提高可重用性。下面我将通过JavaScript（使用XMLHttpRequest对象）和现代JavaScript（使用FetchAPI）两种方式来展示如何封装AJAX请求。1.使用XMLHttpRequest封装AJAXfunctionajax(method,url,data,callback){//创建XMLHttpRequest对象
  • 基于springboot的旅游出行指南 超级无敌暴龙战士塔塔开 Java课设与毕设资源springboot旅游后端
    文章目录项目介绍主要功能截图：部分代码展示设计总结项目获取方式作者主页：超级无敌暴龙战士塔塔开简介：Java领域优质创作者、简历模板、学习资料、面试题库【关注我，都给你】文末获取源码联系项目介绍基于springboot的旅游出行指南,java项目。eclipse和idea都能打开运行。推荐环境配置：eclipse/ideajdk1.8mavenmysql前端技术：vue，Ajax，Json后端技术
  • Struts 2.0核心架构详解与实战应用 赵阿萌
    本文还有配套的精品资源，点击获取简介：Struts2.0是一个广泛使用的JavaWeb框架，基于MVC设计模式，简化了Web应用开发流程。它包含多个关键组件，如Action类、配置文件、拦截器、OGNL表达式语言等，支持国际化、异常处理和Ajax集成。开发者可以通过继承ActionSupport类实现业务逻辑，并利用配置文件定义Action映射和拦截器链。Struts2.0还支持注解配置，提高了开
  • Java过滤器 淋风沐雨 javajava开发语言
    BWH_Steven的碎碎念javaweb体系只剩ajax和json加maven的讲解了，这段时间我会开始推送算法与数据结构结构的文章，从他们的入门知识到一些很实用的算法了解，亦或我们在java学习中留下的坑，我整理了两张A4纸，日后也打算推送一些大家需要的工具或者资源，暂时学校的事情还是比较多，每晚我都写到很晚，不过我尽最大可能给大家更新，如果你有什么想了解的也可以私信，或者发送邮件和我交流，至
  • Django解析跨域问题 信阳农夫 djangopython后端
    跨域问题解决CORS（跨域资源共享，Cross-OriginResourceSharing）是一种跨域访问的机制，可让Ajax实现跨域访问。其实，在服务器的responseheader中，加入“Access-Control-Allow-Origin:*”便可支持CORS，很是的简单，apache/nginx等怎么配置，见参考文档。在Django中，有人开发了CORS-header的middlewa
  • AJAX请求（axios篇） 码农白衣 html前端知识JSajax前端javascript
    目录一、axios介绍1.概念2.功能3.好处二、axios用法1.安装方法2.GET方法3.POST方法4.执行多个并发请求5.axiosAPI6.请求方法的别名7.async/await异步请求三、axios实例四、总结一、axios介绍1.概念AJAX是“AsynchronousJavaScriptandXML”的缩写，它是一种用于创建交互式网页应用程序的技术。AJAX允许在不重新加载整个网
  • js 封装ajax方法吗,原生JS封装ajax方法 里小咸 js封装ajax方法吗
    jquery框架的ajax方法固然好用，但是假如某天我们的项目不能引入jquery或项目需求很简单，没有很多交互功能，只需要ajax，这时引入jquery库会造成资源浪费，也会显得页面臃肿。这时我们就需要用原生JS写一个ajax函数了。/*封装ajax函数*@param{string}opt.typehttp连接的方式，包括POST和GET两种方式*@param{string}opt.url发送请
  • ASP.NET站点配置以及VS2008下C#、JavaScript联合调试(Ajax) ----以最短路径Dijstra最短路问题为例 刘一哥GIS 《VS/C/C++/C#》ASP.NETIIS最短路径ajax
    实验任务描述：用VS2008构造ASP.NET站点开发环境；用ASP.NET完成JavaScript开发调试；用Ext3.0.0完成一个简单的树显示站;WebService程序设计，Dijstra最短路Web服务；JavaScript通过Ajax技术调用WebService;一、Windows下WEB共享设置打开你的WINDOWS，鼠标点开“我的电脑”，寻找下你机器的WINDOWS版本信息，如果你
  • Ajax 封装Ajax函数（含注释） 夏沐_lk jqueryAjax封装函数
    封装好的Ajax函数/***发送一个AJAX请求*@param{String}method请求方法*@param{String}url请求地址*@param{Object}params请求参数*@param{Function}done请求完成过后需要做的事情（委托/回调）*/functionajax(method,url,params,done){//统一转换为大写便于后续判断method=met
  • 前端（AJAX）学习笔记（CLASS 4）：进阶 肥肠可耐的西西公主 前端学习笔记
    1、同步代码和异步代码同步代码：浏览器按照书写代码的顺序一行一行去执行代码，逐行执行，需要原地等待结果后，才继续向下执行异步代码：调用后耗时，不阻塞代码继续执行，在将来完成后触发一个回调函数2、回调函数地狱和Promise链式调用概念：在回调函数中嵌套回调函数，从而形成回调函数地狱缺点：可读性差，异常无法捕获，耦合性严重，牵一发动全身promise-链式调用概念：依靠then()方法会返回一个新生
  • sap关账+策略模式（避免大量if elseif） 宜昌李国勇 代码优化java开发语言
    旧代码@Transactional(rollbackFor=Exception.class)publicAjaxResultpurchaseOrderReceiptOutSourceAfterSapCloseAccountingPeriod(Longid){SysPurorderPostingLogsysPurorderPostingLog=sysPurorderPostingLogMapper.
  • JavaEE 项目常见错误解决方案 一弦一柱 JavaEE常见错误中文乱码JSP404
    JavaEE项目常见错误解决方案数据库连接JavaBean获取不到数据库字段值或出现意料之外的值业务中出现null或""404NOTFOUNDGET请求中文乱码form表单提交中文乱码最近的实训中，练了一个比较基础的项目，JSP+Servlet+JavaBean，完成两张表的CRUD操作，前端使用Bootstrap和JQuery，交互使用AJAX，IDE选用Eclipse,在时间比较仓促的情况下完
  • Flask框架中局部刷新页面 oliver.chau Python前端开发flaskpython后端
    在Flask中使用AJAX仅刷新leftMenue.html你的项目使用Flask，想要在添加网站后，仅刷新leftMenue.html而不刷新整个页面，可以使用AJAX（推荐）。✅1.在app.py里创建一个返回leftMenue.html的路由在Flask里，我们需要一个专门的API来返回最新的leftMenue.html。fromflaskimportFlask,render_templat
  • 基于讯飞星火的语音问答 哎呦☞ᨐ 语音识别人工智能语言模型文心一言opencv
    一.简介项目基于讯飞星火api作为核心能力并在其中搭载了WebSpeechAPI中的webkitSpeechRecognition对象来实现语音转文字的功能和TTS(Text-to-Speech)：通过调用百度TTSAPI将文本转换成语音，使机器人能够“说话”。实现了语音输入，语音输出的对话形式。实现方法：后端基于python的flask框架，前端使用了html+css并用AJAX通过XMLHtt
  • javaweb——AJAX快速入门 小羊持续开发 javawebajaxjavascript前端
    目录AJAX1.AJAX介绍2.AJAX概述3.为什么使用AJAX特点应用场景运行原理4.JQuery的AJAX```JS参数**post方式****get方式**区别：AJAX1.AJAX介绍传统项目前后端不分离，用户触发一个http请求服务器，然后服务器接收之后，在做出响应到用户，并且返回一个新的页面，也就是说交互都是通过页面刷新或页面跳转来实现。这样的方式对于用户体验来将其实并不友好，少量的
  • JavaWeb——AJAX(附三级联动省、市、区案例） weixin_43820008 JavaWebjavaajaxjavascriptjavaweb
    目录1.定义1.1优点2.基于jQuery的AJAX2.1语法2.2JSON2.3案例3.传统的WEB数据交互VSAJAX数据交互4.AJAX原理5.三级联动案例5.1案例说明5.2代码1.定义AJAX：异步的JavaScript和xml，并不是新的编程，指的是一种交互方式，异步加载，客户端和服务器的数据交互更新在局部页面的技术，不需要刷新整个页面（局部刷新）1.1优点局部刷新，效果更好用户体验更
  • python爬虫系列课程7：ajax wp_tao Python副业接单实战项目python爬虫ajax
    python爬虫系列课程7：ajax一、ajax的介绍二、ajax的使用一、ajax的介绍ajax是AsynchronousJavaScriptandXML的简写，ajax是一个前后端配合的技术，它可以让JavaScript发送异步的http请求，与后台通信进行数据的获取，ajax最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家
  • 【Gee-Web框架】【Day6】【Golang】模板Template 行者无疆xcc GeeWeb前端golang开发语言
    实现静态资源服务StaticResource支持HTML模板渲染一、服务端渲染1.简要说明前后端分离的开发模式，web后端提供RESTful接口，返回结构化的数据（通常是JSON或者XML），前端使用AJAX技术请求到所需的数据，利用JavaScript进行渲染。Vue/React等前端框架火热，优势突出后端专注解决资源利用、并发、数据库等问题，只需考虑数据如何生成前端专注界面设计实现，只需要考虑
  • html 页面滚动时 div位置不变,js实现页面刷新滚动条位置不变 weixin_28785069 html页面滚动时div位置不变
    今天因为这个问题困扰了很久网上的例子都尝试没效果，后来发现一点原来是内容最外层没有div的原因protectedoverrideboolHeaderScriptFilter(Topevery.Framework.Web.Configuration.Scriptval){switch(val.Key){case"ajaxpro2.prototype":case"ajaxpro2.core":case
  • jQuery 入门到精通 abments 前端jquery前端javascript
    jQuery入门到精通：详尽指南目录jQuery简介jQuery基础安装jQueryjQuery选择器DOM操作事件处理jQuery进阶动画效果AJAX插件项目实践简单的待办事项列表获取和显示API数据高级技巧性能优化调试技巧资源和总结1.jQuery简介jQuery是一个快速、小巧且功能丰富的JavaScript库，它使HTML文档的遍历和操作、事件处理、动画以及AJAX交互更简单。jQuery
  • Ajax基础语法总结 前端小谢 ajax前端
    了解服务器：提供某种服务器的机器（计算机）1.访问服务器的几种方式直接在地址栏输入网址a标签的href属性Location.href=‘url‘Ajax网页不会跳转Ajax技术：在网页不跳转的情况下，向服务器请求数据应用场景：局部刷新2.Ajax语法：get使用内置对象XMLHttpRequest发送ajax请求1.创建XMLHttpRequest对象Letxhr=newXMLHttpReques
  • 使用Ajax完成与后台服务器的数据交互 星星不打輰 ajax服务器交互edge浏览器
    使用Ajax实现与后台服务器的数据交互Ajax（异步的JavaScript和XML）##注意Ajax为异步的异步：即为不同步，同步相当于是我们在向后台发送请求的时候，必须返回一个响应数据才可以在浏览器下一步操作（形象描述：一次聊天，两者进行一问一答）–》这就叫做同步异步就是一者向另外一者发送信息，但是不等对方回复，可以继续向其发送信息**Ajax与服务器之间进行交换数据，更新的是部分网页的信息，而
  • Vue 过滤器 JSON_L 前端#Vue前端vue.js
    Vue渐进式JavaScript框架基于Vue2的学习笔记-Vue使用-过滤器目录过滤器优化图片路径处理定义过滤器使用多个过滤器总结过滤器优化图片路径处理文件路径经过管道过滤器处理后，返回给图片路径，示例如下：ajax-axios{{item.title}}定义过滤器在vue中定义过滤器。示例如下：Vue.filter("imgFilter",(url)=>{returnurl.replace("
  • 前端vue面试题 微微的猪食小窝 vue面试题ajaxnode.jsvue.js
    一.自我介绍(我是谁来自哪里,今天来的目的,面试的岗位是什么,几年的工作经验,掌握的技术栈有哪些,开发过什么项目,项目中负责的板块是什么)面试官您好!我叫XXX,来自XXX,很荣幸能来我们公司面试,我从事前端开发有3年了,目前掌握的技术有html,css,js,ajax,vue,小程序,参与过各种类型的项目。我做过的项目有A,B,C,D,E那么最近做的一个项目是XXX在这个项目中我主要负责的板块是
  • AJAX与PHP数据交互的精细指南 t0_54coder ajaxphp交互个人开发
    在当今的Web开发中，AJAX（AsynchronousJavaScriptandXML）与PHP的结合使用非常普遍，用于实现无刷新页面更新或后台数据处理等功能。今天，我们将通过一个实例，详细讲解如何使用AJAX与PHP进行数据交互，并解决常见的问题。实例背景假设我们有一个用户注册表单，当用户提交表单时，我们需要将数据插入到MySQL数据库中，同时在前端实时显示插入是否成功。前端代码首先，我们在H
  • AJAX和JSONP：前端异步请求与跨域解决方案 创意前端 前端ajaxokhttp编程
    AJAX和JSONP是前端开发中常用的异步请求和跨域解决方案。本文将详细介绍它们的使用方法和源代码示例。一、AJAX（AsynchronousJavaScriptandXML）AJAX是一种在不刷新整个页面的情况下，通过JavaScript与服务器进行异步通信的技术。它可以实现页面的局部刷新，提升用户体验。发起AJAX请求以下是一个简单的AJAX请求的示例：varxhr=newXMLHttpReq
  • Google搜索API? itkbase googlejavascriptsoapsearch语言service
    原文：GoogleSearchAPI?有几个人给我讲了关于Google从基于SOAP访问机制的搜索转向基于AJAX的搜索。O'Reilly的文章开始对此进行了详细讲解，但是我认为这里还有更多的内容。我专门花了几分钟时间，在Google的站点上，将大家所指的地方看了一遍，结果，吓了一大跳。我期望找到一些详细讲解的JSON格式，这样我就可以选择运行时库/平台/语言来阐述搜索的相关内容。不幸的是，我只找
  • 什么是jQuery？jQuery有哪些优势？ 重庆千锋 web前端编程程序IT行业
    什么是jQueryjQuery是一款跨浏览器的开源JavaScript库，它的核心理念是writeless,domore(写得更少，做得更多)。通过对JavaScript代码的封装，使得DOM、事件处理、动画效果Ajax等功能的实现代码更加简洁，有效地提高程序开发效率。jQuery最初由JohnResig在2006年1月正式发布，吸引了众多来自世界各地的JavaScript高手的关注。与jQuer
  • JSP + Servlet 实现 AJAX（纯JS版） xiaoyustudiowww javascriptjavaservlet
    ==============java文件，包名org.rain.servletpackageorg.rain.servlet;importjava.io.IOException;importjava.io.PrintWriter;importjava.util.ArrayList;importjava.util.List;importjavax.servlet.ServletConfig;impo
  • mysql主从数据同步 林鹤霄 mysql主从数据同步
    配置mysql5.5主从服务器(转) 教程开始：一、安装MySQL 说明：在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作，安装MySQL 5.5.22  二、配置MySQL主服务器（192.168.21.169）mysql  -uroot  -p   &nb
  • oracle学习笔记 caoyong oracle
    1、ORACLE的安装    a>、ORACLE的版本    8i,9i :   i是internet    10g,11g : grid (网格)    12c : cloud (云计算)       b>、10g不支持win7 &
  • 数据库，SQL零基础入门 天子之骄 sql数据库入门基本术语
    数据库，SQL零基础入门        做网站肯定离不开数据库，本人之前没怎么具体接触SQL，这几天起早贪黑得各种入门，恶补脑洞。一些具体的知识点，可以让小白不再迷茫的术语，拿来与大家分享。          数据库，永久数据的一个或多个大型结构化集合，通常与更新和查询数据的软件相关
  • pom.xml 一炮送你回车库 pom.xml
    1、一级元素dependencies是可以被子项目继承的 2、一级元素dependencyManagement是定义该项目群里jar包版本号的，通常和一级元素properties一起使用，既然有继承，也肯定有一级元素modules来定义子元素 3、父项目里的一级元素<modules> <module>lcas-admin-war</module> <
  • sql查地区省市县 3213213333332132 sqlmysql
    -- db_yhm_city SELECT * FROM db_yhm_city WHERE class_parent_id = 1 -- 海南 class_id = 9 港、奥、台 class_id = 33、34、35 SELECT * FROM db_yhm_city WHERE class_parent_id =169 SELECT d1.cla
  • 关于监听器那些让人头疼的事 宝剑锋梅花香 画图板监听器鼠标监听器
           本人初学JAVA，对于界面开发我只能说有点蛋疼，用JAVA来做界面的话确实需要一定的耐心（不使用插件，就算使用插件的话也没好多少）既然Java提供了界面开发，老师又要求做，只能硬着头皮上啦。但是监听器还真是个难懂的地方，我是上了几次课才略微搞懂了些。       
  • JAVA的遍历MAP darkranger map
    Java Map遍历方式的选择 1. 阐述 　　对于Java中Map的遍历方式，很多文章都推荐使用entrySet，认为其比keySet的效率高很多。理由是：entrySet方法一次拿到所有key和value的集合；而keySet拿到的只是key的集合，针对每个key，都要去Map中额外查找一次value，从而降低了总体效率。那么实际情况如何呢？ 　　为了解遍历性能的真实差距，包括在遍历ke
  • POJ 2312 Battle City 优先多列+bfs aijuans 搜索
    来源：http://poj.org/problem?id=2312 题意：题目背景就是小时候玩的坦克大战，求从起点到终点最少需要多少步。已知S和R是不能走得，E是空的，可以走，B是砖，只有打掉后才可以通过。 思路：很容易看出来这是一道广搜的题目，但是因为走E和走B所需要的时间不一样，因此不能用普通的队列存点。因为对于走B来说，要先打掉砖才能通过，所以我们可以理解为走B需要两步，而走E是指需要1
  • Hibernate与Jpa的关系，终于弄懂 avords javaHibernate数据库jpa
    我知道Jpa是一种规范，而Hibernate是它的一种实现。除了Hibernate，还有EclipseLink(曾经的toplink)，OpenJPA等可供选择，所以使用Jpa的一个好处是，可以更换实现而不必改动太多代码。 在play中定义Model时，使用的是jpa的annotations，比如javax.persistence.Entity, Table, Column, OneToMany
  • 酸爽的console.log bee1314 console
    在前端的开发中，console.log那是开发必备啊，简直直观。通过写小函数，组合大功能。更容易测试。但是在打版本时，就要删除console.log，打完版本进入开发状态又要添加，真不够爽。重复劳动太多。所以可以做些简单地封装，方便开发和上线。 /** * log.js hufeng * The safe wrapper for `console.xxx` functions *
  • 哈佛教授：穷人和过于忙碌的人有一个共同思维特质 bijian1013 时间管理励志人生穷人过于忙碌
            一个跨学科团队今年完成了一项对资源稀缺状况下人的思维方式的研究，结论是：穷人和过于忙碌的人有一个共同思维特质，即注意力被稀缺资源过分占据，引起认知和判断力的全面下降。这项研究是心理学、行为经济学和政策研究学者协作的典范。 　　这个研究源于穆来纳森对自己拖延症的憎恨。他7岁从印度移民美国，很快就如鱼得水，哈佛毕业
  • other operate 征客丶 OSosx
    一、Mac Finder 设置排序方式，预览栏 在显示－》查看显示选项中 二、有时预览显示时，卡死在那，有可能是一些临时文件夹被删除了，如：/private/tmp[有待验证] -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出， 我好及时改正，同时也让我们一
  • 【Scala五】分析Spark源代码总结的Scala语法三 bit1129 scala
    1. If语句作为表达式 val properties = if (jobIdToActiveJob.contains(jobId)) { jobIdToActiveJob(stage.jobId).properties } else { // this stage will be assigned to "default" po
  • ZooKeeper 入门 BlueSkator 中间件zk
    ZooKeeper是一个高可用的分布式数据管理与系统协调框架。基于对Paxos算法的实现，使该框架保证了分布式环境中数据的强一致性，也正是基于这样的特性，使得ZooKeeper解决很多分布式问题。网上对ZK的应用场景也有不少介绍，本文将结合作者身边的项目例子，系统地对ZK的应用场景进行一个分门归类的介绍。 值得注意的是，ZK并非天生就是为这些应用场景设计的，都是后来众多开发者根据其框架的特性，利
  • MySQL取得当前时间的函数是什么 格式化日期的函数是什么 BreakingBad mysqlDate
    取得当前时间用 now() 就行。 在数据库中格式化时间 用DATE_FORMA T(date, format) . 根据格式串format 格式化日期或日期和时间值date，返回结果串。 可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值，以便得到所希望的格式。根据format字符串格式化date值: %S, %s 两位数字形式的秒（ 00,01,
  • 读《研磨设计模式》-代码笔记-组合模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
  • 4_JAVA+Oracle面试题(有答案) chenke oracle
    基础测试题 卷面上不能出现任何的涂写文字，所有的答案要求写在答题纸上，考卷不得带走。 选择题 1、 What will happen when you attempt to compile and run the following code? （3） public class Static { static { int x = 5; // 在static内有效 } st
  • 新一代工作流系统设计目标 comsci 工作算法脚本
      用户只需要给工作流系统制定若干个需求，流程系统根据需求，并结合事先输入的组织机构和权限结构，调用若干算法，在流程展示版面上面显示出系统自动生成的流程图，然后由用户根据实际情况对该流程图进行微调，直到满意为止，流程在运行过程中，系统和用户可以根据情况对流程进行实时的调整，包括拓扑结构的调整，权限的调整，内置脚本的调整。。。。。 在这个设计中，最难的地方是系统根据什么来生成流
  • oracle 行链接与行迁移 daizj oracle行迁移
    表里的一行对于一个数据块太大的情况有二种(一行在一个数据块里放不下) 第一种情况: INSERT的时候，INSERT时候行的大小就超一个块的大小。Oracle把这行的数据存储在一连串的数据块里(Oracle Stores the data for the row in a chain of data blocks)，这种情况称为行链接(Row Chain)，一般不可避免(除非使用更大的数据
  • [JShop]开源电子商务系统jshop的系统缓存实现 dinguangx jshop电子商务
    前言 jeeshop中通过SystemManager管理了大量的缓存数据，来提升系统的性能，但这些缓存数据全部都是存放于内存中的，无法满足特定场景的数据更新（如集群环境）。JShop对jeeshop的缓存机制进行了扩展，提供CacheProvider来辅助SystemManager管理这些缓存数据，通过CacheProvider,可以把缓存存放在内存,ehcache,redis，memcache
  • 初三全学年难记忆单词 dcj3sjt126com englishword
    several 儿子；若干 shelf 架子 knowledge 知识；学问 librarian 图书管理员 abroad 到国外，在国外 surf 冲浪 wave 浪；波浪 twice 两次；两倍 describe 描写；叙述 especially 特别；尤其 attract 吸引 prize 奖品；奖赏 competition 比赛；竞争 event 大事；事件 O
  • sphinx实践 dcj3sjt126com sphinx
      安装参考地址:http://briansnelson.com/How_to_install_Sphinx_on_Centos_Server   yum install sphinx 如果失败的话使用下面的方式安装 wget http://sphinxsearch.com/files/sphinx-2.2.9-1.rhel6.x86_64.rpm yum loca
  • JPA之JPQL（三） frank1234 ormjpaJPQL
    1 什么是JPQL JPQL是Java Persistence Query Language的简称，可以看成是JPA中的HQL， JPQL支持各种复杂查询。 2 检索单个对象 @Test public  void querySingleObject1() {     Query query = em.createQuery("sele
  • Remove Duplicates from Sorted Array II hcx2013 remove
    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For example,Given sorted array nums = [1,1,1,2,2,3], Your function should return length
  • Spring4新特性——Groovy Bean定义DSL jinnianshilongnian spring 4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装Mysql5.5 liuxingguome centos
    CentOS下以RPM方式安装MySQL5.5 首先卸载系统自带Mysql： yum remove mysql mysql-server mysql-libs compat-mysql51 rm -rf /var/lib/mysql rm /etc/my.cnf 查看是否还有mysql软件： rpm -qa|grep mysql 去http://dev.mysql.c
  • 第14章 工具函数（下） onestopweb 函数
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • POJ 1050 SaraWon 二维数组子矩阵最大和
    POJ ACM第1050题的详细描述，请参照 http://acm.pku.edu.cn/JudgeOnline/problem?id=1050 题目意思： 给定包含有正负整型的二维数组，找出所有子矩阵的和的最大值。 如二维数组 0 -2 -7 0 9 2 -6 2 -4 1 -4 1 -1 8 0 -2 中和最大的子矩阵是 9 2 -4 1 -1 8 且最大和是15
  • [5]设计模式——单例模式 tsface java单例设计模式虚拟机
    单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点   安全的单例模式：     /* * @(#)Singleton.java 2014-8-1 * * Copyright 2014 XXXX, Inc. All rights reserved. */ package com.fiberhome.singleton;
  • Java8全新打造，英语学习supertool yangshangchuan javasuperword闭包java8函数式编程
    superword是一个Java实现的英文单词分析软件，主要研究英语单词音近形似转化规律、前缀后缀规律、词之间的相似性规律等等。Clean code、Fluent style、Java8 feature: Lambdas, Streams and Functional-style Programming。   升学考试、工作求职、充电提高，都少不了英语的身影，英语对我们来说实在太重要
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他