🧊

ページ遷移なしでコンテンツを更新したいとき

どう実装するのがベターなんやろうと思って。
まず最初に思いついたのが、jQuery Mobileです。

というわけで、どういう実装になってるか調べたのでそのメモ。

コード

参考:code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js

↑のリンクのコードの、4292行あたり。

$.ajax({
  url: fileUrl,
  type: settings.type,
  data: settings.data,
  contentType: settings.contentType,
  dataType: "html",
  success: function( html, textStatus, xhr ) {
    //pre-parse html to check for a data-url,
    //use it as the new fileUrl, base path, etc
    var all = $( "<div></div>" ),

      //page title regexp
      newPageTitle = html.match( /<title[^>]*>([^<]*)/ ) && RegExp.$1,

      // TODO handle dialogs again
      pageElemRegex = new RegExp( "(<[^>]+\\bdata-" + $.mobile.ns + "role=[\"']?page[\"']?[^>]*>)" ),
      dataUrlRegex = new RegExp( "\\bdata-" + $.mobile.ns + "url=[\"']?([^\"'>]*)[\"']?" );


    // data-url must be provided for the base tag so resource requests can be directed to the
    // correct url. loading into a temprorary element makes these requests immediately
    if ( pageElemRegex.test( html ) &&
        RegExp.$1 &&
        dataUrlRegex.test( RegExp.$1 ) &&
        RegExp.$1 ) {
      url = fileUrl = path.getFilePath( $( "<div>" + RegExp.$1 + "</div>" ).text() );
    }
    //dont update the base tag if we are prefetching
    if ( base && ( typeof options === "undefined" || typeof options.prefetch === "undefined" )) {
      base.set( fileUrl );
    }

    //workaround to allow scripts to execute when included in page divs
    all.get( 0 ).innerHTML = html;
    page = all.find( ":jqmData(role='page'), :jqmData(role='dialog')" ).first();

    //if page elem couldn't be found, create one and insert the body element's contents
    if ( !page.length ) {
      page = $( "<div data-" + $.mobile.ns + "role='page'>" + ( html.split( /<\/?body[^>]*>/gmi )[1] || "" ) + "</div>" );
    }

    if ( newPageTitle && !page.jqmData( "title" ) ) {
      if ( ~newPageTitle.indexOf( "&" ) ) {
        newPageTitle = $( "<div>" + newPageTitle + "</div>" ).text();
      }
      page.jqmData( "title", newPageTitle );
    }

    //rewrite src and href attrs to use a base url
    if ( !$.support.dynamicBaseTag ) {
      var newPath = path.get( fileUrl );
      page.find( "[src], link[href], a[rel='external'], :jqmData(ajax='false'), a[target]" ).each(function() {
        var thisAttr = $( this ).is( '[href]' ) ? 'href'