試験管のなかのコード :: OpenSocial JavaScript API にチャレンジ(4)</a>

Feb 27, 2008

[SNS] OpenSocial JavaScript API にチャレンジ(4)

外部サーバへの XMLHttpRequest アクセス

前回 iframe を使用して外部サーバにある HTML を表示できることが確認できたので、今回は XMLHttpRequest を使用して外部サーバにアクセスしてみる。

remoteaccess.xml

Orkut へのディプロイ方法は前回と同じ。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Remote Access">
    <Require feature="opensocial-0.7"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
      <body>
        <iframe src="http://www.in-vitro.jp/blog/entries/SNS/20080227_01/child.html"/>
      </body>
    ]]>
  </Content>
</Module>

child.html

remoteaccess.xml で指定した場所に設置。例) http://www.in-vitro.jp/blog/entries/SNS/20080227_01/child.html

<body>
<script type="text/javascript">
// <!--
var dataUrl = "/blog/entries/SNS/20080227_01/data.xml";

function start() {
  fetchData();
}

function fetchData() {
  var request = prepareHttpRequest();
  request.open("GET" , dataUrl , true);
  request.onreadystatechange = function() { 
    if (request.readyState == 4 && request.status == 200) { 
      var response  = request.responseXML;
      var messages = response.getElementsByTagName('message');
      var s = "<ul>";
      for(i = 0; i < messages.length; i++) {
        s += "<li>" + messages[i].firstChild.nodeValue + "</li>";
      }
      s += "</ul>";
      document.getElementById('main').innerHTML = s;
    }
  }
  request.setRequestHeader("Content-Type" , "text/xml");
  request.send(null);
}

function prepareHttpRequest(){
  if(window.ActiveXObject){
    try {
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        return new ActiveXObject("Microsoft.XMLHTTP");
      } catch (ex) {
          return null;
      }
    }
  } else if(window.XMLHttpRequest){
    return new XMLHttpRequest();
  } else {
    return null;
  }
}

start();
// -->
  </script>

  <div id="main"></div>
</body>

data.xml

child.html 内の JavaScript で指定した場所に設置。例) http://www.in-vitro.jp/blog/entries/SNS/20080227_01/data.xml

<?xml version="1.0" encoding="UTF-8" ?>
<data>
  <message>こんにちは。</message>
  <message>お元気ですか？</message>
  <message>私ですか？</message>
  <message>いえいえ、そんなに元気じゃないですよ。</message>
</data>

実行結果

外部サーバに XMLHttpRequest でアクセスして XML を取得し、表示することができた。

Posted in SNS | WriteBacks (1) |

Bookmark this on Delicious