使用 jQuery 读取 XML 数据答案

【问题标题】：Reading XML data with jQuery使用 jQuery 读取 XML 数据
【发布时间】：2012-11-26 18:56:11
【问题描述】：

我想从 Google 的 Suggest API 中提取数据并将其显示在我的页面中（可能通过 append 函数）。我对解析 JSON 而不是 XML 很有信心，而且据我所知，Google 没有在 JSON 中提供这个 API。

我该怎么做？ 或者，有谁知道我如何在 JSON 中访问这个 API？如果有人这样做，那就太棒了！

API地址为：http://google.com/complete/search?q=google&output=toolbar

我当前的代码是：

        $.ajax({
            type: "GET",
            url: "http://google.com/complete/search?q=google&output=toolbar",
            dataType: "xml",
            crossDomain: true,
            xhrFields: { withCredentials: true },
            success: function(xml) {
                $(xml).find('toplevel').each(function(){
                    var title = $(this).find('suggestion').text();
                    $('<b>'+title+'</b>').appendTo('#page-wrap');
                });
            }
        });

我得到的错误是：XMLHttpRequest cannot load http://google.com/complete/search?q=wixiy&output=toolbar. Origin is not allowed by Access-Control-Allow-Origin.

【问题讨论】：

您可以像在 DOM 中一样在 XML 文档中 .find() 数据。

标签： javascript jquery xml json

【解决方案1】：

当然，jQuery CAN 解析 XML。查看the $.ajax docs page - 它说

转换器（添加 1.5） 数据类型到数据类型转换器的映射。每个转换器的值都是一个函数，它返回转换后的响应值。

所以您的 ajax 调用应该只设置该设置。

$.ajax({ url: "apiUrl", converters: "text xml" });

【讨论】：

我之前尝试过，但在调试控制台中出现错误。有什么想法吗？
嗯...你绝对不应该 :D 好吧，你能把你的整个调用发布到 $.ajax() 和错误本身吗？
可能是常见的跨站 AJAX 失败。
@Blazemonger 这是我遇到的跨域 AJAX 故障，所以我最终放弃了代码。有什么想法吗？
将$.ajax 调用的crossDomain 设置设为“true”？和/或... $.ajax({ xhrFields: { withCredentials: true } });

【解决方案2】：

由于 API 不支持 JSON，因此您不能仅在 javascript 中执行此操作，因为默认情况下它不允许跨域请求。因此，您将需要一个中间服务器端页面，例如 PHP 文件，该文件执行来自 google 的 xml 请求并将 xml 传递给您。

Javascript

$.ajax({
    type: "GET",
    url: "getData.php?q=google&output=toolbar",
    dataType: "xml",
    success: function(xml){
        $(xml).find("CompleteSuggestion").each(function(){
            var suggestion = $( this ).find( 'suggestion' ).attr( 'data' );
            var num_queries = $( this ).find( 'num_queries' ).attr( 'int' );
            alert( suggestion + ' has ' + num_queries + ' queries.' );
        });
    }
});

PHP (getData.php) - 此文件在同一台服务器上

$query = $_GET[ 'q' ];
$out = $_GET[ 'output' ];

header('Content-Type: text/xml');
echo file_get_contents('http://google.com/complete/search?q='.$query.'&output='.$out);

...否则，您可以直接json_encode 并将JSON发送到您的脚本，也可以轻松解析。

希望这会有所帮助。

【讨论】：

这个解决方案会不会很慢？
我不这么认为，但不能肯定地说。您在您的环境中对其进行测试并自行决定。在我的 m/c 上很适合我。

【解决方案3】：

你可以使用 DomParser https://developer.mozilla.org/en-US/docs/DOM/DOMParser

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");

【讨论】：