Question

我使用下面的ajax代码

// JavaScript Document
function createTeam() {
    var name=document.getElementById("name").value;
    if(name==null || name==""){
        var div3 = document.getElementById("errorMessage");
        var text = "Enter Team";
        div3.style.display = "block";
        div3.style.color = "red";
        div3.style.fontSize = "65%";
        div3.innerHTML = text;
    }else{
        xmlhttp=new XMLHttpRequest();
        xmlhttp.open("POST","/TeamServlet?name="+name+"&task=create",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send();
        xmlhttp.onreadystatechange= readResponse;
    }
    function readResponse(){
        if (xmlhttp.readyState == 4)
        {
            response = xmlhttp.responseText;
            $('#button').hide("slow");
            if(response == "false"){
                var div2 = document.getElementById("errorMessage");
                var text = "Unable to create team.";
                div2.style.display = "block";
                div2.style.color = "red";
                div2.style.fontSize = "65%";
                div2.innerHTML = text;
            }
            if(response == "true"){
                var div = document.getElementById("errorMessage");
                var text1 = "Team created.";
                div.style.display = "block";
                div.style.color = "red";
                div.style.fontSize = "65%";
                div.innerHTML = text1;
            }
        }
    }
}

但是当我使用这个ajax时，会出现在浏览器的地址栏上的URL。我可以实现吗？唯一的网址是我提交登录表单后，这就是http://localhost:8080/LoginServlet?task=login 但在此之后，即使我导航到其他jsps / servlets，也没有这些url来。我如何修复这个ajax代码？

Answer 1

为什么要在地址栏中显示ajax请求的url？如果要在不导航当前页面的情况下调用服务器，则将执行Ajax请求。如果你想在地址栏中更改网址，那么你必须将用户重定向到所述网址，你不需要Ajax。

Answer 2

这是AJAX的基本目的：在“后台”上做异步请求。使用AJAX完成的所有请求都不会触发浏览器的加载图标，也不会更改当前的URL。

如果你想做类似的事情，你应该看看HTML5 History API。因为这是一个很大的主题，我无法向你展示“一个”答案，但我给你一些资源进入：

解释＆amp; demo http://html5doctor.com/history-api/
解释＆amp; demo http://dev.opera.com/articles/view/introducing-the-html5-history-api/
解释＆amp; demo http://diveintohtml5.info/history.html
解释＆amp; demo http://robertnyman.com/2011/08/03/html5-history-api-and-improving-end-user-experience/
demo http://html5demos.com/history

您会发现问题是所有浏览器都不支持此API，因此您需要使用 polyfill 来使代码跨浏览器兼容。以下是您可以使用的跨浏览器polyfill列表：

History.js https://github.com/browserstate/history.js
PJAX（pushState + ajax = pjax）http://pjax.heroku.com/
hashchange jQuery event http://benalman.com/projects/jquery-hashchange-plugin/
HistoryManager Mootools插件http://mootools.net/forge/p/historymanager/
SWFAddress http://www.asual.com/swfaddress/＆amp; jQuery地址http://www.asual.com/jquery/address/
jQuery历史插件https://balupton.com/projects/jquery-history
jQuery Ajaxy http://balupton.com/projects/jquery-ajaxy
Hasher https://github.com/millermedeiros/hasher/
sHistory https://github.com/tatsh/sHistory

此列表由Modernizr团队维护，已提供的版本可在https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

获取

网址不在地址栏上

2 个答案: