Используя $.ajax и JSON-P, указав dataType: "jsonp". Подробности в связанных документах. Ваш сервер должен будет ответить JSON-P , а не просто JSON, но это довольно легко сделать, если вы управляете сервером.
В качестве альтернативы, если вам требуется поддержка только самых последних браузеров (а не IE), вы можете настроить свой сервер на поддержку CORS . Но это поддерживается только в последних браузерах, и хотя IE8 поддерживает его, он не поддерживает его прозрачно через обычный объект XMLHttpRequest, но вместо этого требует совершенно другого транспортного объекта (XDomainRequest), который jQuery не обрабатывает автоматически для тебя (пока).
Вот пример JSON-P с использованием jQuery:
$.ajax({
// The source URL
url: "http://jsbin.com/ubucu4",
// Tell jQuery you're doing JSON-P
dataType: "jsonp",
// Include some data with the request if you like;
// this example doesn't actually *use* the data
data: {some: "data"},
// You can control the name of the callback, but
// usually you don't want to and jQuery will handle
// it for you. I have to here because I'm doing this
// example on JSBin.
jsonpCallback: "exampleCallback",
// Success callback
success: function(data) {
display("Received data, typeof data = " + typeof data);
display("data.foo = " + data.foo);
display("data.bar = " + data.bar);
},
// Error callback
error: function(jxhr, status, err) {
display("Error, status = " + status + ", err = " + err);
}
});
Живая копия
На сервере вы увидите, что jQuery добавил параметр callback в URL, например, в приведенном выше примере это будет http://jsbin.com/ubucu4?callback=exampleCallback, но если вам нравится элемент управления jQuery, имя будет более экзотичным. Ваш серверный код должен создать ответ, который представляет собой вызов функции JavaScript, вызывающий эту функцию. Мой ответ в приведенном выше примере:
exampleCallback({
"foo": "This is foo",
"bar": "This is bar"
});
Все это происходит потому, что вместо использования XMLHttpRequest, на который распространяется политика Same Origin *1029*, JSON-P использует динамически добавляемый тег script (что нормально). В моем примере тег будет выглядеть примерно так:
<script type='text/javascript' src='http://jsbin.com/ubucu4?callback=exampleCallback'></script>
Браузер получит скрипт, который является вашим ответом JSON-P, и выполнит его. Это означает, что вызывается обратный вызов, и ваши данные передаются в ваш скрипт.
Ваш ответ JSON-P технически не является JSON; это JavaScript, и по этой причине важно, чтобы вы использовали JSON-P только с теми серверами, которым вы доверяете (например, ваши собственные серверы субдоменов), поскольку вы вводите код непосредственно на страницу. В противном случае, если вы используете какой-либо сервер, которому вы не можете доверять, код, который вводится, может хорошо прочитать информацию со страницы и отправить ее третьему лицу. Будьте осторожны под своим лозунгом.