Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery][ajax][jsonp] wysyłanie i odbieranie danych, zewnętrzna domena
Forum PHP.pl > Forum > XML, AJAX
sekwenser
9.02.2010, 02:15:48
Witam,

chcę wysyłać zapytania do zewnętrznych serwisów i uzyskiwać wyniki które zaprezentuje na swojej stronie,
wszystko w ajaxie, użytkownik uzupełnia formularz i otrzymuje wyniki.. coś jak google ajax search api..

rozwiązanie które znalazłem to JSONP..
dla celów stricte testowych pod nóż poszła strona dict.pl
dict.pl proponuje nam wstawienie na swoją stronę formularza.. oczywiście po wyniki jesteśmy przekierowani na ich stronę.. thx..
pomijając w tej chwili kwestie praw autorskich, licencji itp, tylko w celach badawczych napisałem coś takiego:

[HTML] pobierz, plaintext 
  1.  
  2. <html> 
  3. <head> 
  4.     <script type="text/javascript" src="jquery-1.4.1.min.js"></script> 
  5.  
  6.     <script type="text/javascript"> 
  7.         $(document).ready(function() { 
  8.           $('form').submit(function() {
  9.             $.getJSON('http://www.dict.pl/dict?'+$(this).serialize()+'&callback=?', function(data) {
  10.             });
  11.           return false;
  12.           });
  13.         }); 
  14.     </script> 
  15.  
  16. </head> 
  17.  
  18. <form style="margin: 0;" method="get" action="http://www.dict.pl/dict" accept-charset="utf-8">
  19.   <div style="width: 160px; padding: 3px; border: 1px outset black; background-color: #c62929; font-family: Verdana, Serif; font-size: 10px; color: #082963; text-align: center;">
  20.     <div style="width: 100%; background-color: #082963; padding: 3px 0 3px 0;">
  21.       <a style="color: white; font-size: 15px; text-decoration: none; font-weight: bold;" href="http://www.dict.pl" title="English-Polish Dictionary">DICT</a>
  22.       <br/>
  23.       <a style="color: white; text-decoration: none; font-size: 11px;" href="http://www.dict.pl" title="English-Polish Dictionary">English-Polish Dictionary</a>
  24.     </div>
  25.     <div>
  26.       <fieldset style="border: 0; color: white">Enter English or Polish term:
  27.         <br/>
  28.         <input style="width: 97%;" type="text" name="word" title="Enter your term" />
  29.         <br/>
  30.         <input style="cursor: pointer; color: #082963; font-size:90%; border-color: #082963; border-style: beveled; border-width: 2px; font-weight: bold;" type="submit" value="Search" />
  31.         <input type="hidden" name="lang" value="EN" />
  32.         </fieldset>
  33.     </div>
  34.     <div style="text-align: right;">
  35.       <a style="color: white; text-decoration: none;" href="http://www.adips.pl" title="ADIPS">System &copy; ADIPS</a>
  36.     </div>
  37.   </div>
  38. </form>
  39.  
  40. </html>
  41.  
[HTML] pobierz, plaintext


jak widać function(data) {} jest pusta.. ale nie obróbka danych jest teraz istotna, tylko syntax error jaki się pojawia..
wynikiem submita jest dynamiczne dodanie do head zewnętrznego skryptu js.. tylko zdaje się, że skrypt ten to czysty html :/
nie rozumiem tego.. nie jestem specjalistą w dziedzinie a w google nie znalazłem jawnej odpowiedzi.. jedynie wskazanie na JSONP..

Tak więc, pytanie moje: jak uzyskać zamierzony efekt ?
mile widziane jakieś przykłady, np modyfikacja tego kodu
strona chodzi na xampie, wystarczy sciągnąć bibliotekę jquery

Myślę, że temat jest ciekawy, z góry dziękuję za pomoc :)


erix
9.02.2010, 11:26:56
http://bob.pythonmac.org/archives/2005/12/...ote-json-jsonp/
sekwenser
9.02.2010, 13:39:01
nie rozumiem za bardzo tego..
ale dziękuję za link.

Z dokumentacji jquery i na podstawie przykładów użycia znalezionych w sieci
dochodzę do wniosku że po stronie odbiorcy żądania musi być przygotowany skrypt
preparujący odpowiedź.. ale czy dobrze wnioskuję tego nie wiem.. Nawet jeśli tak jest,
to czy da się coś zrobić z odpowiedzią w postaci całego kodu wynikowej strony..
erix
9.02.2010, 15:35:31
Cytat
dochodzę do wniosku że po stronie odbiorcy żądania musi być przygotowany skrypt

Właśnie...

Cytat
to czy da się coś zrobić z odpowiedzią w postaci całego kodu wynikowej strony..

Nie bardzo. Nawet jak użyjesz iframe, to przeglądarki ograniczają interakcję. Pozostaje FlashHttpRequest (gdzieś jest coś takiego; wymaga flasha) no a najpewniejszym rozwiązaniem jest skrypt-proxy po stronie serwera na Twojej domenie.
sekwenser
9.02.2010, 17:14:30
Cytat(erix)
Nawet jak użyjesz iframe, to przeglądarki ograniczają interakcję.

ewentualne użycie iframe i tak byłoby chyba problematyczne w takiej formie komunikacji, bowiem odpowiedź serwera przekazywana jest na stronę
jako js w sekcji head.. (bez względu na to czy to js czy nie, jak już wyżej ustaliliśmy, a w tym wypadku odpowiedzią jest html i co za tym idzie syntax error przy probie wykonania js (jak już wyżej ustaliliśmy ;)) )

Cytat(erix)
najpewniejszym rozwiązaniem jest skrypt-proxy po stronie serwera na Twojej domenie.

skrypt-proxy - ciekawe, próbowałem coś wygooglać na ten temat, z średnimi wynikami, później spróbują jakiś lepszych zapytań
chyba, że rzucisz jakimś linkiem :)
erix
9.02.2010, 17:36:06
No najprostsze wywołanie np. cURL-em i wypluwasz zawartość.
ADIPS
5.05.2011, 22:26:20
Prosimy bardzo o usunięcie tego tematu, gdyż zachęca on do naruszania praw autorskich.
yarpo
10.05.2011, 12:23:58
Niezbyt rozumiem, dlaczego temat ten miałby zachęcać do łamania praw autorskich. Wątek jak wątek...

Ja ze swojej strony polecę zestaw artykułów, które ostatnio napisałem na ten właśnie temat:
--moderacja--

sądzę, że proxy na cURL jest bardzo dobrym rozwiązaniem. Ewentualnie można się zastanowić nad pływająca ramką.

Aby działało onload w IE należy dodać obsługę zdarzenia 
[PHP] pobierz, plaintext 
  1. iframe.onreadystatechange = function()
  2. {
  3.     if ('loaded' === this.readyState || 'completed' === this.readyState)
  4.     {
  5.  // działamy
  6.      }
  7. }
[PHP] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.