How To Use AJAX on Caph

Published 2014-10-28 | (Compatible with SDK 5.1 and 2014 models)

Tutorial on how to use an asynchronous HTTP (AJAX) request.

Contents

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&param2=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&param2=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&param2=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.