Недавно Ajax столкнулся с проблемами междомена при посещении веб-сервиса. Поиск информации в Интернете и суммировал их следующим образом (многие из них думают, что они хорошо их скопировали)
<< Используйте JSON для передачи данных, полагайтесь на JSONP в Cross-Domain >>
Сначала я добавлю свой реализованный код:
Фронт-элитный код:
$ .ajax ({type: «get», url: «http: //localhost/service1.asmx/getelevatorstatusjsondata? jsoncallback =? i ++) {alert (data [i] .id + "-" + data [i] .name);Код сервера:
/// <summary> /// Получить информацию о состоянии состояния //// </summary> /// <return> </return> [webmethod] public void geteLevatorStatusjsondata () {list <list <dinterinfo >> elepatordatas = new List <sileinfo >> (); Список FOREACH (SendDicDate Item в SearchList) {string key = item.portno + "-" + item.bordrate + "-" + item.sendtype; List <DemineInfo> deviceInfolist = (list <dinderinfo>) context.cache.get (key); elepatordatas.add (DeviceInfolist); } String result = ""; DataContractJsonserializer json = new DataContractJsonserializer (elepatordatas.getType ()); Использование (MemoryStream Stream = new MemoryStream ()) {json.writeObject (stream, elepatordatas); result = encoding.utf8.getString (stream.toarray ()); } String jsonCallback = httpcontext.current.request ["jsoncallback"]; result = jsoncallback + '(' + result + ')'; Httpcontext.current.response.write (result); Httpcontext.current.response.end (); }C#
Выше приведено код реализации, который вызывает сервер C#, и ниже приведен Java. Параметры могут быть разными, но принципы одинаковы
Java:
String callbackfunname = context.request ["callbackparam"]; context.response.write (callbackfunname + "([{/" name/":/" John/"}])");PS: параметр JSONP клиента используется для передачи параметров через URL и передавать имя параметра параметра JSONPCallback. Это трудно произносить, и в простых терминах:
JSONP: ""
jsonpcallback: ""
Кстати: в браузере Chrome вы также можете установить контекст информации о заголовке. Rosponse.addheader ("Access-Control-Ollow-Origin", "*"); На сервере для достижения цели перекрестных запросов, и нет необходимости устанавливать следующие параметры AJAX
DataType: "jsonp", jsonp: "callbackparam", jsonpcallback: "jsonpcallback1"
Данные могут быть получены в нормальном режиме запроса AJAX.
Ниже приведен принцип. Это очень разумно, когда вы читаете то, что объяснили другие:
1. Хорошо известная проблема. Ajax напрямую запрашивает обычные файлы без разрешения на доступ между доменами. Независимо от того, являетесь ли вы статической страницей, динамической веб-страницей, веб-службой или WCF, если это перекрестный запрос, он не будет правильным;
2. Однако мы обнаружили, что при вызове файлов JS на веб-странице они не влияют на то, являются ли они перекрестными доменами (не только это, мы также обнаружили, что все теги с атрибутом «SRC» имеют возможности для перекрестной области, такие как
3. Таким образом, можно судить, что на данном этапе, если вы хотите получить доступ к данным через домены через Pure Web (элементы управления ActiveX, прокси -сервер, будущие веб -сайты HTML5 и т. Д., Он должен попытаться загрузить данные в файл формата JS на удаленном сервере для вызова клиента и дальнейшей обработки;
4. Мы случайно знаем, что существует чистый формат данных символов, называемый JSON, который может кратко описать сложные данные. Что еще лучше, так это то, что JSON национально поддерживается JS, поэтому клиент может обрабатывать данные в этом формате почти так, как вы хотите;
5. Это решение выходит. Веб-клиент вызывает файл формата JS (обычно с JSON в качестве суффикса), динамически сгенерированный на сервере поперечного домена так же, как и вызывающий скрипт. Очевидно, что причина, по которой сервер хочет динамически генерировать файлы JSON, заключается в загрузке данных, необходимых клиенту.
6. После того, как клиент успешно вызывает файл JSON, он получает необходимые данные. Остальное состоит в том, чтобы обрабатывать и отображать его в соответствии с его собственными потребностями. Этот способ получения удаленных данных очень похож на Ajax, но на самом деле это отличается.
7. Чтобы облегчить клиенту использовать данные, был постепенно сформирован неформальный протокол передачи. Люди называют это JSONP. Одним из ключевых моментов этого протокола является позволить пользователям передавать параметр обратного вызова на сервер. Когда сервер возвращает данные, он будет использовать этот параметр обратного вызова в качестве имени функции для обертывания данных JSON, чтобы клиент мог настроить свои собственные функции для автоматического обработки данных возврата.
Для интеллектуальных разработчиков легко думать, что до тех пор, пока сценарий JS, предоставленный сервером, генерируется динамически, вызывающий абонент может передать параметр и сказать серверу «Я хочу, чтобы кусок кода JS вызывает функцию XXX, пожалуйста, верните его мне», поэтому сервер может генерировать сценарий JS и отвечать в соответствии с потребностями клиента.
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> </title> <script type = "text/javascript"> // Функция обратного вызова после получения информации о полете. '+' Yu piao '+data.tickets+' Zhang. }; // Предоставление URL -адреса службы JSONP (независимо от типа адреса, окончательное возвратное значение - это часть кода JavaScript) var url = "http://flightquery.com/jsonp/flightresult.aspx?code=ca1998&callback=flighthandler"; // Создать тег скрипта и установить его атрибуты var script = document.createElement ('script'); script.setattribute ('src', url); // Добавить тег скрипта в голову, и вызов запускается //document.getElementsbytagname('Head'Ehhead') neply.appendChild(Script); </script> </head> <body> </body> </html> <! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> untitled page </title> <script type = "text/javascript" src = jquery.min.js "> </script> <script type =" javascript "> jquery (yocord). Тип: «Get», Async: False, URL: «http://flightquery.com/jsonp/flightresult.aspx?code=ca1998», Datatype: «jsonp», JSONP: «Callback», // Передается в обработчик запроса или страница, чтобы получить имя параметра функции JSONP -вызова jsonpcallback: «Flighthandler», // Настраиваемое имя функции обратного вызова JSONP, по умолчанию - это имя случайной функции, автоматически сгенерированное JQUERY, или вы можете написать "?", JQUERY будет автоматически обрабатывать данные для вас успеха: функция (JSON) {Alert ('you Запросите информацию о полете: PIAO Price:' + json.price + 'yuan, и PIAO:' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + Zhang. ');Разве это не странно? Почему я не написал функцию Flighthandler на этот раз? И на самом деле это успешно! Ха -ха, это кредит jQuery. Когда JQUERY обрабатывает JSONP Type AJAX (я не могу не жаловаться. Хотя JQUERY также классифицирует JSONP в AJAX, они на самом деле не одно и то же), он автоматически генерирует функцию обратного вызова и выведет данные для метода атрибута успеха, чтобы вызвать его. Разве это не очень хорошо?