JavaScript フレームワーク fairy support js
Ajax

リクエストデータを直接渡す。コールバック関数で処理する

envValue.local.json、index.html、index.jsを下記に変更しましょう

src/js/env/envValue.local.json
{
    "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サーバーはご自身で用意してください
ここでは例をしてCORS設定したwebサーバーはhttp://localhost:8080とします

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");

$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を下記に変更しましょう

src/js/modules/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のコールバック関数と異なり、イベントオブジェクトは渡されません


リクエストデータをformオブジェクトで渡す

index.html、index.jsを下記に変更しましょう

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>
    <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を修正しましょう

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が返ります


次ページvalidate

目次