[JS/AJAX] Nadpisywanie zmiennej

Odpowiedz Nowy wątek
2010-06-12 17:11
0

Witam.
Pracuję nad stworzeniem wygodnej wyszukiwarki-słowniczka w moim edytorze plików działającym przez przeglądarkę.
U góry umieściłem pole 'Szukaj', obok przycisk wywołujący funkcję z AJAXem wczytującą dane z bazy MySQL i wyświetlającą wyniki w formie zakładek opartych o JS. Wszystko dzieje się w divie o id 'wyszukiwarka'. Zakładki służą do oddzielenia wyników - każda zakładka zawiera dane z innej tabeli w bazie danych.
Po kliknięciu na zakładkę powinna zmienić się zawartość tabeli - nazwijmy ją 'tabela_wynikow'. Zmianą zawartości tabeli zajmuje się funkcja, która jest zadeklarowana na samej górze pliku wywołującego.
Chciałbym, aby działało to w ten sposób: są sobie zmienne, zadeklarowane przed deklaracją funkcji zmieniającej, którym przypisywany jest cały kod HTML (divy itp), który będzie wstawiony do 'tabela_wynikow'. Klikając na zakładkę, wywołujemy funkcję ZmienTresc(nazwa_zmiennej_przechowujacej_HTML), która podmienia nam zawartość tabeli.
Problem polega na tym, iż owy HTML można przypisać dopiero w pliku PHP wywoływanym przez AJAX. Na razie wygląda on tak:

//...
echo "<script type='text/javascript'>
zakladka1 = '<div>...i tak dalej...</div>';
zakladka2 = '<div>...i tak dalej...</div>';
//...
</script>

Wydawałoby się, że wszystko gra, ale...
zmienna1 zadeklarowana przed funkcją zmieniającą (czyli tymczasowa var zmienna1 = ;) nie jest nadpisywana przed skrypt zawarty w pliku wywoływanym przez AJAX (kod powyżej). Po kliknięciu na zakładkę wyświetla się wielkie nic, czyli (wartość przypisana do zmiennej przed wywołaniem skryptu AJAXa).
Moje pytanie brzmi: co zrobić, aby można było wywoływanym plikiem PHP zmienić wartość zmiennej z pliku wywołującego zadeklarowanej przed tym wywołaniem? Coś w tym stylu:

var zmienna1 = '';
var zmienna2 = '';
function wczytaj()
{
   //stworzenie obiektu ajaxa i takie tam
   ajax.open('GET','plik.php',false);
   document.getElementById('wyszukiwarka').innerHTML = ajax.responseText;
}

a w pliku plik.php kod poprzedni.

Pozostało 580 znaków

2010-06-12 18:00
0
  1. Czy funkcja poniżej jest synchroniczna i pewny jesteś że serwer odpowie przed wywolaniem kolejnej lini skryptu?
    ajax.open('GET','plik.php',false);

    2.Proponuje ci skorzystać z funkcji eval(ajax.responseText)
    Twój plik php powinien zwrócić

    zakladka1 = '<div>...i tak dalej...</div>';
    zakladka2 = '<div>...i tak dalej...</div>';"

    i powinieneś mieć odpowiednie wartości w zmiennych

Pozostało 580 znaków

2010-06-12 18:01
0

Gdy wstawiasz gdzieś HTML za pomocą innerHTML, to przeglądarki nie odpalają skryptów zawartych wewnątrz tagów script we wstawianym kodzie HTML. Dzieje się tak ze względów bezpieczeństwa i już od paru ładnych lat wszystkie przeglądarki w ten sam sposób ignorują skrypty w tagach script przy wstawianiu kodu za pomocą innerHTML.

Jeśli wysyłany z serwera tekst odpowiedzi zawiera wyłącznie tag script, a wewnątrz niego kod JavaScript do wykonania, i nie ma tam żadnych innych tagów, to problem można obejść bardzo łatwo.

Niech serwer nie wysyła kawałka HTML-a, czyli elementu script. Zamiast tego niech wysyła po prostu kod JavaScript do wykonania -- ten sam, który teraz jest wysyłany w tagach script.

Po otrzymaniu odpowiedzi zrób po prostu eval(ajax.responseText). Wykona to kod JavaScript, który zwrócił serwer.

Jest to jednak troszkę niebezpieczne. Czego serwer by nie zwrócił, to zostanie wykonane.

Bezpieczniejszym i prawdopodobnie bardziej eleganckim rozwiązaniem byłoby użycie JSON lub JSONP. Pogooglaj o tym, sprawdź choćby na Wikipedii. To proste i często używane techniki. Douglas Crockford napisał funkcję JSON.parse, która w bezpieczny sposób odczytuje dane w formacie JSON i zwraca te dane w postaci JavaScriptowego obiektu. Także z JSON-em można nawet uniknąć brzydkiego evala (evila :) ).

edit: To się zgadaliśmy z panem powyżej.

Pozostało 580 znaków

2010-06-13 15:38
0

Dzięki za szybką i wyczerpującą odpowiedź. Możliwe, że eval będzie trochę nieodpowiedni ze względów bezpieczeństwa, jednak strona jest na tyle niepodatna na ataki, że chyba nie powinienem się tym przejmować.
Na razie zrobię to za pomocą evala, a może w nieokreślonej przyszłości spróbuję trochę poczytać o JSONie i go tu zastosować :)
JSON kojarzy mi się z jakimś formatem zapisywania tablic, dobrze kojarzę?

Pozostało 580 znaków

2010-06-13 16:12
0

Po co mnie się o to pytasz? Pogooglaj, uzyskasz pewniejsze informacje np. na stronie standardu (jeden z pierwszych wyników -- bodaj drugi), niż od jakiegoś kolesia na forum.

JSON to format zapisu danych. Odpowiada formatowi zapisu struktur danych w JavaScripcie, przez co jest zwięzły (znacznie zwięźlejszy niż XML) i elegancki. Można w nim zapisywać obiekty, ciągi znaków, liczby, a także wspomniane przez Ciebie tablice. I wyglądają tak, jak w JavaScripcie. Choć JavaScript umożliwia trochę większą swobodę, tj. różne sposoby zapisu tych danych. JSON wybiera zwykle jeden, najprostszy z nich. Jedynie nazwy własności obiektów muszą być zamknięte w cudzysłowach/apostrofach, podczas gdy w JavaScripcie można to zrobić prościej, bez nich. Ale JS nie pozwala na pominięcie apostrofów/cudzysłowów w pewnych bardziej skomplikowanych przypadkach -- czasem i tu trzeba je dać. W JSON-ie chcieli, by zawsze było tak samo, więc te ograniczniki są konieczne.

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0