Question

我想知道是否可以使用javascript发出GET请求，因此它可以在不刷新页面的情况下更新文本。

如果可以，我怎样才能使用javascript＆amp; amp;从json获得结果/解码？

我从过去的问题中尝试了这个：

function updateButton(){

    var xmlHttp = null;

    xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", "http://xxxx.com/getSpecialSale.php", false);
    xmlHttp.send(null);
    document.getElementById("dicebutton").innerHTML=xmlHttp.responseText;
}

而且，它完全阻止了主线程，使网站无法响应。有什么问题？

Answer 1

目前您将async参数设置为false，因此请求将发送到服务器，浏览器将等待响应。要创建异步请求，只需将true作为thrid param传递给open

xmlHttp.open("GET", "http://xxxx.com/getSpecialSale.php", true);

除此之外，你必须注册一个回调，它等待响应（并可能处理错误..）

xmlHttp.onload = function (e) {
    if (xmlHttp.readyState === 4) {
        if (xmlHttp.status === 200) {
            console.log(xmlHttp.responseText);
        } else {
           console.error(xmlHttp.statusText);
        }
    }
};
xmlHttp.onerror = function (e) {
    console.error(xmlHttp.statusText);
};

除了来自mozilla docs的说明

注意：从Gecko 30.0开始（Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27），主线程上的同步请求已经完成由于对用户体验的负面影响而弃用。

Answer 2

var isAjax=false;
function updateButton(){
     if(!isAjax) { //Stops the user making a million requests per minute
        isAjax=true;
        var xmlHttp = null;

        xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET", "http://xxxx.com/getSpecialSale.php", true);
        xmlHttp.send(null);
        document.getElementById("dicebutton").innerHTML=xmlHttp.responseText;
        isAjax=false;
    }
}

或jQuery ......

$("#btnUpdate").click(function(){
    $.get("http://xxxx.com/getSpecialSale.php", function(data, status){
        $("#dicebutton").html(data);
    });
});

Answer 3

如果你想使用异步，你需要进行一些代码修改，即响应完成后发生的事情需要在回调函数中，如下所示：

function updateButton(){

    var xmlHttp = null;

    xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", "http://xxxx.com/getSpecialSale.php", true);
    xmlHttp.onload = function () {
      document.getElementById("dicebutton").innerHTML=xmlHttp.responseText;
    };
    xmlHttp.send(null);

}

使用javascript可以获得get请求吗？

3 个答案: