Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> AJAX pod nowoczesnymi przeglądarkami, Po prostu - skrypt nie działa.
Hazel
post
Post #1





Grupa: Zarejestrowani
Postów: 492
Pomógł: 33
Dołączył: 16.08.2007
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

Nie znam się na ajaxie, a chciałbym się poznać, bo jest przydatny, dlatego napisałem sobie z pomocą Google krótką "aplikację" ajaxową. I działa pod IE , natomiast pod nowoczesnymi przeglądarkami - nie działa. Testowałem w Operze, Flocku, Firefoxie, Safari. Tylko IE reaguje prawidłowo.
No to najpierw kod.
001.html:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  2.  "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
  3. <html>
  4. <head>
  5.    <script type="text/javascript" src="001.js"></script>
  6.    <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
  7.    <title>Wysyłanie danych</title>
  8. </head>
  9. <body>
  10. <h3>Kilka informacji o użytkowniku...</h3>
  11. <form onsubmit="sendData();return false">
  12. <p>Imię: <input type="text" name="firstname" size="20"></p>
  13.    <p>Nazwisko: <input type="text" name="lastname" size="20"> </p>
  14.    <p>Płeć: <input type="text" name="gender" size="2"> </p>
  15.    <p>Kraj pochodzenia: <input type="text" name="country" size="20"> </p>
  16.    <p><button type="submit">Wyślij dane</button></p>
  17. </form>
  18. </body>
  19. </html>
[HTML] pobierz, plaintext

To jest kod HTML. W IE działa, jak już pisałem (po zmianie zdarzenia z onsubmit formularza na onclick buttona wysyłającego oczywiście).
Kod 001.js:
Kod
/* Funkcja opakowująca do skonstruowania obiektu żądania.
Parametry:
reqType: typ żądania HTTP, na przykład GET lub POST.
url: adres URL programu serwerowego.
asynch: czy żądanie będzie wysłane asynchronicznie, czy też nie. */

function httpRequest(reqType,url,asynch){
   // Przeglądarki na bazie Mozilli.
   if(window.XMLHttpRequest){
      request = new XMLHttpRequest();
   } else if (window.ActiveXObject){
      request=new ActiveXObject("Msxml2.XMLHTTP");
      if (! request){
         request=new ActiveXObject("Microsoft.XMLHTTP");
      }
   }
   // Jeżeli nie powiodła się nawet inicjalizacja ActiveXObject,
   // wówczas żądanie wciąż może być typu null.
   if(request){
      initReq(reqType,url,asynch);
   } else {
      alert("Używana przeglądarka nie pozwala na wykorzystanie "+
         "wszystkich funkcji tej aplikacji!");
   }
}
/* Inicjalizacja obiektu żądania, który został już skonstruowany. */
function initReq(reqType,url,bool){
   /* Określamy funkcję, która będzie obsługiwała odpowiedź HTTP. */
   request.onreadystatechange=handleResponse;
   request.open(reqType,url,bool);
   request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=iso-8859-2");
   request.send(queryString);
}
function setQueryString(){
queryString="";
var frm = document.forms[0];
var numberElements = frm.elements.length;
for (var i = 0; i < numberElements; i++) {
  if(i < numberElements-1) {
   queryString += frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value)+"&";
  } else {
   queryString += frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value);
  }
}
}
var request;
var queryString;
function sendData(){
setQueryString();
var url="001.xml";
httpRequest("POST",url,true);
alert("a");
}
// Obsługa zdarzeń dla XMLHttpRequest
function handleResponse(){
if(request.readyState == 4){
  if(request.status == 200){
   alert(request.responseText);
  } else {
   alert("Wystąpił problem z komuinkacją między obiektem XMLHttpRequest, a programem serwera.");
  }
} // Koniec zewnętrznej pętli if.
}


Plik XML jest zbudowany najzupełniej poprawnie.

Widzę to tak:
Po kliknięciu buttona wykonuje się funkcja sendData(), która uruchamia SetQueryString(), która to ustawia ciąg postaci firstname=imie&lastname=nazwisko&gender=plec&country=kraj, zależnie od wpisanych danych. Następnie zostaje wykonane żądanie za pomocą httpRequest(). I chyba tutaj coś nie działa, bo za pomocą linijki alert("a"); wstawianej w różnych miejscach kodu doszedłem do tego, że we wszystkich przeglądarkach oprócz IE to tutaj skrypt się wykrusza - alert wstawiony przed tą linią wykonuje się, po tej linii - już nie. Mógłby ktoś pomóc? (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował Hazel 25.11.2007, 14:37:16
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 3)
slammer
post
Post #2





Grupa: Zarejestrowani
Postów: 187
Pomógł: 6
Dołączył: 31.08.2005
Skąd: Bielsko-Biała

Ostrzeżenie: (0%)
-----

dlaczego piszesz:
Kod
alert(request.responseText);

skoro zwracasz dane XML powinieneś pisać:
Kod
alert(request.responseXML);


To całe alert("a") na moje oko powinno znajdować się w funkcji zwrotnej, gdy wiadomo czy zapytanie zostało wykonane czy też nie.

Ten post edytował slammer 27.11.2007, 08:11:32
Go to the top of the page
+Quote Post
Hazel
post
Post #3





