ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」の使い方【Javascript】エラーチェックをする方法【Javascript】変数【Javascript】配列(Array)【Javascript】「DOM(Document Object Model)」の使い方【Javascript】関数 / Function【Javascript】条件分岐・繰り返し【Javascript】イベントハンドラー(Event Handler)【Javascript】文字の操作方法【Javascript】文字の検索方法【Javascript】スコープ【Javascript】ファイルの操作方法【Javascript】画像の操作方法【Javascript】情報を出力・チェックする方法【Javascript】ヒアドキュメントの使い方【Javascript】Built-in Object(ビルトインオブジェクト)【Javascript】ライブラリー / Library
Library
「Ajax」の使い方
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法
Reference
数字
【Javascrpt】計算に誤差が出る時の解決方法
ファイル読み込み
【Javascrpt】「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
イベント
【Javascrpt】ページ読み込み時に「Javascript」を実行する方法【Javascrpt】画像読み込みが完了してから、次の処理を実行する方法【Javascrpt】「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
【Javascrpt】HTMLタグの「class」属性値を取得、変更する方法【Javascrpt】「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法【Javascrpt】「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法【Javascrpt】「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法【Javascrpt】「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法【Javascrpt】「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法【Javascrpt】「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法【Javascript】「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する【Javascript】「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
【Javascript】Webページのタイトルを変更する方法【Javascript】「モニター」情報を取得する方法【Javascript】「ブラウザ」情報を取得する方法【Javascript】「ページ」情報を取得する方法【Javascript】「イベント」情報を取得する方法【Javascript】「マウス」情報を取得する方法
サイズ関連
【Javascript】要素の縦・横サイズを参照・変更する方法【Javascript】「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
【Javascript】スマートフォンからのアクセスを識別する方法





【Javascrpt】「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法


「XMLHttpRequest」コンストラクタは、
Webとサーバーの間でデータ交換をするために、
「HTTPリクエスト」を発行することができる。



「XMLHttpRequest」で「HTTP」リクエストを送るには、
・「XMLHttpRequest」オブジェクトを作成する
・「URL」を開いてリクエストを送信する。
・トランザクションが完了
・オブジェクトに結果が埋め込まれる
・「HTTP」ステータスコードやレスポンスの本文などを確認する
といった流れで手続きを行う。



XMLHttpRequest()インスタンス生成

let インスタンス変数 = new XMLHttpRequest();

ファイルをオープンする

インスタンス変数.open('GET', 'https://ドメイン名.com/ディレクトリ名/ファイル名.txt', true)

読み込み完了ステータスの値を取得する

インスタンス変数.readyState

現在のXMLHttpRequest()コンストラクタのステータスを取得する

インスタンス変数.status

読み込んだファイルのテキストを取得する

インスタンス変数.responseText

XMLHttpRequest()コンストラクタの終了

インスタンス変数.send();

「XMLHttpRequest」を使うサンプルコード

var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://ドメイン名.com/ディレクトリ名/ファイル名.txt', true); //「onreadystatechange」は、読み込み状況が変化するごとに、ステートメント変更してくれる。
xhr.onreadystatechange = function(){ if((xhr.readyState == 4) && (xhr.status == 200)){ var data_list = xhr.responseText.split("\n"); var output = ''; for(let i=0;i<3;i++){ output += '<li>' + data_list[i] + '</li>'; } document.getElementById('example').insertAdjacentHTML('afterbegin', '<ul>' + output + '</ul>'); } } xhr.send(null);


Back


「XMLHttpRequest」コンストラクタ―の「プロパティ」「メソッド」


項目説明
コンストラクター
XMLHttpRequest()
プロパティ
channel
mozAnon
mozBackgroundRequest
mozResponseArrayBuffer
mozSystem
multipart
onreadystatechange
readyState
response
responseText
responseType
responseURL
responseXML
status
statusText
timeout
upload
withCredentials
メソッド
abort()
getAllResponseHeaders()
getResponseHeader()
open()
openRequest()
overrideMimeType()
send()
sendAsBinary()
setRequestHeader()
イベント
onreadystatechange
abort
error
load
loadend
loadstart
progress
timeout
継承
XMLHttpRequestEventTarget
EventTarget
XMLHttpRequest に関連するページ
FormData
XMLHttpRequestEventTarget
XMLHttpRequestUpload


Back