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中的那个）。 p>

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

在您的情况下，只要XML文件不是很大，并且在初始加载页面期间getxml()和donwloadUrl()的唯一时间，您可能会使用同步请求。。我已经继续并重写你写的downloadUrl()以接受第三个参数，即一个名为async的布尔值。当它为真时，请求将异步完成，当它为假时，它将同步完成。

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实践，可以带来更好的用户端体验。

更改downloadurl（）以返回xml

1 个答案: