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

XMLHttpRequest.send() - 送信する

send()は、XMLHttpRequestのメソッドです。ajax通信を実行します。

概要

名前
send
所属
XMLHttpRequest
IDL
void send(optional (Document or BodyInit)? body = null);

typedef (Blob or BufferSource or FormData or URLSearchParams or ReadableStream or USVString) BodyInit;

typedef (ArrayBufferView or ArrayBuffer) BufferSource;

typedef (Int8Array or Int16Array or Int32Array or Uint8Array or Uint16Array or Uint32Array or Uint8ClampedArray or Float32Array or Float64Array or DataView) ArrayBufferView;
仕様書
https://xhr.spec.whatwg.org/#dom-xmlhttprequest-send

説明

POSTメソッドの場合、引数(body)に送信するデータを指定します。データの型は下記の通りです。

USVString
文字列を、HTTPボディに含めて送信する。
URLSearchParams
クエリの内容をHTTPリクエスト(POST)とHTTPボディの両方に含めて送信する。
Document
文字エンコーディングがUTF-8のHTML、またはXMLのソースコードを、HTTPボディに含めて送信する。ヘッダーの"Content-type"にはmime typeがセットされる。
BlobArrayBuffer、ArrayBufferView
データの内容を、HTTPボディに含めて送信する。
FormData
フォームの内容を、HTTPリクエスト(POST)に含めて送信する。

POSTメソッドの場合、リクエストヘッダーに"Content-type"が追加されるため、クロスオリジンのajax通信ではサーバー側でAccess-Control-Allow-Headers: Content-typeのヘッダーを返す必要があります。

GETメソッド、HEADメソッドの場合、引数はnull扱いとなります。

デモ

ボタンをクリックすると、あるテキストファイルにアクセスします。このテキストファイルは動的に、送信された内容をそのまま出力します。引数によってデータがどのように送信されるか確認して下さい。

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

<!DOCTYPE html>
<html>
<head>
<style>
body { word-break: break-all ; tab-size: 2 ; }
div#result { white-space: pre-wrap ; }
textarea#hoge { box-sizing: border-box ; width: 100% ; font-size: 16px ; }
form#fuga { display: inline-block ; }
</style>
</head>
<body>
<p><button id="send1">USVStringを送信 [send()]</button></p>
<p><button id="send2">URLSearchParamsを送信 [send()]</button></p>
<p><button id="send3">Documentを送信 [send()]</button></p>
<p><button id="send4">Blobを送信 [send()]</button> (<a href="./image.png" target="_blank">画像</a>)</p>
<form id="fuga">
	<label>name: <input name="name" value="あらゆ"></label> 
	<label>age: <input name="age" type="number" value="18"></label>
</form>
<p><button id="send5">FormDataを送信 [send()]</button></p>
<p><button id="clear">ログを削除</button></p>
<hr>
<textarea rows="15" id="hoge"></textarea>
<hr>
<div id="result"></div>
<script>
var xhr = new XMLHttpRequest() ;
xhrSetting() ;

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

xhr.onloadend = function ( event ) {
	xhrSetting() ;
}

xhr.addEventListener( "load", function ( event ) {
	appendText( "[load] ダウンロードが正常に完了しました!!" + "\n" ) ;
	document.getElementById( "hoge" ).value = xhr.response ;
} ) ;

document.getElementById( "send1" ).onclick = function () {
	xhr.send( "SYNCER is Best!!" ) ;
}

document.getElementById( "send2" ).onclick = function () {
	var urlSearchParams = new URLSearchParams( "hoge=1&fuga=2" ) ;
	xhr.send( urlSearchParams ) ;
}

document.getElementById( "send3" ).onclick = function () {
	xhr.send( document ) ;
}

document.getElementById( "send4" ).onclick = function () {
	xhr.send( blob ) ;
}

document.getElementById( "send5" ).onclick = function () {
	var formData = new FormData( document.getElementById( "fuga" ) ) ;
	xhr.send( formData ) ;
}

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

function xhrSetting () {
	xhr.open( "POST", "https://syncer.ch/POST" ) ;
}

function appendText ( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}

var blob ;
var image = new Image() ;

image.onload = function() {
	var canvas = document.createElement( "canvas" ) ;
	var context = canvas.getContext( "2d" ) ;
	context.drawImage( image, 0, 0, 200, 150, 50, 50, 100, 75 ) ;
	canvas.toBlob( function( result ) {
		blob = result ;
	} ) ;
}

image.src = "./image.png" ;
</script>
</body>
</html>

サポート状況

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