JS 获取链接(url)参数以及锚链接（anchor）结合富ajax的应用（ajax前进/后退的问题）

1. JavaScript获取url链接的方法：

 

 

Js代码  


<script language="javascript">document.write(window.location.href ); </script>  

 

格式为 http://127.0.0.1/index.php?c=index&name=top#mao
 

 

Js代码  


<script language="javascript">document.write(window.location.protocol);</script>  

 

格式为 http:

 

 

Js代码  


<script language="javascript">document.write(window.location.host);</script>  

 

格式为 127.0.0.1

 

 

Js代码  


<script language="javascript">document.write(window.location.port);</script>  

 

这里返回的是端口号，默认如果是80的话，则返回空值，如果是其他端口，则返回相应端口号

 

 

Js代码  


<script language="javascript">document.write(window.location.pathname);</script>  

 

格式为 /index.php

 

 

Js代码  


<script language="javascript">document.write(window.location.search);</script>  

 

格式为 ?c=index&name=top#mao 也就是说获取了动态语言赋值，也就是查询参数部分

 

 

Js代码  


<script language="javascript">document.write(window.location.hash);</script>  

 

格式为 #mao 这里就获取了锚点的名称

  这些获取浏览器地址栏上面的url的方法是非常有用的，可以制作锚链接（在有些系统里面，直接在A标签里加不行的话可以使用这个，同时也可以使用在Zencart的产品详细页面，做锚链接是非常容易的）。

 

 

 2. JavaScript获取参数：

 

 

Js代码  


<script type="text/javascript">  
   
function getQueryString(name)  
{  
    // 如果链接没有参数，或者链接中不存在我们要获取的参数，直接返回空  
    if(location.href.indexOf("?")==-1 || location.href.indexOf(name+'=')==-1) return '';  
   
    // 获取链接中参数部分  
    var queryString = location.href.substring(location.href.indexOf("?")+1);  
   
    // 分离参数对 ?key=value&key2=value2  
    var parameters = queryString.split("&");  
   
    var pos, paraName, paraValue;  
    for(var i=0; i<parameters.length; i++)  
    {  
        // 获取等号位置  
        pos = parameters[i].indexOf('=');  
        if(pos == -1) { continue; }  
   
        // 获取name 和 value  
        paraName = parameters[i].substring(0, pos);  
        paraValue = parameters[i].substring(pos + 1);  
   
        // 如果查询的name等于当前name，就返回当前值，同时，将链接中的+号还原成空格  
        if(paraName == name) return unescape(paraValue.replace(/\+/g, " "));  
    }  
    return '';  
};  
   
//http://localhost/test.html?aa=bb&test=cc+dd&ee=ff  
alert(getQueryString('test'));  
//-->  
</script>  

或者：

 

 

Js代码  


<script type="text/javascript">  
function getQueryStringRegExp(name)  
{  
    var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s|&|$)", "i");  
    if (reg.test(location.href)) return unescape(RegExp.$2.replace(/\+/g, " ")); return "";  
};  
   
//http://localhost/test.html?aa=bb&test=cc+dd&ee=ff  
alert(getQueryStringRegExp('test'));  
</script>  

 

 

  3. JavaScript 锚链接（anchor）结合富ajax的应用：

 

 

锚链接非常有用，因为他实现了页面不刷新就可以更新数据，之所以称其为富ajax，是因为他除了拥有类似ajax的用途（不刷新即实现更新数据），还拥有一个ajax没有的功能： 更改url地址，便于用户保存页面。 思路如下：

 

 

打开页面，获取location.hash也就是定位锚的值例如#/page/30，值的形式可以自己定(像urlrewrite那样)。获取之后处理分析，我这里是分成 page和 30 作为两个参数通过ajax传递给php程序处理返回结果，然后修改到网页上。如果值为空就显示首页数据。

 

但是有一个问题就会出现：前进/后退按钮的问题，因为url改变，所以至少前进/后退按钮有历史记录，可惜的是点击之后只是地址栏url改变，页面并不刷新。

 

解决方案：

 

前进/后退按钮点击之后，url是变化了，可惜定位锚的变化浏览器不会刷新页面，那么这时候，只需要绑定hashchange事件就行了，也就是说每当定位锚变化的时候就触发一个事件。

 

 

我们可以使用以下三个插件：

 

jQuery hashchange event: 直接绑定事件到window.onhashchange，并支持首次载入可以手动加载。使用简单。(目前我正在使用的就是这个。)

jQuery History: 和上面的一样也是绑定事件到window.onhashchange，而且多了几个方法，比如修改url的定位锚，修改href里面的定位锚值等等。(注意，jQuery官网也有一个叫做jQuery history但是不一样的插件，注意区分)。(我没选择这个是因为其js文件比上面的大了一点)

jQuery History Plugin：注意区分，比上面名称多了一个plugin。这款插件，其实是另外一种用法：比如人间网虽然也是AJAX网站，也支持前进/后退，但是它url不改变。所以对于那些url不改变，但是需要支持前进/后退按钮的话，这款插件是不错的选择。其原理和上面不同，把操作放入堆栈，并且通过一个隐藏的iframe页面来产生前进/后退历史(url不改变的话，按钮是没历史记录的)，加入了一个iframe隐藏页面之后，相同url也能产生记录了，具体原理可以去看作者说明。

最后，因为每次定位锚改变就能触发事件，所以<a href="#/page/30">gallery 30</a>不需要再使用onclick事件了，点击之后url定位锚变化了，自然就触发了上面hashchange事件，然后我把数据调用在这里面完成就搞定了。从此可以和普通网站那样写链接做页面了。另外，由于定位锚被当成不同页面链接用了，其原来用来定位的功能我们可以通过自行修改其偏移值来实现，上下滚动反而更柔滑:

 

 

Js代码  


$(function(){  
    $('a[href*=#]').click(function() {  
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')   
        && location.hostname == this.hostname) {  
            var $target = $(this.hash);  
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');  
            if ($target.length) {  
                var targetOffset = $target.offset().top;  
                $('html,body').animate({scrollTop: targetOffset}, 1000);  
                return false;  
            }  
        }  
    });  
});