Grupa: Zarejestrowani
Postów: 492
Pomógł: 33
Dołączył: 16.08.2007
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

Pisałem, że tego alerta wstawiałem w róznych miejscach kodu - a wkleiłem akurat mało reprezentatywną wersję.
Za pomocą tego alerta doszedłem do tego, że poniższy kod:
1. Wyświetla alert o treści "reqType=POST".
2. Wyświetla kolejny alert o treści "url=plik.xml".
3. Wyświetla ostatni alert o treści "bool=true".
4. Alert o treści "a" nie wykonuje się, co wskazuje na błąd w metodzie open. Pod IE też nie dziala (już (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) ), przez chwilę działał, ale nie mam pojęcia, co skopałem w kodzie, że znów nie działa.
Kod
function initReq(reqType,url,bool){
   /* Określamy funkcję, która będzie obsługiwała odpowiedź HTTP. */
   request.onreadystatechange=handleResponse;
   alert("reqType=" + reqType);
   alert("url=" + url);
   alert("bool=" + bool);
   request.open(reqType,url,bool);
    alert("a");
   request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=iso-8859-2");
   request.send(queryString);
}

Zatem responseText/responseXML nie ma tutaj żadnego znaczenia, choć teoretycznie niby masz rację.

Ten post edytował Hazel 27.11.2007, 19:22:56
Go to the top of the page
+Quote Post
slammer
post
Post #4





Grupa: Zarejestrowani
Postów: 187
Pomógł: 6
Dołączył: 31.08.2005
Skąd: Bielsko-Biała

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
  3. <html>
  4. <head>
  5. <script>
  6. /* Funkcja opakowująca do skonstruowania obiektu żądania.
  7. Parametry:
  8. reqType: typ żądania HTTP, na przykład GET lub POST.
  9. url: adres URL programu serwerowego.
  10. asynch: czy żądanie będzie wysłane asynchronicznie, czy też nie. */
  11.  
  12. function httpRequest(reqType,url,asynch){
  13.    // Przeglądarki na bazie Mozilli.
  14.    if(window.XMLHttpRequest){
  15.       request = new XMLHttpRequest();
  16.    } else if (window.ActiveXObject){
  17.       request=new ActiveXObject("Msxml2.XMLHTTP");
  18.       if (! request){
  19.          request=new ActiveXObject("Microsoft.XMLHTTP");
  20.       }
  21.    }
  22.    // Jeżeli nie powiodła się nawet inicjalizacja ActiveXObject,
  23.    // wówczas żądanie wciąż może być typu null.
  24.    if(request){
  25.       initReq(reqType,url,asynch);
  26.    } else {
  27.       alert("Używana przeglądarka nie pozwala na wykorzystanie "+
  28.          "wszystkich funkcji tej aplikacji!");
  29.    }
  30. }
  31.  
  32. /* Inicjalizacja obiektu żądania, który został już skonstruowany. */
  33. function initReq(reqType,url,bool){
  34.    /* Określamy funkcję, która będzie obsługiwała odpowiedź HTTP. */
  35.    request.onreadystatechange=handleResponse;
  36.    request.open(reqType,url,bool);
  37.    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=iso-8859-2");
  38.    request.send(queryString);
  39. }
  40. function setQueryString(){
  41.   queryString="";
  42.   var frm = document.forms[0];
  43.   var numberElements = frm.elements.length;
  44.   for (var i = 0; i < numberElements; i++) {
  45.     if(i < numberElements-1) {
  46.       queryString += frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value)+"&";
  47.     } else {
  48.       queryString += frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value);
  49.     }
  50.   }
  51. }
  52. var request;
  53. var queryString;
  54. function sendData(){
  55.   setQueryString();
  56.   var url="XMLgen.php";
  57.   httpRequest("POST",url,true);
  58. }
  59. // Obsługa zdarzeń dla XMLHttpRequest
  60. function handleResponse() {
  61.   if(request.readyState == 4){
  62.     if(request.status == 200){
  63.       alert(request.responseXML);
  64.       alert("a");
  65.     } else {
  66.       alert("Wystąpił problem z komuinkacją między obiektem XMLHttpRequest, a programem serwera.");
  67.     }
  68.   } // Koniec zewnętrznej pętli if.
  69. }
  70. </script>
  71. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
  72. <title>Wysyłanie danych</title>
  73. </head>
  74. <body>
  75. <h3>Kilka informacji o użytkowniku...</h3>
  76. <form onsubmit="sendData();return false">
  77. <p>Imię: <input type="text" name="firstname" size="20"></p>
  78. <p>Nazwisko: <input type="text" name="lastname" size="20"> </p>
  79. <p>Płeć: <input type="text" name="gender" size="2"> </p>
  80. <p>Kraj pochodzenia: <input type="text" name="country" size="20"> </p>
  81. <p><button type="submit">Wyślij dane</button></p>
  82. </form>
  83. </body>
  84. </html>
[HTML] pobierz, plaintext


U mnie działa bez problemów (IMG:http://forum.php.pl/style_emoticons/default/snitch.gif)
Go to the top of the page
+Quote Post
« Następny starszy · XML, AJAX · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 19:54
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn