Вс, 10 апреля 2016 г.

Мне удалось пройти обучающее приложение To Do.

Оно работает.

Я не очень понимаю весь код — я сделал много комментариев к коду и нарисовал на бумаге структуру и некоторые взаимосвязи внутри кода… но я все еще чувствую, что понимания много.

Я решил сделать перерыв и поработать над своей страницей портфолио.

Я нашел этот отличный API на http://quotesondesign.com/ и попытался реализовать его на тестовой странице. Как оказалось, в итоге я потратил много времени на отработку своих навыков AJAX….

Мой первоначальный вызов AJAX:

$.ajax({
    url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1'
  });

Получил эту ошибку:

XMLHttpRequest cannot load http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1. The 'Access-Control-Allow-Origin' header has a value 'http://null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

Это заставило меня понять, что мне нужно использовать JSONP.

Итак, я попробовал это:

$.ajax({
    url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
    dataType: 'jsonp'
  });

Что привело меня к этой ошибке:

Refused to execute script from 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_p…age]=1&callback=jQuery1123012326284124289244_1460269452955&_=1460269452956' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

В конце концов, заставив его работать, я теперь понимаю, что ошибка означала, что сервер отправил обратно объект JSON, но я пытался обработать его как JSONP, который является функцией и должен быть выполнен.

Итак, я попробовал это:

$.ajax({
    url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?mycallback',
    jsonpCallback: 'mycallback',
    dataType: 'jsonp'
  });

Это сработало! Но я прочитал в документации jQuery, что лучше всего позволить jQuery установить имя функции обратного вызова.

И мне, наконец, удалось заставить это работать так:

$.ajax({
    url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?',
    dataType: 'jsonp'
  });

Ура!

Потребовалось слишком много времени, чтобы сделать что-либо в своем портфолио, но я чувствую, что (лучше) разбираюсь в JSON/JSONP…

Спасибо, что зашли!