Pass the request data directly. Process with callback function.
Let's change 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>
Let's create json.php and place it on a web server with CORS settings.
Please prepare your own web server with CORS settings.
Here, as an example, use the header method in PHP to set CORS. Suppose PHP server is 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);
As an example, We have shown a server program that return json in PHP. Suppose this is located directly under the document root.
About $f.ajax.
The first argument is URL and the second argument is the request parameter.
By default, it is sent by POST. If you want to change the HTTP method, pass the HTTP method as a character string as the third argument.(Example：'GET'、'POST'、'PUT'、'DELETE')
By default, request parameters are sent in JSON. If you want to send in query parameter format, pass the string'query' as the fourth argument. If you want to send in json format, please pass the string'json'.
You can implement what happens when the request is completed (successful or unsuccessful) using setLoadend. The first argument is the HTTP status and the second argument is the callback function.
Event object and XMLHttpRequest object are passed as arguments to the callback function of the second argument.
If null is passed as the first argument of setLoadend, it will be the default process when the request is completed.
In this example, we are executing a call that passes 200 as the first argument of setLoadend and a call that passes null. In this case, if the HTTP status is 200, the callback function with 200 passed as the first argument of setLoadend will be executed, and if the HTTP status is not 200 (in most cases, an error or timeout), the callback function with null passed as the first argument of setLoadend will be executed.
Will be sent by send.
The return value of $f.ajax can use the property and method of the same name in XMLHttpRequest
The return value of $f.ajax also has methods that XMLHttpRequest doesn't have.
The description of the method that the return of $f.ajax has but not the XMLHttpRequest.
The setWithCredentials method takes a boolean argument. Passing true will send a cookie. Equivalent to setting the withCredentials property to true. The setWithCredentials method is provided so that it can be used in the method chain.
The setResponseType method takes the value contained in XMLHttpRequestResponseType as an argument. Equivalent to setting the responseType property. The setResponseType method is provided so that it can be used in the method chain.
The setTimeout method takes an unsigned long as an argument. Equivalent to setting the timeout property. The setTimeout method is provided so that it can be used in the method chain.
The setProgress method is exactly the same as setLoadend. The first argument is the HTTP status and the second argument is the callback function. When the progress event occurs, the callback function set in the second argument is executed based on the HTTP status set in the first argument.
In the setReadystatechange method, the first argument is readyState, which represents the state of XMLHttpRequest, the second argument is the HTTP status, and the third argument is the callback function. When readyState changes, the callback function set in the third argument is executed based on the values set in the first and second arguments. If you pass null to the first argument like setLoadend, it will be the operation when it is not set readyState, and if you pass null to the second argument like setLoadend, it will be the operation when it is not set HTTP status.
$f.ajax will automatically have a responseType of json. If you call $f.ajaxText, the responseType will be text. The usage of $f.ajaxText is exactly the same as $f.ajax. The arguments are the same.
For $f.ajax and $f.ajaxText, X-Requested-With, Accept and Content-Type are automatically set in the request header. If you want to get the state where nothing is set in the request header and responseType, use $f.emptyAjax. The usage of $f.emptyAjax exactly the same as $f.ajax.The arguments are the same.
Pass the request data directly. Process with Promise.
Let's change 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;
}
}
Use sendPromise instead of send to return a Promise.
If the HTTP status is 200, Promise will resolve. If HTTP status is not 200, Promise will reject.
Unlike the send callback function, no event object is passed.
When using sendPromise, setLoadend method and onloadend field cannot be used.
Pass request data as form object
Let's change 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;
}
}
Let's change 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);
About $f.ajaxByForm
The first argument is URL and the second argument is the form object to send.
For ajaxByForm, the HTTP method is always POST. Cannot be changed.
Unlike $f.ajax, you cannot set the request parameter format. You can't send with json.
$f.ajaxByForm will automatically set the responseType to json. If you use $f.ajaxTextByForm instead of $f.ajaxByForm, the responseType will be text. The usage of $f.ajaxTextByForm is exactly the same as $f.ajaxByForm.
For $f.ajaxByForm and $f.ajaxTextByForm, X-Requested-With and Accept are automatically set in the request header. If you want to get the state where nothing is set in the request header and responseType, use $f.emptyAjaxByForm. The usage of $f.emptyAjaxByForm is exactly the same as $f.ajaxByForm.
ajaxByForm, ajaxTextByForm, emptyAjaxByForm also return a Promise when using sendPromise.
Next page Validate
table of contents