ajax通信後のhttpヘッダ情報取得

Question

WordPressのRESTAPIのURLにajax通信後、httpヘッダ情報内のX-WP-TotalPagesの取得を行いたいです。
下記コードにてヘッダ情報の取得を試みましたが、エラーになってしまう始末です。
どなたかご教示のほどよろしくお願いいたします。

function newsGetter(dom,rest_url) {
    var domArea = dom;
    $.ajax({
        type: 'GET',
        url: rest_url,
        crossDomain: true,
        contentType: "application/json; charset=UTF-8",
        cache: false,
        dataType: 'json'
    }).done(function (wordpressapi,xhr) {
        var lng = wordpressapi.length;
        console.log(xhr.getResponseHeader( 'X-WP-TotalPages' ));
        if (lng > 5) {
            lng = 5;
        };
        for (var i = 0; i < lng; i++) {
            var title = wordpressapi[i]['title']['rendered'];
            var id = wordpressapi[i]['id'];
            var content = wordpressapi[i]['content']['rendered'];
            var link = wordpressapi[i]['link'];
            var excerpt = wordpressapi[i]['excerpt']['rendered'];
            var category = wordpressapi[i]['_embedded']['wp:term'][0][0]['name'];
            var catslug = ' cat' + wordpressapi[i]['_embedded']['wp:term'][0][0]['slug'];
            if (wordpressapi[i]['_embedded']['wp:featuredmedia']) {
                var image = wordpressapi[i]['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['post-thumbnail']['source_url'];
                var image_html = '<div class="image">' + '<img src="' + image + '" alt="' + title + '-image" />' + '</div>';
                var image_css = 'image-on';
            } else {
                var image_html = '';
                var image_css = 'image-off';
            }
            var dateData = new Date(wordpressapi[i]['date']);
            yy = dateData.getYear();
            if (yy < 2000) {
                yy += 1900;
            }
            mm = dateData.getMonth() + 1;
            if (mm < 10) {
                mm = "0" + mm;
            };
            dd = dateData.getDate();
            if (dd < 10) {
                dd = "0" + dd;
            };
            var postDate = yy + '-' + mm + '-' + dd;

            var html =
                '<div class="grid-index">'+
                '<a href="' + link + '" class="'+ image_css +'" data-postid="'+ id +'">'+
                '<div class="item">'+
                '<div class="titleset d-flex flex-wrap">'+
                '<div class="date">' + postDate + '</div>'+
                '<div class="title ml-3">' + title + '</div>'+
                '</div>'+
                // '<div class="category"><span class="catblog'+ catslug +'">'+ category +'</span></div>'+
                // '<div class="excerpt">'+ content +'</div>'+
                '</div>'+
                image_html +
                '</a>'+
                '</div>';
            $(domArea).append(html);
        }
    }).fail(function (wordpressapi) {
        $(domArea).append("データの読み込みに失敗しました。");
    });
};

<script src="index.js"></script>
<script>
    $(function() {
        newsGetter("#newslist","https://example.copm/wp-json/wp/v2/posts?_embed&per_page=5");
    });
</script>

Answer 1

doneの3番目の引数を参照してください

$(function(){
  $.ajax({
  url:rest_url,
  }).done(function(data,status,xhr){
    console.log(data);
    console.log(xhr.getResponseHeader("x-wp-totalpages"));
  });
});

Comments

[chanNORI]

ご教示いただいた内容で取得できました。
早速のご回答ありがとうございました。

[AkitoshiManabe]

実装の確認は、https://github.com/jquery/jquery/blob/master/src/ajax.js#L463 ですね。