question:1450921794

人力検索 javascript

q.hatena.ne.jp
例えば、はてなのidを選択して、質問回数と回答回数を取得して、テキストエリアに入れる場合。

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://raw.github.com/padolsey/jQuery-Plugins/master/cross-domain-ajax/jquery.xdomainajax.js"></script>
<script>
function get_hatena_profile(uid) {
  $("#status").text("取得中…");
  $.ajax({
    url: 'http://q.hatena.ne.jp/' + uid,
    type: 'GET',
    dataType: 'html',
    timeout: 30000,
    success: function(data){
      var work = document.createElement("DIV");
      work.innerHTML = data.responseText;
      var n_q = work.querySelector("#usertable tr:nth-child(2) td:nth-child(1)");
      var n_a = work.querySelector("#usertable tr:nth-child(2) td:nth-child(2)");
      $("#n_q").val(n_q.textContent);
      $("#n_a").val(n_a.textContent);
      $("#status").text("");
    },
    error: function(xhr, status, error){
      alert("ERROR !");
      console.log("ERROR: " + error);
    }
  });
}

$(function() {
  $("#form").on("submit", function() {
    $("[name=uid]:checked").each(function() {
      get_hatena_profile(this.value);
    });
    return false;
  });
});
</script>
</head>

<body>
<form id="form">
<span class="label">user</span>
<ul>
<li><input name="uid" type="radio" value="a-kuma3">a-kuma3
<li><input name="uid" type="radio" value="au43ur">au43ur
</ul>
<input type="submit" value="submit">
<span id="status"></span>
</form>
質問回数：<input type="text" id="n_q"><br>
回答回数：<input type="text" id="n_a"><br>
</body>

</html>

「サーバにアクセスし」の内容次第だけれど、やりたいのはこういうことじゃないのかなー、と思ったり。
ローカルな HTML ファイルでも動いちゃう（Firefox で確認）。



クロスドメイン制約を突破するために使ったのは、このライブラリ。
https://github.com/padolsey-archive/jquery.fn/tree/master/cross-domain-ajax
＃ 自分で書くと色々と面倒なので

前に使ったときには中を見てなかったけど、YQL を使ってるんだ。
https://developer.yahoo.com/yql/

xpath="*" で、format=xml を指定すると、results タグの下がクエリ先のページがまるっと入ってる。


xpath 指定で特定の要素を抜くんだったら、直接 YQL を使って json で取得した方が良いことに気付いたりもする　(´・ω・｀)