Javascript get 请求阻塞了 ui

Question

考虑以下因素:

HTML:

...
<button id="get">Get</button>
<div id="result"></div>
...

JavaScript:

$('#get').on('click', function()
{
    var result = httpGet(getUrl() + 'query.php');
    document.getElementById('result').innerHTML = result;
});

function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open('GET', theUrl, false);
    xmlHttp.send(null);

    return xmlHttp.responseText;
}

function getUrl()
{
    return window.location.href.substring(0, (window.location.href.lastIndexOf('/')) + 1);
}

PHP(查询.php):

// Make database query and return the result.

<小时/>

所以...当我点击 button get 时，它会调用 httpGet() 并向 query.php 发出请求，进行数据库查询并返回结果，该结果分配给div result。

问题是，在从服务器获取结果之前，这是一个缓慢的过程，UI 被阻塞。怎么解决呢？

Answer 1

open 的最后一个参数应该是“true”才能使其异步。

 xmlHttp.open('GET', theUrl, true);

这意味着您的请求将是异步的并且不会阻塞用户界面

当然，如果你这样做，你将不会在下一行中得到响应，因此你的函数将如下所示:

function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById('result').innerHTML = xmlhttp.responseText;
        }
    }
    xmlHttp.open('GET', theUrl, false);
    xmlHttp.send(null);
}