SYNCERのロゴ
アイキャッチ画像

XMLHttpRequest.open() - 通信方法を設定する

open()は、XMLHttpRequestのメソッドです。通信先やメソッドなど、ajax通信の通信方法を設定します。

概要

名前
open
所属
XMLHttpRequest
IDL
void open(ByteString method, USVString url);
void open(ByteString method, USVString url, boolean async, optional USVString? username = null, optional USVString? password = null);
仕様書
https://xhr.spec.whatwg.org/#dom-xmlhttprequest-open

説明

第1引数(method)には、メソッドを文字列で指定します。

第2引数(url)には、接続先のURLアドレスを指定します。

第3引数(async)には任意で、同期か非同期かを真偽値で指定します。trueの場合は非同期処理、falseの場合は同期処理となります。指定しない場合は非同期処理です。同期処理の場合、send()の実行時、通信に失敗した場合、timeoutresponseTypeの値が空でない場合にエラーが発生します。

第4引数(username)には任意で、ユーザーネームを指定します。

第5引数(password)には任意で、パスワードを指定します。

第3〜5引数は省略できます。POSTメソッドによるリクエストの場合、アップロードが発生し、XMLHttpRequestUploadを利用して通信状態をキャッチできます。

チュートリアル

基本的な使い方

基本的には第1引数と第2引数を指定します。その後、send()を実行すると通信を開始します。

// ダウンロード
var xhr = new XMLHttpRequest() ;
xhr.open( "GET", "./hoge.json" ) ;
xhr.send() ;

// アップロード
var xhr = new XMLHttpRequest() ;
xhr.open( "POST", "./upload.php" ) ;
xhr.send( data ) ;

同期と非同期

第3引数にfalseを指定して同期処理にした場合、通信が終了するまで、それ以降の処理が実行されません。

var xhr = new XMLHttpRequest() ;
xhr.open( "GET", "./hoge.json", false ) ;
xhr.send() ;

/** 通信が終了するまで以降の処理が実行されない **/

// 通信終了後の処理

同期処理には色々と不便な点があります。まず、timeoutresponseTypeに初期値以外の値を設定していると、send()を実行時にエラーが発生します。また、同一オリジンポリシー違反などにより、通信自体に失敗した時もエラーが発生します。いずれも、通信だけでなくスクリプト全体の処理が終了してしまいます。

xhr.timeout = 1 ;	// 0以外だとエラー
xhr.responseType = "text" ;	// 空文字以外だとエラー
xhr.send() ;

順番を計算する場合はイベントハンドラを利用した方が効率的なので、falseを指定するのは推奨しません。これなら、通信の設定が自由で、かつ、通信の失敗がスクリプト全体に影響を与えることもありません。

var xhr = new XMLHttpRequest() ;
xhr.open( "GET", "./hoge.json" ) ;

xhr.onloadend = function( event ) {
	// 通信終了後の処理
}

xhr.send() ;

ユーザーネームとパスワード

第4引数と第5引数で、ユーザーネームとパスワードを設定できます。Basic認証などが設定されたページのコンテンツにアクセスする時に利用します。

https://hoge:fuga@syncer.ch/Basic/hoge.json
var xhr = new XMLHttpRequest() ;
xhr.open( "GET", "https://syncer.ch/Basic/hoge.json", false, "hoge", "fuga" ) ;
xhr.send() ;

デモ

XMLHttpRequest.open()のデモです。ボタンをクリックすると、あるテキストファイルをダウンロードします。send()の直後の処理が実行されるタイミングが、同期処理と非同期処理で違う点に注目して下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
body { word-break: break-all ; tab-size: 2 ; }
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<p><button id="send1">非同期通信 [send()]</button></p>
<p><button id="send2">同期通信 [send()]</button></p>
<p><button id="clear">ログを削除</button></p>
<hr>
<p>テキストファイルの内容→<span id="hoge"></span></p>
<hr>
<div id="result"></div>
<script>
var xmlHttpRequest = new XMLHttpRequest() ;

xmlHttpRequest.onloadstart = function ( event ) {
	appendText( "[loadstart] ダウンロードを開始しました!!" + "\n" ) ;
}

xmlHttpRequest.onprogress = function ( event ) {
	appendText( "[progress] ダウンロード中…" + "\n" ) ;
}

xmlHttpRequest.onload = function ( event ) {
	appendText( "[load] ダウンロードが正常に完了しました!!" + "\n" ) ;
}

xmlHttpRequest.onloadend = function ( event ) {
	appendText( "[loadend] ダウンロードを終了しました!!" + "\n" ) ;
}

xmlHttpRequest.onerror = function ( event ) {
	appendText( "[error] ダウンロードに失敗しました…。" + "\n" ) ;
}

xmlHttpRequest.addEventListener( "load", function ( event ) {
	document.getElementById( "hoge" ).textContent = xmlHttpRequest.response ;
} ) ;

document.getElementById( "send1" ).onclick = function () {
	xmlHttpRequest.open( "GET", "./demo.txt" ) ;
	xmlHttpRequest.send() ;
	appendText( "[async] send()の下の行の処理を実行しました。" + "\n" ) ;
}

document.getElementById( "send2" ).onclick = function () {
	xmlHttpRequest.open( "GET", "./demo.txt", false ) ;
	xmlHttpRequest.send() ;
	appendText( "[async] send()の下の行の処理を実行しました。" + "\n" ) ;
}

document.getElementById( "clear" ).onclick = function() {
	document.getElementById( "result" ).textContent = document.getElementById( "result" ).textContent = "" ;
}

function appendText ( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月22日 (日)
コンテンツを公開しました。