编写XHR同步行为的替代方法

Question

我最近听说，使用XHR时我们不应该使用同步行为。 就我而言，我需要同步行为。 同步重写对服务的调用的最佳方法是什么，而不是现在如何进行操作。 请没有jQuery的..

   var xhReq = new XMLHttpRequest();
    xhReq.open("POST", "ClientService.svc/REST/TestHtmlSend", false);
    xhReq.send(null);
    var serverResponse = JSON.parse(xhReq.responseText);

    return serverResponse;

Answer 1

您永远不需要 “同步行为”； 相反，您（开发人员）只需要为JavaScript的异步特性付诸行动-尤其是如何使用匿名回调和处理闭包。

例如，如果您要这样做：

function doSomething(arg) {
    var number = arg + 10; // for example
    var data = getDetail();
    data = JSON.parse(data);
    element.innerHTML = number + ': ' + data.name;
}

function getDetail() {
    var xhReq = new XMLHttpRequest();
    xhReq.open("POST", "ClientService.svc/REST/GetDetail", false); // bad!
    xhReq.send(null);
    return xhReq.responseText;
}

可以异步编写：

function doSomething(arg) {
    var number = arg + 10;
    getDetail(function(data) {
        data = JSON.parse(data);
        element.innerHTML = number + ': ' + data.name;
    });
}

function getDetail(cb) {
    var xhReq = new XMLHttpRequest();
    xhReq.open("POST", "ClientService.svc/REST/GetDetail", true);
    xhReq.onreadystatechange = function() {
        if (xhReq.readyState == 4) cb(xhReq.responseText);
    }
    xhReq.send(null);
}

注意在异步示例中，您的内部回调函数（仅在网络请求完成后才执行）仍然可以访问外部函数的number变量。 这是因为JavaScript具有静态作用域 -换句话说，当您声明一个函数时，该函数将永久访问包含该函数的任何函数的变量。

Answer 2

通常看起来像这样：

var xhReq = new XMLHttpRequest();
xhrReq.onreadystatechange = function() {
  if (this.readyState != 4) return;
  if (this.status != 200) ...process error...

  var serverResponse = JSON.parse(xhReq.responseText);
  ... process the response ...
}    
xhReq.open("POST", "ClientService.svc/REST/TestHtmlSend", true);
xhReq.send(null);