Как правильно загрузить JSON с другого домена?

Question

[XRay39]

Ситуация:

Есть несколько сайтов в домене sfw.su, они используют общую панель навигации, а также ее локализацию (jquery-localize)



Скрипт локализации грузит нужные json'ы из указанного местоположения и применяет их к элементам согласно фильтров jQuery.



Когда указано два локальных файла, то все ок. Но когда я попытался сделать так: localize('static.sfw.su/path/to/json), то получил ошибку связанную с невозможностью загружать контент с другого домена.



Так как все сайты используют один и тот, же navbar, то идея вынести его локализацию в одно общее место, на мой взгляд рациональная.



Как мне реализовать мою задумку с меньшим геморроем (очень не хотелось бы лезть в код самого jquery-localize)?

Comments

[XRay39]

Визуализация проблемы: picpaste.com/untitled_page-ogj4XeBt.png

Answer 1

[sdevalex]

Для кроссдоменного AJAX нужно использовать JSONP. jquery-localize нужно сделать одну правку тут…
github.com/coderifous/jquery-localize/blob/master/src/jquery.localize.coffee#L51

Comments

[XRay39]

Сделал правку, но теперь возникли проблемы:
1) локальные ресурсы идут json (не работает ничего)
2) syntax error (я никак не пойму что должен отдать сервер в ответ на JSONP AJAX-запрос)

[Vitaliy Petrychuk]

1) Ничего не понял :)
2) Синтаксическая ошибка скорей всего из-за плохого заголовка ответа. Используйте application/json.

[XRay39]

1)разобрался (локальное через json, нелокальный jsonp)
2)

[Vitaliy Petrychuk]

Судя по скриншоту сервер отдает навалидный json: упущены скобки {"nav": .... } и лишняя запятая внизу после }.

[XRay39]

Исправил. Рез-т: та же ошибка.
на #freenode посоветовали отдавать: jQuery172023966487380675972_1340646316871({«text»: «some text2», «par1»: «another text2», "_": «1340646316878»});

Я так и не понял как эти числа формируются…

[sdevalex]

Почитайте про JSONP… Сервер должен смотреть переменную callback и отдавать JS с вызовом этой функции…

<%= params[:callback] %>({ ... json ... })

Результат типа…

jQuery45645643345322_45673457645643({ data: { test: 1 } })

[sdevalex]

Тут по сути нет AJAX, просто добавляет script тег на JSONP файл, который интерпретируется как JS. Перед добавлением script тега создается функция, которая должна быть вызвана. Имя функции добавляется как GET параметр.

[XRay39]

а без скриптового языка (php,asp) не получится? Проект просто чисто статический на хостинге.

[sdevalex]

Укажите в ajaxOptions параметр jsonpCallback со статическим именем функции (например, staticLanguageJsonpCallback… обязательно уникальное имя в глобальном пространстве).

Answer 2

[wwwsevolod]

jsonp

Answer 3

[freeek]

А

$.getJSON(“http://www.example.com? jsoncallback=?”);

Не помогает?

Comments

[Анатолий]

JSONP требует соответственных решений на обоих сторонах, а не просто клиентский запрос.

Answer 4

[monolithed]

//remote_host/file.js
getJSON('{
	"foo" : 0,
	"bar" : 1
}');

<script>
	var getJSON = function(data) {
               try {
                      console.log(JSON.parse(data));
               }
               catch (error) {
                     console.log(eval('(' + data + ')'));
              }
	};
	
	(function() {
		var script   = document.createElement('script');
		script.type  = 'text/javascript';
		script.async = true;
		script.src   = '//remote_host/file.js';
		document.body.appendChild(script);
	}());
</script>

Причем, необязательно в функцию getJSON передавать JSON, можно и обычный объект, тогда использовать JSON.parse() не нужно.

Comments

[XRay39]

Взял на заметку на будущее. Однако здесь (jquery-localize) оно нуждается в адаптации

[monolithed]

Однако здесь (jquery-localize) оно нуждается в адаптации

Не совсем понял что вы имеете ввиду, прошу поясните…
Мой код будет работать и без jQuery, однако если эта библиотека уже установлена, то используйте $.getJSON() (как уже отметили выше)

[XRay39]

Поясняю: Вы здесь привели свою функцию парсинга JSON'a. В скрипте jquery-localize уже есть парсилка JSON. Поэтому Ваше решение отлично применимо при самостоятельной обработке входящего JSON'a.