2016-04-08 10 views
0

wordpressによって提供されたRSSフィードを使用して、WordPressブログの投稿をリモートWebサイトに表示しようとしています。しかし、もちろん、私はCORSに乗ろうとすることに対処しなければならない。したがって、私は現在PHPでXML to JSONプロキシサーバーを作成しようとしており、this resource as a guideを使用しています。XMLからJSONプロキシサーバーにXMLフィードを取得しない

Here's how I have my HTML set up for the output:

<div id="output"></div> 

The ajax to call the PHP proxy:

// my test XML feed with only one post for now 
var url = "http://www.intecllc.net/wp/feed/"; 

// AJAX request 
var xhr = (window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")); 
xhr.onreadystatechange = XHRhandler; 
xhr.open("GET", "xmlproxy.php?url=" + escape(url), true); 
xhr.send(null); 

// handle response 
function XHRhandler() { 
    if (xhr.readyState == 4) { 
     // parse response as JSON 
     var json; 
     if (JSON && JSON.parse) { 
      json = JSON.parse(xhr.responseText); 
     } 
     else { 
      eval("var json = " + xhr.responseText); 
     } 
     Display(json); 
     xhr = null; 
    } 
} 

// display post(s) 
function Display(data) { 
    var output = document.getElementById("output"); 
    Show("Data from URL: "+url); 

    if (data && data.item) { 
     if (data.item.length) { 
      // multiple statuses 
      for (var i=0, sl=data.item.length; i < sl; i++) { 
       Show(data.item[i]); 
      } 
     } 
     else { 
      // single status 
      Show(data.item); 
     } 
    } 

    // display item 
    function Show(item) { 
     if (typeof item != "string") { 
      item = item.title + ": " + item.description; 
     } 
     var p = document.createElement("p"); 
     p.appendChild(document.createTextNode(item)); 
     output.appendChild(p); 
    } 
} 

The PHP proxy code (The proxy will fetch the contents of the passed URL as a string, parse it as XML and convert it to JSON. The JSON string will be returned to the calling JavaScript process.):

<?php 

ini_set('display_errors', false); 
set_exception_handler('ReturnError'); 
$r = ''; 
$url = (isset($_GET['url']) ? $_GET['url'] : null); 

if ($url) { 
    // fetch XML 
    $c = curl_init(); 
    curl_setopt_array($c, array(
     CURLOPT_URL => $url, 
     CURLOPT_HEADER => false, 
     CURLOPT_TIMEOUT => 10, 
     CURLOPT_RETURNTRANSFER => true 
    )); 
    $r = curl_exec($c); 
    curl_close($c); 
} 

if ($r) { 
    // XML to JSON 
    echo json_encode(new SimpleXMLElement($r)); 
} 
else { 
    // nothing returned? 
    ReturnError(); 
} 

// return JSON error flag 
function ReturnError() { 
    echo '{"error":true}'; 
} 

残念ながら、それはフィードをつかみ、それを解析していません。誰かがトラブルシューティングを手助けできますか?ありがとうございました。

+0

これは、XHRリクエスト(jQueryはうまくいく)を扱うライブラリを試すことから始めます。 XHRは、ブラウザによって異なる方法で実装されています。 – Hafenkranich

+0

'$ r = curl_exec($ c);の直後の' var_dump($ r); 'を試してください – Hafenkranich

+0

JavaScriptはデフォルトでjsonを解析しないと思っていました。私はここで間違っていますか?あなたの 'Display(data)'の始めにconsole.log(data)を実行します。デベロッパーコンソールの出力は何ですか? – Hafenkranich

答えて

3

あなたの出力JSONはあなたが期待しているものではないと思います。 私はここではitemという名前のキーは、したがって、あなたのif条件if (data && data.item) {は満足できないルート要素ですぐに存在しないことをはっきりと見ることができます

{ 
    "@attributes": { 
     "version": "2.0" 
    }, 
    "channel": { 
     "title": "InTec, LLC", 
     "link": "http://www.intecllc.net/wp", 
     "description": "tagline here", 
     "lastBuildDate": "Fri, 04 Mar 2016 17:47:52 +0000", 
     "language": "en-US", 
     "generator": "http://wordpress.org/?v=4.2.7", 
     "item": { 
      "title": "InTec Welcomes New Director of Contracts", 
      "link": "http://www.intecllc.net/wp/intec-welcomes-new-director-of-contracts/", 
      "comments": "http://www.intecllc.net/wp/intec-welcomes-new-director-of-contracts/#comments", 
      "pubDate": "Fri, 04 Mar 2016 17:47:52 +0000", 
      "category": {}, 
      "guid": "http://www.intecllc.net/wp/?p=101", 
      "description": {} 
     } 
    } 
} 

同じフィードから、次のJSONを取得します。

ここ

変更javascriptのだ、

// my test XML feed with only one post for now 
    var url = "http://www.intecllc.net/wp/feed/"; 

    // AJAX request 
    var xhr = (window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")); 
    xhr.onreadystatechange = XHRhandler; 
    xhr.open("GET", "index.php?url=" + escape(url), true); 
    xhr.send(null); 

    // handle response 
    function XHRhandler() { 
     if (xhr.readyState == 4) { 
      // parse response as JSON 
      var json; 
      if (JSON && JSON.parse) { 
       json = JSON.parse(xhr.responseText); 
      } else { 
       eval("var json = " + xhr.responseText); 
      } 
      Display(json); 
      xhr = null; 
     } 
    } 

    // display post(s) 
    function Display(data) { 
     var output = document.getElementById("output"); 
     Show("Data from URL: " + url); 

     if (data && data.channel.item) { 
      if (data.channel.item.length) { 
       // multiple statuses 
       for (var i = 0, sl = data.channel.item.length; i < sl; i++) { 
        Show(data.channel.item[i]); 
       } 
      } else { 
       // single status 
       Show(data.channel.item); 
      } 
     } 

     // display item 
     function Show(item) { 
      if (typeof item != "string") { 
       item = item.title + ": " + item.description; 
      } 
      var p = document.createElement("p"); 
      p.appendChild(document.createTextNode(item)); 
      output.appendChild(p); 
     } 
    } 

希望、これはあなたがまた

探しているものである、あなたは

echo json_encode(new SimpleXMLElement($r)); 

とyoutはPHPコードに次のように交換する必要があります
echo json_encode(simplexml_load_string($r, 'SimpleXMLElement', LIBXML_NOCDATA)); 

<![CDATA[ノード

+0

ありがとうございます。私はそれをチェックして、報告します! – redshift

+0

私はChromeを使用していますが、私のdevconsoleではGetのリクエストがそうであることがわかります:「https://mydomainhere.com/xmlproxy.php?url=https%3A//blogs.myotherdomainhere.com/blogs」 /%3Ffeed%3Drss2 "となります。コンソールの次の行に次のようなメッセージが表示されます。Uncaught TypeError:Cannaotが未定義の 'item'プロパティを読み取りました。 – redshift

+1

上記のPHPスクリプトの出力が同じであることを確認できますか? (最初のコードブロック) –

関連する問題