質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

9230閲覧

JavascriptでローカルにあるXMLファイルを読み込みたい

entaro12345

総合スコア75

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/03/24 11:13

前提・実現したいこと

JavscriptのXMLHttpRequestを使用してローカルにあるXMLファイルの読み込みがしたいです。
操作としては、ローカルにあるXMLファイルを選択してもらい、そのファイルを読み込んだ後に、
データをAjax通信で渡して通信先の処理で使用したいです。

お力を貸してください。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> 6 <title>XML</title> 7 <script type="text/javascript" src="./js/jquery-1.11.1.js"></script> 8 </head> 9 <body> 10 <table> 11 <tr> 12 <th>XMLファイル</th> 13 <td><input type="file" id="sFile" accept=".xml" /></td> 14 </tr> 15 </table> 16 <input type="button" id="btnReadFile" value="データ読込" /> 17 </body> 18 <script src="./js/data.js"></script> 19</html>

Javascript

1$('#btnReadFile').on('click', function() { 2 3 // XMLファイルの情報取得 4 var sFile = document.querySelector('#sFile'); 5 6 // xmlファイルの読み込み 7 var xmlHttp = new XMLHttpRequest(); 8 9 xmlHttp.onreadystatechange = function() { 10 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 11 var ele = xmlHttp.responseXML.documentElement; 12 var eData = ele.getElementsByTagName('item')[0]; 13 14 $.ajax({ 15 type: 'POST', 16 url: '../App/upd_stop_info.php', 17 data: { 18 data : eData 19 }, 20 dataType: 'json', 21 timeout: 3000, 22 }) 23 .done( 24 // 通信成功時 25 function (data) { 26 if (0 < data.res) { 27 alert('データを読み込みました。'); 28 } else { 29 alert('データの読み込みに失敗しました。'); 30 } 31 }).fail( 32 function (XMLHttpRequest, textStatus, errorThrown) { 33 alert('通信エラーが発生しました。'); 34 } 35 ); 36 } 37 } 38 39 xmlHttp.open('GET', sFile.value); 40 xmlHttp.send(); 41});

XML

1<?xml version="1.0" encoding="utf-8"?> 2<Items> 3 <Item>りんご、みかん、すいか</Item> 4</Items> 5 6

試したこと

サーバー上に仮のファイルを置いてそのパスを指定すれば問題なく読み込めるため、
type="file"から取得したデータの処理が誤っていることが分かっております。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

JavscriptのXMLHttpRequestを使用してローカルにあるXMLファイルの読み込みがしたいです。

ローカルファイルをXHRで読み込むことはできません。
提示されているようにローカルファイルのXMLのDOM要素が欲しいとすると、FileReader でファイルを読んで文字列化して、DOMParser でXMLのパーズをします。

ただ、$.ajax() の送信部でDOM要素をdata: eData として指定していますが、本当は何を送りたいのか意図がよくわかりません。

投稿2021/03/24 13:49

int32_t

総合スコア21695

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

entaro12345

2021/03/25 00:06

ご回答ありがとうございます。 やはりローカルのファイルをXHRで読み込むことはできないんですね。 頂いた情報で試してみます。
entaro12345

2021/03/25 08:51

頂いた回答通り、FileReaderで読み込んでその後、DOMParserを使用することでやりたいことができました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問