Understanding Polymer Core Ajax Element -Tutorial Savvy

Polymer Library provided Core and Paper Elements inbuilt in the library.

As We know Polymer is a kind of Polyfill for Web Components.To help the developers with custom elements these core and paper elements are added .

In this Demo, “We will Explore the Core Ajax polymer element“.

You can get more info and download this core package from the below link:-

http://www.polymer-project.org/docs/elements/core-elements.html

core-ajax is a non visual element and it act like as a data source to load the data from a remote URL.

The syntax for the core ajax element is listed below.

<core-ajax
 auto = "[Boolean,automatically performs Ajax request]"
 url = "[URL target of the request]"
 params ="[Parameters to be sent to the specified URL]"
 handleAs ="[response type like json/html/text etc.]"
 on-core-response = "[Success Handler Method]"
 method="[HTTP method ]"
 headers="[ request headers]"
 body = "[body content to send for POST method]"
 contentType = "[Content type of request]"
 withCredentials = "[Boolean Flag, for credential]">
</core-ajax>

The core AJAX element has 3 different types of events core-response, core-error, core-complete .

More on this element can be found in below link.

http://www.polymer-project.org/docs/elements/core-elements.html#core-ajax

The Folder structure for this demo is in below screenshot.

We have created a dummy JSON file studentList.json in the server folder and used it in the demo to illustrate the use of polymer core ajax element.

{
    "data":[
        {"name":"Sandeep","course":"Computer","mark":240,"country":"India"},
        {"name":"Surabhi","course":"English","mark":200,"country":"UK"},
        {"name":"Sangeeta","course":"Science","mark":215,"country":"US"},
        {"name":"Sumant","course":"Math","mark":230,"country":"India"},
        {"name":"Rohan","course":"History","mark":224,"country":"China"},
        {"name":"Jack","course":"Geography","mark":40,"country":"India"},
        {"name":"John","course":"English","mark":20,"country":"UK"},
        {"name":"James","course":"Science","mark":25,"country":"US"},
        {"name":"Smith","course":"Geology","mark":230,"country":"India"},
        {"name":"Bapi","course":"History","mark":221,"country":"UK"}
    ]
}

Below code shows the index.html file where we have imported core-ajax element.

<!doctype html>
<html>
<head>
    <title>Polymer Core Element Demo: Custom Button</title>
    <script src="components/platform/platform.js"></script>
    <link rel="import" href="components/core-ajax/core-ajax.html">

</head>
<body>
<core-ajax auto url="http://localhost:63342/PolymerElementDemo/store/studentList.json"
           handleAs="json" id="studentDataSource">
</core-ajax>
<template id="student-table-template" bind="{{studentArray}}">
    <table border="1">
        <thead>
        <tr>
            <th>NAME</th>
            <th>COURSE</th>
            <th>MARK</th>
            <th>COUNTRY</th>
        </tr>
        </thead>
        <tbody>
            <template repeat="{{data}}">
                <tr >
                    <td>{{name}}</td>
                    <td>{{course}}</td>
                    <td>{{mark}}</td>
                    <td>{{country}}</td>
                </tr>
            </template>
        </tbody>
    </table>
</template>
<script>
    var APP ={
        /*AJAX Success Callback Method*/
        ajaxCallbackHandler : function(e) {
            document.querySelector('#student-table-template').model = {
                studentArray: e.detail.response
            };
        }
    }
    document.addEventListener('polymer-ready', function() {
        var ajax = document.querySelector("#studentDataSource");
        ajax.addEventListener("core-response",APP.ajaxCallbackHandler);
    });
</script>
</body>
</html>