リクエストデータを直接渡す。コールバック関数で処理する
envValue.local.json、index.html、index.jsを下記に変更しましょう
{
"apiRoot" : "http://localhost:8080"
}
src/js/modules/index.js
export class Index {
constructor() {
}
sample_click(event) {
$f.ajax($f.envValue('apiRoot') + '/json.php', {'sample_key': 'sample_value'})
.setLoadend(200, this.success.bind(this))
.setLoadend(null, this.error.bind(this))
.send();
}
success(event, xhr) {
this.obj.textContent = JSON.stringify(xhr.response);
}
error(event, xhr) {
this.obj.textContent += xhr.status;
}
}
src/page/index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
<div data-obj="obj"></div>
<div><button data-name="sample">sample</button></div>
</body>
</html>
json.phpを作成し、CORS設定したwebサーバーに配置してみましょう
CORS設定したwebサーバーはご自身で用意してください
ここでは例としてPHPでheaderメソッドを使いCORS設定します。PHPサーバーはhttp://localhost:8080とします
<?php
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://localhost:8000");
header("Access-Control-Allow-Headers: Accept, Content-Type, X-Requested-With");
header("Content-Type: application/json; charset=UTF-8");
$rawRequest = file_get_contents("php://input");
$jsonRequest = json_decode($rawRequest, true);
$responseJson = array(
'key1' => '<input type="text">',
'key2' => array(
'val1' => 2
),
'key3' => array(
"key1" => "str1",
"key2" => "str2",
"key3" => "str3",
"key4" => "str4",
"key5" => "str5"
),
'request_value' => $jsonRequest['sample_key']
);
echo json_encode($responseJson);
例としてPHPでjsonを返すサーバープログラムを示しました。これがドキュメントルート直下に設置されているとします
$f.ajaxについて
第一引数がAjax送信先URL、第二引数がリクエストパラメーターです
デフォルトではPOST送信されます。HTTPメソッドを変えたい場合は、第三引数にHTTPメソッドを文字列で渡してください。(例：'GET'、'POST'、'PUT'、'DELETE')
デフォルトではリクエストパラメーターはJSONで送信されます。クエリパラメーター形式で送信したい場合は第四引数に'query'という文字列を渡してください。json形式で送信したい場合は'json'という文字列を渡してください
setLoadendでリクエストが完了したとき(成功した場合も成功しなかった場合も)の処理を実装できます。第一引数がHTTPステータス、第二引数がコールバック関数です。
第二引数のコールバック関数にはイベントオブジェクトとXMLHttpRequestが引数として渡されます
setLoadendの第一引数にnullを渡した場合、リクエストが完了時のデフォルト処理になります
今回の例の場合、setLoadendの第一引数に200を渡したものと、nullを渡したものを実行しています。この場合、HTTPステータスが200の場合、setLoadendの第一引数に200を指定したコールバック関数が実行され、HTTPステータスが200ではない場合(大抵の場合、エラーやタイムアウトの場合)、setLoadendの第一引数にnullを指定したコールバック関数が実行されます
sendで送信されます
$f.ajaxの戻り値はXMLHttpRequestの同名のプロパティとメソッドを使用できます
$f.ajaxの戻り値はXMLHttpRequestに無いメソッドもあります
$f.ajaxの戻り値オブジェクトにありXMLHttpRequestに無いメソッドの説明
setWithCredentialsメソッドは引数にbooleanを取ります。trueを渡すとcookieを送信します。withCredentialsプロパティにtrueをセットするのと同じです。setWithCredentialsメソッドが用意されているのはメソッドチェーンで使用できるようにするためです
setResponseTypeメソッドは引数にXMLHttpRequestResponseTypeに含まれる値を取ります。responseTypeプロパティをセットするのと同じです。setResponseTypeメソッドが用意されているのはメソッドチェーンで使用できるようにするためです
setTimeoutメソッドは引数にunsigned longを取ります。timeoutプロパティをセットするのと同じです。setTimeoutメソッドが用意されているのはメソッドチェーンで使用できるようにするためです
setProgressメソッドはsetLoadendと使い方は全く同じです。第一引数がHTTPステータス、第二引数がコールバック関数です。progressイベントが発生したとき、第一引数に設定したHTTPステータスに基づき、第二引数に設定したコールバック関数が実行されます
setReadystatechangeメソッドは第一引数がXMLHttpRequestの状態を表すreadyState、第二引数がHTTPステータス、第三引数がコールバック関数です。readyStateが変化したとき、第一引数、第二引数に設定した値に基づき、第三引数に設定したコールバック関数が実行されます。setLoadendのように第一引数にnullを渡すと未設定readyState時の動作となります、setLoadendのように第二引数にnullを渡すと未設定HTTPステータス時の動作となります
$f.ajaxは自動的にresponseTypeがjsonになります。$f.ajaxTextにするとresponseTypeがtextになります。$f.ajaxTextの使い方は$f.ajaxと全く同じです。引数も同じです
$f.ajax、$f.ajaxTextは自動的にリクエストヘッダーにX-Requested-With、Accept、Content-Typeが設定されます。リクエストヘッダーとresponseTypeになにも設定されていない状態を取得したい場合は、$f.emptyAjaxを使用してください。$f.emptyAjaxの使い方は$f.ajaxと全く同じです。引数も同じです
リクエストデータを直接渡す。Promiseで処理する
index.jsを下記に変更しましょう
export class Index {
constructor() {
}
sample_click(event) {
$f.ajax($f.envValue('apiRoot') + '/json.php', {'sample_key': 'sample_value'})
.sendPromise()
.then(this.success.bind(this))
.catch(this.error.bind(this))
;
}
success(xhr) {
this.obj.textContent = JSON.stringify(xhr.response);
}
error(xhr) {
this.obj.textContent += xhr.status;
}
}
sendではなくsendPromiseを使うとPromiseを返します
HTTPステータスが200の場合、resolveします。HTTPステータスが200でない場合、rejectします
sendのコールバック関数と異なり、イベントオブジェクトは渡されません
sendPromiseを使うとsetLoadendメソッド、onloadendフィールドは使えません
リクエストデータをformオブジェクトで渡す
index.html、index.jsを下記に変更しましょう
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
<div data-obj="obj"></div>
<div><button data-name="sample">sample</button></div>
<div>
<form data-obj="sampleForm">
<input name="sample_key" type="text" value="sample_value">
</form>
</div>
</body>
</html>
src/js/modules/index.js
export class Index {
constructor() {
}
sample_click(event) {
$f.ajaxByForm($f.envValue('apiRoot') + '/json.php', this.sampleForm)
.setLoadend(200, this.success.bind(this))
.setLoadend(null, this.error.bind(this))
.send();
}
success(event, xhr) {
this.obj.textContent = JSON.stringify(xhr.response);
}
error(event, xhr) {
this.obj.textContent += xhr.status;
}
}
json.phpを修正しましょう
<?php
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://localhost:8000");
header("Access-Control-Allow-Headers: Accept, Content-Type, X-Requested-With");
header("Content-Type: application/json; charset=UTF-8");
$responseJson = array(
'key1' => '<input type="text">',
'key2' => array(
'val1' => 2
),
'key3' => array(
"key1" => "str1",
"key2" => "str2",
"key3" => "str3",
"key4" => "str4",
"key5" => "str5"
),
'request_value' => $_REQUEST['sample_key']
);
echo json_encode($responseJson);
$f.ajaxByFormについて
第一引数がAjax送信先URL、第二引数が送信するformオブジェクトです
ajaxByFormはHTTPメソッドは必ずPOSTになります。変更できません
$f.ajaxのようにリクエストパラメーター形式を設定できません。jsonで送信できません
$f.ajaxByFormは自動的にresponseTypeがjsonになります。$f.ajaxTextByFormにするとresponseTypeがtextになります。$f.ajaxTextByFormの使い方は$f.ajaxByFormと全く同じです。引数も同じです
$f.ajaxByForm、$f.ajaxTextByFormは自動的にリクエストヘッダーにX-Requested-With、Acceptが設定されます。リクエストヘッダーとresponseTypeになにも設定されていない状態を取得したい場合は、$f.emptyAjaxByFormを使用してください。$f.emptyAjaxByFormの使い方は$f.ajaxByFormと全く同じです。引数も同じです
ajaxByForm、ajaxTextByForm、emptyAjaxByFormもsendPromiseを使用するとPromiseが返ります