Вс, 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…
Спасибо, что зашли!