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);

编写XHR同步行为的其他方法

2 个答案: