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

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

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

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

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

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

?
格式为 http:

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

?
格式为 127.0.0.1

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

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

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

?
格式为 /index.php

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

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

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

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

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

?2. JavaScript获取参数：

<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>

或者：

<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事件，然后我把数据调用在这里面完成就搞定了。从此可以和普通网站那样写链接做页面了。另外，由于定位锚被当成不同页面链接用了，其原来用来定位的功能我们可以通过自行修改其偏移值来实现，上下滚动反而更柔滑:

$(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;
            }
        }
    });
});