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