XMLHttpRequest で レスポンスを dom として html をパースする

xhr のリクエストでレスポンスをHTMLとして解釈する。

xhr で取得したHTMLをDOMとしてxpath/querySelectorしたい

var dom ;
xhr = new XMLHttpRequest()
xhr.responseType  = "document"
xhr.onload = function(e){ dom = e.target.responseXML;console.log(e.target.responseXML.title)}
xhr.open("get", "/" )
xhr.send()

ポイントは response type を設定すること。コレを設定するのが一番楽に解釈できる。

ていうか、コレ便利だわ。

dom として HTML parser に強制解釈させられるなら、JSON でレスポンス不要になるね

jsonだすより、HTMLでレスポンス書いて、Xpath/CSS Selector書いたほうが楽じゃんね。

iOS 9 で確認

iOS シミュレータの iOS 9 で確認したが、ちゃんと使うことが出来た。

iOS が対応してるなら、安心して使えますね。MDNにはSafari Mobile の対応状況が「？」になってるけどね。使えるんだから使おう。

どうせなら

response type で css とか js や image も使えるともっと便利なんだが。。 いちいちscript src / link rel style / new Image src を作るの面倒くさい

手軽に使おう ( 2016-06-04 追記)

window.get  = function ( url, load){
  xhr = new XMLHttpRequest()
  xhr.responseType  = "document"
  xhr.onload = function(e){ var dom = e.target.responseXML ;  load.call(dom)  }
  xhr.open("get", url )
  xhr.send()
}

window.get( "/", function(){ console.log(this.querySelector("body")) } );

うん！楽ちん！

参考資料

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest