javascript - 更改 downloadurl() 以返回 xml

Question

您好，我是 javascript 的新手，可以使用一些帮助来修改此 downloadUrl 函数以返回调用的 xml 文档。

function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

这是我想如何使用该函数的示例:

    var url = 'http://127.0.0.1:8080/markers.xml';
    function getxml(url){
      var xml = downloadUrl(url, function(data) {
      });
      return xml
    };

感谢您的帮助。

Answer 1

您在问题中编写的代码的主要问题之一是同步请求和异步请求之间可能存在混淆。同步只是意味着在请求完成之前，AJAX 调用之后的任何代码都不会运行。异步意味着您的 AJAX 调用后的 JavaScript 代码将运行，然后一旦请求完成，它就会调用返回您为请求对象提供的函数(位于 request.onreadystatechange 的函数)。

同步请求和异步请求各有优势，要知道使用哪种方法可能会很棘手。通常，您希望避免同步请求，因为它们实质上会停止整个 HTML 文档的加载过程。优势？它们不需要任何回调，这可能会让人感到困惑。异步确实需要回调，但不会延迟 HTML 文档的加载。

在您的情况下，您可能会使用同步请求，只要 XML 文件不是很大，并且只有 getxml() 和 donwloadUrl() 是在页面的初始加载期间。我已经继续并重写了您编写的 downloadUrl() 以接受第三个参数，该参数是一个名为 async 的 bool 值。为true时，请求异步完成，为false时，同步完成。

function downloadUrl(url, callback, async) {
  var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

  if (async) {
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request);
      }
    };
  }

  request.open('GET', url, true);
  request.send(null);

  if (!async)
    return request;
}

/* 
Submit a synchronous request to "markers.xml" callback = null because synchronous requests don't need callbacks.
*/
var xml1 = downloadUrl("markers.xml", null, false).responseText;
console.log(xml1);

/* 
Submit an asynchronous request to "markers.xml"

xml2 would equal "undefined" after the function call because asynchronous requests use callbacks. Instead, the response will be passed to the callback given in the function call.
*/
var xml2;
downloadUrl("markers.xml", function(xhr) {
  // Now xml2 would be the value of the resource requested
  // so put the code that accesses the value inside the callback,
  // or pass the data to another function from within the callback.
  xml2 = xhr.responseText;
  console.log(xml2);
}, true);

现在 downloadUrl() 支持这两种类型的请求，我们可以自由地为 getxml() 编写新代码。

同步:

var url = 'http://127.0.0.1:8080/markers.xml';
function getxml(url){
  var xml = downloadUrl(url, null, false);
  return xml.responseText;
};
var xmlData=getxml(url);
// Use xmlData here

异步:

var url = 'http://127.0.0.1:8080/markers.xml';
function getxml(url, callback){
  var xml = downloadUrl(url, callback, true);

};
getxml(url, function(xhr) {
    var xmlData=xhr.responseText;
    // Use xmlData here
}

我个人会在这里使用异步请求，因为它是一种更好的 JavaScript 实践，可以带来更好的用户端体验。