jQueryを用いて単にhtmlを読み込み表示する

これは簡単です。
http://yokano-jp.blogspot.jp/2013/10/jquery-html_10.html
より引用します

index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>jQuery load() sample</title>
 </head>
 <body>
  <h1>ここに外部 HTML ファイルを表示します</h1>
  <div id="page"></div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="load.js"></script>
 </body>
</html>

external.html

<h2>外部ファイル</h2>
<p>この文章は external.html に記載された外部 HTML の文章です</p>

load.js

$(function() {
 $('#page').load('external.html');
});

簡単ですよね

jQueryのAjaxを使って外部HTMLの一部を抜き出し挿入する

ええ、違うんです、やりたいのはそうじゃない。そもそも、そのexternal.html、HTMLとして成立してねーだろ。

じゃあどうするか？こうじゃ。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQueryのAjaxを使って外部HTMLの一部を抜き出し挿入する</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="load.js"></script>
    </head>
    <body>
        <h1>ここに外部 HTML ファイルを表示します</h1>
        <div id="page">dst</div>
        <div id="page2">dst</div>
    </body>
</html>

external.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>external-ありきたりとは</title>
</head>
<body>
    <div id="sub">
        <h2>外部ファイル</h2>
        <p>この文章は external.html に記載された外部 HTML の文章です</p>
    </div>
    <div id="sub2">
        <h2>外部ファイル</h2>
        <p>これはありきたりな文章です</p>
    </div>
</body>
</html>

load.js

$(function() {
    $.ajax('external.html', {
        timeout : 1000, // 1000 ms
        datatype:'html'
    }).then(function(data){
        var out_html = $($.parseHTML(data));//parse
        $('#page').empty().append(out_html.filter('#sub')[0].innerHTML);//insert
        $('#page2').empty().append(out_html.filter('#sub2')[0].innerHTML);//insert
        //var sub_html = out_html.filter(function(index) {
        //    return $(this).attr("id") === "sub";
        //})[0].innerHTML;//extract
        //var sub2_html = out_html.filter(function(index) {
        //    return $(this).attr("id") === "sub2";
        //})[0].innerHTML;//extract
        //$('#page').empty().append(sub_html);//insert
        //$('#page2').empty().append(sub2_html);//insert
    },function(jqXHR, textStatus) {
        if(textStatus!=="success") {
            var txt = "<p>textStatus:"+ textStatus + "</p>" +
                "<p>status:"+ jqXHR.status + "</p>" +
                "<p>responseText : </p><div>" + jqXHR.responseText +
                "</div>";
            $('#page').html(txt);
            $('#page2').html(txt);
        }
    });
    // $('#page').load('external.html');
});

jQueryは楽でいいですね・・・。それに引き換え、C++のboost.asioは(ry。

ajaxに渡すパラメータは最低限timeoutとdatatypeだけあれば十分です。
ajaxのcallbackはdone()/error()を使う方法もありますが、他言語との共通性の観点からthen()を使います。C++にも標準にfuture/thenとかpromiseとか入るらしいね、やっと。
then()の第1引数が成功した時、第2引数が失敗した時に呼ばれる関数を登録するところです。

thenの第一引数に登録した関数の第一引数dataにはhtmlが文字列として入ってきます。どういうわけかlocalでテストするとXMLDocumet型になるんですが。

でそれを取り出すのに

var h = $("#sub", $(data));
var h = $("#sub", $(data)).html();
var h = $("#sub", $($.parseHTML(data)));
var h = $($.parseHTML(data)).find('#sub').text()

とかとかいろいろやりましたが全部ダメです

じゃあどうするかというと、$.filter()関数をつかえばいいです。~~こいつは条件を満たした(引数に指定する関数がtrueを返す)ものだけを~~第一引数にidとかで指定かければ、それに合うものだけjQuery特有のあのarrayもどきなobjectに入れて返します。

まともなhtmlを書いていればidは重複しないので0番目の要素がほしい部分になります。

あとはそのinnerHtmlを挿入すればいいです。

GitHubに上げた

はい。デモページは

余談

@yumetodo それ、jQuery使わないで自分でXHR生で使った方が早かったんじゃね？
— Chikuzen (@mtfmk) 2016, 3月 10

いいんですよ！私はthenって書きたかったんだ！

参考リンク

jQuery.ajax()で取得したHTMLの一部を抜き出す方法: 小粋空間 (さっぱり動かなかった)
javascript - Setting timeout jQuery.load() - Stack Overflow
jquery - ajax timeout callback function - Stack Overflow
javascript - jQuery() not finding elements inside of results from jQuery.parseHTML() - Stack Overflow(質問者自ら書いている回答に$.filter()使えとあります。これのおかげで救われました)
filter(fn) - jQuery 日本語リファレンス