处理前更改Javascript按钮文本

我目前有一个按钮，其值为“提交”。我想这个文本更改为“提交”一旦点击它。目前，我有以下几点：

<input type="button" id=btnSub name="submitToeNICQ"  value="Submit" onclick="do_submission()">
<div id="results"> No submission has been performed yet</>
<script>  
function do_submission()
{
    var elem = document.getElementById("btnSub");
    elem.value="Submitting";
    var xhReq = new XMLHttpRequest();
    var request = "main.php?pid=21&submiteNICQ=yes " 
    xhReq.open("GET", request, false);  // send a request
    xhReq.send(null);
    document.getElementByID("results").innerHTML=xhReq.responseText;
}
</script>

尚未执行任何提交
函数do_submission（）
{
var elem=document.getElementById（“btnSub”）；
elem.value=“提交”；
var xhReq=新的XMLHttpRequest（）；
var request=“main.php？pid=21&submiteNICQ=yes”
open（“GET”，request，false）；//发送请求
xhReq.send（空）；
document.getElementByID（“结果”）.innerHTML=xhReq.responseText；
}

我希望在处理XMLHttpRequest之前更改文本，以便用户立即进行更改。上述代码似乎仅在整个请求完成后（通常在按下按钮后3秒左右）更改按钮文本

---

有人对此有解决方案吗？

不要执行同步AJAX请求。它们专为异步请求而设计：

function do_submission()
{
    var elem = document.getElementById("btnSub");
    elem.value="Submitting";
    var xhReq = new XMLHttpRequest();
    var request = "main.php?pid=21&submiteNICQ=yes " 

    // Removed third parameter (it's now 'true' by default)
    xhReq.open("GET", request);

    // Added callback function for handling different states
    xhReq.onreadystatechange = function () {
      if (xhReq.status == 200 && xhReq.readyState == 4) {
        document.getElementByID("results").innerHTML=xhReq.responseText;
      }  
    }; 
    xhReq.send(null);

}

当前代码等待请求完成，然后才能更新任何UI部件

上面的代码异步触发请求，因此函数将在请求完成之前结束，浏览器有时间更新UI

jQuery：

function do_submission()
{
    $("#btnSub").val("Submitting");

    $.get("main.php?pid=21&submiteNICQ=yes", function (data) {
      $("#results").html(data);
    });
}

---

太好了，非常感谢！一旦我被允许（必须等待10分钟），我将标记为接受答案。@Josh你使用jQuery吗（你为它添加了一个标记）？使用jQuery for AJAX确实缩短了代码。不，我不使用jQuery，我对它了解不多。不过谢谢你的建议，我现在就来研究一下。@Josh，那么不要在问题中添加“jQuery”标记；）不管怎样，我发布了你使用jQuery函数重写的代码。谢谢你的帮助。去掉jquery标记：）