How To Use AJAX on Caph
Tutorial on how to use an asynchronous HTTP (AJAX) request.
Prerequisites
To use caph AJAX, you should include caph core dependent files in your application by putting the following code in your index.html file.
1 2 3 4 5 6 7 8 |
<html>
<head>
<script src="$CAPH/1.0.0/caph-level1-unified.min.js"></script>
</head>
<body>
<!-- your code here. -->
</body>
</html>
|
Source Files
Note
To download this source code, click here.
Creating your own application
Making DOM nodes
Caph AJAX API require two parameters ‘URL’ and ‘Option’ to perform a request. URL parameter is a string which is the location of file on the server. Option parameter is set of key/value pairs that configure AJAX request.
Detail of ‘Option’ parameter is described below:
method | The type of request to make (“post” or “get”), default is “get”. |
async | By default, all request are sent asynchronously (this is set to true by default). If you need synchronous requests, set this option to false. |
parameter | Data to be sent to the server. It is converted to a query string, if not a string already. It's appended to the url for “get” requests. |
type | The type of data that you are expecting back from the server can be “XML”, “HTML”, “TEXT”, “JSON”, “JSONP” , default is “XML”. |
header | An array of additional key/value pair objects sent along with the requests using XMLHttpRequest transport. |
cbHandler | A function to be called when the request finishes. This function can have one or more arguments. First one must be the response object. The other arguments are passed by each cbParameter array value. If type option is set to “JSONP”, only one argument is passed from server result. If async parameter is set to false, ignored. |
cbParameter | An array which is passed to cbHandler function. |
jsonpCharset | Only applies when the “JSONP” type is used. Sets the charset attribute on the script tag used in the request. |
jsonpCallback | Override the callback function name in a JSONP request. This value will be used instead of “_callback” in the “_callback=?” part of the query string in the url. So {jsonpCallback:”jsonpCallback”} would result in “jsonpCallback=?” passed to the server. |
Response object contains AJAX request results. Details are described below:
value | This property has a result value which is converted to request type. |
getStatus() | Return HTTP response status code. |
getStatusText() | Return HTTP response status text. |
getHeader() | Return HTTP response header value. |
Sending GET request
1 2 3 4 5 6 7 8 9 10 11 12 |
<body>
<script>
caph.core.ajax('/url', {
method : 'get',
type : 'TEXT',
parameter : 'param1=1¶m2=2',
cdHandler : function(response, one, two){
console.log(response.value + '/' + one + '/' + two);
},
cbParameter : [1, 2]
});
</script>
</body>
|
Code is described below:
Line 3 | Specifies url to which the request is sent. |
Line 4 | Sets request type to “get”. |
Line 5 | Sets data type for result to “TEXT” |
Line 6 | Sets query string to be sent with request. If url has query string, this value is appended to the end of the url. |
Line 8 | Prints response text and each cbParameter value on console. |
Line 10 | Passes value 1 and 2 to cbHandler parameter. |
Sending POST request
1 2 3 4 5 6 7 8 9 10 11 12 |
<body>
<script>
caph.core.ajax('/url',{
method : 'post',
type : 'JSON',
parameter : 'param1=1¶m2=2',
cdHandler : function(response){
console.log(response.value);
}
});
</script>
</body>
|
Code is described below:
Line 3 | Specifies url to which the request is sent. |
Line 4 | Sets request type to “post”. |
Line 5 | Sets data type for result to “XML” |
Line 6 | Sets query string to be sent with request. This value is sent in the HTTP message body of a POST request. |
Line 8 | Prints response JSON. |
Sending JSONP request
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body>
<script>
caph.core.ajax('/url', {
method : 'get',
type : 'JSONP',
parameter: {
param1 : 1,
param2 : 2,
},
cdHandler : function(response){
console.log(response);
}
});
</script>
</body>
|
Code is described below:
Line 3 | Specifies url to which the cross-domain request is sent. |
Line 4 | Sets request type to “get”. If type is set to “JSONP”, this value is ignored. It uses only “get” method internally. |
Line 5 | Sets data type for result to “JSONP”. Using “JSONP”, jsonpCharset and jsonpCallback parameter are meaningful. |
Line 6 ~9 | Sets query string to be sent with request. It is converted to a query string. If url has query string, this value is appended to the end of the url. |
Line 11 | Prints response data from server result. |
Sending synchronous request
1 2 3 4 5 6 7 8 9 10 11 |
<body>
<script>
caph.core.ajax('/url?param1=1¶m2=2;', {
method : 'get',
type : 'XML',
parameter : false
});
console.log(response.value);
</script>
</body>
|
Code is described below :
Line 3 | Specifies url to which the cross-domain request is sent. |
Line 4 | Sets request type to “get”. If type is set to “JSONP”, this value is ignored. It uses only “get” method internally. |
Line 5 | Sets data type for result to “XML” |
Line 6 | Sets async value to false. If this value is set to false, cbHandler is ignored. |
Line 9 | Prints response xml. |