CODEWITHSUNDEEP
ajaxpolymer
Raja Naresh
Raja Naresh

Reputation: 53

Extracting the response headers from core-ajax

I just want to know if I can extract response headers from the core-ajax polymer element?

Below is the snippet of code I am testing with, I can see the 'detail' object but there is no response header in the 'xhr' object inside detail, only the status and responseText/body etc. The console.log statements are just me trying to figure out where the response header is. 

<body>
<template id="main" is="auto-binding">
<paper-input-decorator label="Email" floatinglabel="true" isInvalid="{{invalid}}" error="Not an email">
  <input is="core-input" value="{{email}}"></input>
</paper-input-decorator>
<core-ajax id="ajax"
           auto="true"
           url="http://www.mocky.io/v2/548a185d479e7f5618c59c1b"
           method="POST"
           handleAs="json"
           response="{{response}}"
           body='{"email":"{{email}}"}'
           contentType="application/x-www-form-urlencoded"
           on-core-complete="{{responseHandler}}">
</core-ajax>
</template>
<script>
var main = document.querySelector("#main");
main.email = "raja@naresh"
main.responseHandler = function(event, detail, sender) {
    console.log(event);
    console.log(detail.xhr);
    console.log(sender);
    console.log(main.response);
}
</script>
</body>

Can I extract the response header from core-ajax element, if not how do i go about doing this without jQuery? Any help is greatly appreciated? Thanks.

Upvotes: 2

Views: 876

Answers (1)

Eugene P.
Eugene P.

Reputation: 2625

it's doable.

take a look into the following: 

<link rel="import" href="../bower_components/polymer/polymer.html" />
<link rel="import" href="../bower_components/core-ajax/core-ajax.html" />
<polymer-element name="x-ajax">
    <template>
        <core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/?alt=json&q=chrome"
                   response="{{resp}}"
                on-core-response="{{handler}}"></core-ajax>
        <textarea value="{{resp}}"></textarea>
    </template>
    <script>
        Polymer({
            handler: function (event, detail, sender) {
                var header = detail.xhr.getResponseHeader('content-type');
            }
        });

    </script>
</polymer-element>

first of all use on-core-response second - use getResponseHeader method from XmlHttpRequest for getting required header

Upvotes: 1

Related Questions