- 新浪微博当你弹出一个视频的时候再点下一页时,原视频还在,而且地址栏的url的页数变了。
对于这种网上讨论最多的方案有以下几种:一、通过锚点Hash实现
在这方面其实国内很早就有做了,比如淘宝画报,通过的是在地址栏后面加#锚点实现的,浏览器是可以识别锚点为单位的历史记录的。但不是说页面本身有这个锚点,锚点的Hash只是起到一个引导浏览器将这次的记录推入历史记录栈顶的作用。
二、通过HTML5加强型的History对象实现(类Pjax)
可以通过window.history.pushState这个方法无刷新的更新浏览器地址栏,这个方法在更新地址栏的同时将地址压入历史记录堆栈里,而要取出这个栈顶页面则可以用popstate这个事件来捕获。
另外这里要推荐一个jQuery组件叫pjax(https://github.com/defunkt/jquery-pjax),比较牛叉的一个组件,异步的部分load进来另外一个页面对应容器中的内容,实现的机理和我上面的第二种方案一致。pushState + ajax = pjax 感觉这个应用会热起来的。
稍微总结下,两种方案其实对于想IE6或者FF3.6等比较低级的浏览器支持不是很好,前者若要兼容低端浏览器要用轮询来监听浏览器地址栏行为,而后者的话是完全的HTML5应用,对于非HTML5浏览器只能做判断跳转了。
如pjax最后的一段无奈的兼容处理:
Js代码$.support.pjax = window.history && window.history.pushState
// Fall back to normalcy for older browsers.
if ( !$.support.pjax ) {
$.pjax = function( options ) {
window.location = $.isFunction(options.url) ? options.url() : options.url
}
$.fn.pjax = function() { return this }
}
【JavaScript】新浪微博ajax请求后改变地址栏url,但页面不跳转的方案解析
时间: 2024-10-13 16:19:49
【JavaScript】新浪微博ajax请求后改变地址栏url,但页面不跳转的方案解析的相关文章
【转】Javascript原生Ajax请求
什么是 ajaxajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 http 请求的方法(GET 和 POST). GET 用于获取数据.GET 是在 URL 中传递数据,它的安全性低,容量低. POST 用于上传数据.POST 安全性一般,容量几乎无限. ajax 请求 ajax 请求一般分成 4 个步骤. 1.创建 ajax 对象 在创建对象时,有兼容问题: var o
javascript中Ajax请求的封装代码
/****************************ajax请求 start**************************************/ function ajaxClass(_url, _successCallback, _failureCallback, _urlParameters, _callbackParams, _async, _charset, _timeout, _frequency, _requestTimes, _frame) { /** * AJAX
javascript版Ajax请求
什么是Ajax请求,Ajax也就是"Asynchronous JavaScript and XML"(异步JavaScript和XML),无刷新数据读取.能减少流量的消耗,也提高了浏览的流畅性,给用户更加友好的体验. 发送Ajax请求也就几步便可完成 第一步:创建异步对象 var xhr = new XMLHttpRequest(); 这样创建的异步对象是给新版的浏览器用的,当然不乏一些用着旧版浏览器的老客户.旧版的创建方法如下: var xhr = new ActiveXObject
原生javaScript完成Ajax请求
使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; if(windoe.XMLHtprequest){ request=new XMLHttprequest(); }else{ request = new ActiveXObject(); } function success(text) { var textarea = document.getEle
ajax请求后弹开新页面被浏览器拦截
window.open()我想应该很多人都不陌生吧,它可以实现除用a标签以外来实现打开新窗口! 最近开发项目用到时,却遇到了麻烦,本来好好的弹出窗口,结果被浏览器无情的给拦截了! 代码如下: $.getJSON(URL,data,function(data,state){ if(state=='success'){ window.open('http://www.cnblogs.com/garfieldzhong/'); }else{ alert('请求失败!'); } }) 这要手动允许弹出窗
使用原生JavaScript发送ajax请求
关于使用原生JavaScript发送异步请求给服务端. 准备工作: 代码编写工具用的是sublime 服务端使用的是wamp搭的一个本地Apache服务器,主要用来返回数据 方便测试 步骤: 浏览器端 html标签绑定事件发送ajax请求----> 五步操作:1 创建异步对象XMLHttpRequest; 2 设置method url 3 发送请求给服务端 4 注册事件 5 在事件中获取服务端返回的数据,进行操作. 服务器端 1 获取请求数据 2 返回结果给浏览器 下面来一个小demo1做一
使用ajax请求后返回数据显示undefinded解决办法
今天在使用七牛的sdk做断点续传时候,当文件过大,本地没有存储时候,想要通过ajax将本地信息存到服务器缓存,之后通过读取缓存的方式来完成文件过大断点续传无法使用问题. 但是在使用ajax请求的时候,发现赋值和请求通过server端都能够请求到.但是请求显示的时候显示仍然是undefined.下面是自己的代码: //查询服务器是否有该值 function getLocalStorage(fileName){ $.ajax({ url : "/live/get-localStorage"
javascript原生ajax请求
1 class Ajax{ 2 3 constructor(url, method, data, callback_suc, callback_err, callback_run){ 4 this.RT = true;//默认为异步请求 5 this.url = url; 6 this.method = method || "POST"; 7 this.data = data || ""; 8 this.callback_suc = callback_suc ||
ajax请求session失效重定向到登录页面
在ajax请求的页面引入一个自定义的AjaxRedirect.js的文件 AjaxRedirect.js的代码如下: $(function(){ $.ajaxSetup({ type: 'POST', complete: function(xhr,status) { var sessionStatus = xhr.getResponseHeader('sessionstatus'); if(sessionStatus == 'timeout') { var top = getTopWinow()