XMLHttpRequestのレスポンスについて

###発生している問題・エラーメッセージ
jQueryの$.ajaxを利用した場合はサーバー側で設定されているHTMLデータがそのまま返ってくるが、ネイティブなJavaScriptのXMLHttpRequestで行うと、<!doctype html>以下全てのHTMLが返ってきてしまう。

例）
サーバーが設定している返り値は

html
1<ul>
2  <li>リスト1</li>
3  <li>リスト2</li>
4  <li>リスト3</li>
5</ul>

そのうえでjQueryの$.ajaxを利用した場合はそのまま<ul>～</ul>が返ってくる。
これが望んでる形です。

しかしネイティブなJavaScriptのXMLHttpRequestで行うと、既に説明してます通り<!doctype html>以下全てのHTMLが返ってきてしまうのです。

この原因が分からず詰まっています。

プロジェクト内容が、jQuery排除のため、今とりあえずネイティブなJavaScriptで書いているという経緯です。
※他のライブラリを使ってもajaxはいけるというのは分かってるのですが、ちょっと勉学の為ネイティブなJavaScriptで書いてみたところこのような問題にあたったので、お聞きできればと思いました。

###参考のソースコード

javascript
1const xhr = new XMLHttpRequest();
2xhr.onreadystatechange = () => {
3  if (xhr.readyState === 4 && xhr.status === 200) {
4    // 何か処理
5  }
6}
7xhr.open('GET', /hoge.html);
8xhr.send();

html
1<!-- hoge.html -->
2<ul>
3  <li>リスト1</li>
4  <li>リスト2</li>
5  <li>リスト3</li>
6</ul>

このような形のものなのですが、どなたかご教示いただけると幸いです。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

参照の仕方をまちがっているのでは？

javascript
1
2window.onload=function(){
3  const xhr = new XMLHttpRequest();
4  xhr.onreadystatechange = () => {
5    if (xhr.readyState === 4 && xhr.status === 200) {
6      console.log(xhr.responseText);
7    }
8  }
9  xhr.open('GET','/hoge.html');
10  xhr.send("");
11}
12
13

投稿2017/11/16 11:09

yambejp

総合スコア114775

souta-haruran

2017/11/17 01:34

> yambejpさんありがとうございます。確認してみたら、欲しいデータで返ってきてました。サーバーとして返すデータは同一のものであっても、jQueryの`$.ajax`と`XMLHttpRequest`とでは返ってくるデータ値が異なってしまうのかと思い込んでしまいました。。しっかり確認することと、もっとajaxへの理解を深めたいと思います。ありがとうございました。

行動規範の内容に同意します