用AJAX加载和返回数据以后使用

我想写一个简单的函数来从JavaScript中加载一个数组的XML。拨打$.ajax(...)时，我已成功地将AJAX结果发送至使用success:字段的功能。用AJAX加载和返回数据以后使用

另外，我注意到，功能$.ajax(...)的返回值是一个Object，其中有场responseText和responseXML（我会很高兴的使用）。但是，尽管我可以在控制台的树中看到它们，但试图通过.responseText访问它们不起作用（因此打印undefined，如果我尝试查找某些垃圾字符串.this_does_not_exist）也是如此。

我打算做几乎与几个不同的XML文件相同，我想用代码来做到这一点。我不满意的原因是success:参数将结果踢到一个单独的函数，因为我可能会多次使用这些数据，但只需要加载一次。我试图分开加载和使用XML，以便它不被加载多次。

你能告诉我为什么responseText显示出来，当我输出xml_ret，但无法访问xml_ret.responseText？

非常感谢您的帮助和耐心。

注：从同一目录中加载test.xml，您需要启动Chrome或铬是这样的：

chromium-browser --allow-file-access-from-files

的test.html：

<html> 
<head> 
<script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

    <script type="text/javascript"> 
     function print_XML(xml) 
     { 
     console.log("in printXML"); 
     console.log(xml); 

     $(xml).find("point").each(function() 
     { 
     var loaded_row = [ parseInt($(this).attr("number_protein_groups")), parseInt($(this).attr("log_likelihood")) ]; 
     console.log(loaded_row); 
     }); 
     } 

     function load_and_print_XML(fname) 
     { 
    console.log("in load_and_print_XML"); 

     xml_ret = $.ajax({ 
     type: "GET", 
     url: fname, 
     dataType: "xml", 
     success: print_XML 
     }); 

    console.log("xml_ret"); 
    console.log(xml_ret); 
    console.log(xml_ret.responseText); 
     } 

    </script> 

</head> 
    <body> 
    <script type="text/javascript"> 
     xml_data = load_and_print_XML("test.xml"); 
     /* do something with xml_data here */ 
    </script> 
    </body> 
</html>

test.xml

<?xml version="1.0" encoding="utf-8" ?> 
<results> 
    <replicate_result graph_filename="yeast_1.pivdo"> 
    <point number_protein_groups="10" log_likelihood="20"/> 
    <point number_protein_groups="20" log_likelihood="40"/> 
    <point number_protein_groups="40" log_likelihood="60"/> 
    <point number_protein_groups="50" log_likelihood="50"/> 
    <point number_protein_groups="60" log_likelihood="55"/> 
    </replicate_result> 
</results>

我的控制台：

in load_and_print_XML 
test.html:30xml_ret 
test.html:31 
Object 
abort: function (a){a=a||"abort",p&&p.abort(a),w(0,a);return this} 
always: function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this} 
complete: function(){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this} 
done: function(){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this} 
error: function(){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this} 
fail: function(){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this} 
getAllResponseHeaders: function(){return s===2?n:null} 
getResponseHeader: function (a){var c;if(s===2){if(!o){o={};while(c=bG.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c} 
isRejected: function(){return!!i} 
isResolved: function(){return!!i} 
overrideMimeType: function (a){s||(d.mimeType=a);return this} 
pipe: function (a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()} 
progress: function(){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this} 
promise: function (a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a} 
readyState: 4 
responseText: "<?xml version="1.0" encoding="utf-8" ?>↵<results>↵ <replicate_result graph_filename="yeast_1.pivdo">↵ <point number_protein_groups="10" log_likelihood="20"/>↵ <point number_protein_groups="20" log_likelihood="40"/>↵ <point number_protein_groups="40" log_likelihood="60"/>↵ <point number_protein_groups="50" log_likelihood="50"/>↵ <point number_protein_groups="60" log_likelihood="55"/>↵ </replicate_result>↵</results>" 
responseXML: Document 
setRequestHeader: function (a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this} 
state: function(){return e} 
status: 200 
statusCode: function (a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this} 
statusText: "success" 
success: function(){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this} 
then: function (a,b,c){i.done(a).fail(b).progress(c);return this} 
__proto__: Object 
test.html:32undefined 
test.html:9in printXML 
test.html:10 
Document 
<results> 
<replicate_result graph_filename="yeast_1.pivdo">…</replicate_result> 
</results> 
test.html:15[10, 20] 
test.html:15[20, 40] 
test.html:15[40, 60] 
test.html:15[50, 50] 
test.html:15[60, 55]

来源

2012-04-13 user

的问题：

你能告诉我为什么responseText的显示出来，当我输出xml_ret，但不能访问由 xml_ret.responseText？

这是因为当你做一个对象的console.log，例如在chrome中，它保持对控制台中对象的引用。如果对象发生变化，则这些更改将由Chrome控制台反映出来。

那么是什么发生的事情是，当你做：

console.log("xml_ret"); 
console.log(xml_ret); 
console.log(xml_ret.responseText);

Ajax请求还没有完成，这个responseText仍然尚未分配，这就是为什么它显示为未定义。但是，打印的xml_ret对象是对对象的引用，所以当ajax请求完成时，如果您要检查控制台上的值，它将具有“responseText”属性，因为它已被设置。

你可以看到，如果你调试代码，并在此行中添加断点：

console.log(xml_ret.responseText);

当在文件中查找xml_ret它不具备“responseText的”属性。

PS：我需要仔细阅读此评论。太迟了也认为：P

来源

2012-04-13 23:10:50 txominpelu

+1正确的人，另一个用户谁了解它！ – noob 2012-04-13 23:15:51

谢谢！事实上，当你试图访问它的属性时，chrome的控制台似乎会评估这个对象。如果在ajax请求完成之前调试并尝试查看xml_ret属性，则responseText不会出现，并且以后不会更改。但是，如果您第一次尝试访问属性是在ajax请求完成后显示responseText。 – txominpelu 2012-04-13 23:17:23

真棒，谢谢。我将ajax参数更改为'async：false'，并且工作正常。 – user 2012-04-19 04:17:31

的问题是，控制台将更新对象的，如果他们得到更新，但不串的。

所以，如果你调用ajax调用函数将直接返回一个对象，但responseText将是未定义的，因为调用还没有完成。

所以，如果你想使用responseText你应该这样做成功：

function print_XML(xml, s, jqXHR) { // there are 3 arguments past the third one is the same as the return of $.ajax 
    console.log("in printXML"); 
    console.log(xml); 

    $(xml).find("point").each(function() 
    { 
    var loaded_row = [ parseInt($(this).attr("number_protein_groups")), parseInt($(this).attr("log_likelihood")) ]; 
    console.log(loaded_row); 
    }); 

    console.log(jqXHR); 
    console.log(jqXHR.responseText); // now it works! 
}

来源

2012-04-13 22:53:44 noob

这可能对他稍后有用，但他需要帮助的问题是与xml_ret.responseText奇怪的行为。 – 2012-04-13 22:55:49

micha，我的评论是在编辑之前添加的，当时你只是在谈论解析响应。你的更新文本更多的是主题，我同意在成功调用中处理它是正确的，但我不确定它只是一个时间问题，因为'console.log（xml_ret）'在*之前输出正确的值*它不能在'xml_ret.responseText'上这样做。 – 2012-04-13 23:14:06

啊，在阅读了user433831的回答之后，我看到了你所得到的。 +1给你们两个;你先解释它，但我认为其他答案更清楚。 – 2012-04-13 23:17:20

responseText的出现在你的输出xml_ret，因为这是AJAX功能的jQuery是如何工作的。这是获取回调返回

成功（数据，textStatus，jqXHR）

所以，当你试图抓住xml_ret的属性它失败，因为它仅仅是XML数据，而不是一个对象。第三个参数是你期望的，它也是稍微修改的，因为它是一个jQuery的。

来源

2012-04-13 23:04:52 GillesC

这不是真的;根据文档，jqXHR对象从AJAX调用中返回 - 您可以在上面包含的调试输出中看到它。 – 2012-04-13 23:09:46

啊是啊我的坏，在文档的顶部太该死，我应该去睡觉:) – GillesC 2012-04-13 23:12:35

用AJAX加载和返回数据以后使用

回答

相关问题