HTML+CSS+JavaScript

Начал изучать Ajax сразу же возникло множество трудностей и непониманий.
Ни как не могу понять, как работает Ajax приложение.

Вот что я понял:
1) для ассинхроной передачи запросов серверу, в большинстве случаев создается экземпляр объекта XMLHttpRequest
2) передача запроса серверу, в ответ на передачу сервер сгенирирует нам данные (не могу понять, нужно создовать приложение которое будет генерировать эти данные, и при передаче запроса указывать ссылку на это приложение?)
3) потом когда данные сгенерированы они отправляются клиенту, и функция обратного вызова window.onload или window.onreadystatechange получает эти данные. (а как эти данные использывать?)

Дальнейшие изучение даеться еще тяжелее, пока не пойму вот этого, думаю дальше двигаться бесполезно, помогите разобраться...

Заранее благодарен

1. да
2. ответ сервера - все то, что приходит в браузер, например... (текст на странице между ?> и <?, а также то что выведено print и echo...) короче, весь вывод - и есть ответ
3. направляются обратно и обрабатываются так

var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() {   if (xmlHttp.readyState < 4) return;   alert("Ответ получен: " + xmlHttp.responseText); }

ну хорошо, вроде что то понятно, а вот как проходит второй этап интересно?
мы посылаем запрос серверу, нужно же где то явно написать что мы что то посылаем, какие то параметры(например там ну не знаю запрос к базе данных или как?), а как сервер узнает что с этими данными делать?

серверу вы сами напишете, что и как ему принимать

var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() {   if (xmlHttp.readyState < 4) return;   alert("Ответ: " + xmlHttp.responseText);   xmlHttp = null; } xmlHttp.open("GET", "url.php", true); xmlHttp.send("v1=p1&v2=p2....");

скажем так, вы передаетефайлу php через аякс некие переменные со значением медом GET далее пишите стандартвый обработчик этих параметров ну и если нужно веводите результат работы скрипта через echo иловите аяксом.

>если нужно веводите результат работы скрипта через echo иловите аяксом.

А каким образом ловим?

responseText лоаим
кстати я ошибся при написании
в случае гет нпло переменные вставлять через вопр. знак в адрес
я написал для поста значит

еще один вопрос, на этой основе можно передовать любые данные? Можно ли передать рисунок? или другой файл?

можете подсказать что здесь не правильно

<script>   var req=null;   function getXMLHTTPRequest()   {     var xRequest = null;     if (window.XMLHttpRequest)     {       // Mozila/Safari       xRequest = new XMLHttpRequest();       }     else if (typeof ActiveXObject != "undefined")     {       xRequest = new ActiveXObject       // Internet explorer       ("Microsoft.XMLHTTP");     }         return Xrequest;   }   function sendRequest(url, params, HttpMethod)   {     if (!HttpMethod)     {       HttpMethod = "GET";     }     req = getXMLHTTPRequest();     if (req)     {       req.open(HttpMethod, url.php, true);       req.send("v1=p1&v2=p2");      }   }   req.onReadystatechange=function()    {     if (req.readyState < 4) return;      alert("Ответ получен: " + req.responseText);    } </script>

<script>    var req=null;    function getXMLHTTPRequest()    {      var xRequest = null;      if (window.XMLHttpRequest)      {        // Mozila/Safari        xRequest = new XMLHttpRequest();        }      else if (typeof ActiveXObject != "undefined")      {        xRequest = new ActiveXObject        // Internet explorer        ("Microsoft.XMLHTTP");      }          return xRequest;    }    function sendRequest(url, params, HttpMethod)    {      if (!HttpMethod)      {        HttpMethod = "GET";      }      req = getXMLHTTPRequest();      // Сначала присваиваем обработчик, потом уже совершаем другие действия     req.onreadystatechange=function()       {        if (req.readyState < 4) return;         alert("Ответ получен: " + req.responseText);       }      if (req)      {        req.open(HttpMethod, url+".php", true);        req.send("v1=p1&v2=p2");       }    }  </script>

ошибок вроде нет, но ничего не присылаеться, вернее сообщение не выводиться функцией alert();

как вызываете

содержимое файла url.php

<?php   echo "This is Ajax"; ?>

всего скорей не выполняеться код

req.onreadystatechange=function()        {         if (req.readyState < 4) return;          alert("Ответ получен: " + req.responseText);        }

как вызываете функцию

<script>     function rur()   {     var req=null;       function getXMLHTTPRequest()       {         var xRequest = null;         if (window.XMLHttpRequest)         {           // Mozila/Safari           xRequest = new XMLHttpRequest();           }         else if (typeof ActiveXObject != "undefined")         {           xRequest = new ActiveXObject           // Internet explorer           ("Microsoft.XMLHTTP");         }             return xRequest;       }       function sendRequest(url, params, HttpMethod)       {         if (!HttpMethod)         {           HttpMethod = "GET";         }         req = getXMLHTTPRequest();         // Сначала присваиваем обработчик, потом уже совершаем другие действия        req.onreadystatechange=function()          {           if (req.readyState < 4) return;            alert("Ответ получен: " + req.responseText);          }         if (req)         {           req.open(HttpMethod, url+".php", true);           req.send("v1=p1&v2=p2");          }       }     } </script>    <input name='news' type='radio' onclick='rur()'>

Функцию sendRequest вы, похоже, вызвать забыли.
sendRequest('url','','');

вынесите getXMLHTTPRequest и sendRequest вне функции
а эту сделайте так

function rur() { sendRequest("url"); }

отлично, я просто не много запутался, как ни как конец рабочего дня, голова кипит))) спасибо помогли...)))

Еще один вопрос.
В файле обработчике, как отлавливать переданные параметры, при использовании $_POST, $_GET выдает пустое значение, вернее ее отсутсвие. Как быть?

как отсылаете

req.send("v1=p1&v2=p2");

вот в этой строке Вы передаете нужные вам переменные. Если переменных p1 и p2 нет (а в скрипте у Вас они больше не встречаются) то соответственно и в массиве $_GET Вы ничего не нейдете.

P.S. Гораздо правильнее было бы написать не явно

req.send("v1=p1&v2=p2");

А написать вместо этого

req.send(params);

А функцию sendRequest уже вызывать от нужных Вам параметров.

при гет надо параметры ставить в .опен после вопр. знака

ну вот например у меня есть форма содержащие поле с именем login нужно передать его в параметрах файлу обработчику методом get
я бы сделал это так

var str = 'Login=' + document.all('login').value; req.send(str);

а в файле обработчике написал бы

<?php   if(isset($_GET['Login']))   {     действия    }  ?>

req.open("GET", "page?Login="+encodeURICompoment(document.all.login.value), true);

Жалуеться на отсутсвии объекта.
Вот код:

<script language="javascript">   var req=null;     function getXMLHTTPRequest()     {       var xRequest = null;       if (window.XMLHttpRequest)       {         // Mozila/Safari         xRequest = new XMLHttpRequest();         }       else if (typeof ActiveXObject != "undefined")       {         xRequest = new ActiveXObject         // Internet explorer         ("Microsoft.XMLHTTP");       }           return xRequest;     }        function sendRequest()      {         var HttpMethod = "GET";         req = getXMLHTTPRequest();         // Сначала присваиваем обработчик, потом уже совершаем другие действия        req.onreadystatechange=function()          {           if (req.readyState < 4) return;            alert("Ответ получен: " + req.responseText);          }         if (req)         {            req.open("GET", "url.php?login="+document.all('login').value, true);          req.send(null);         }       }          function login()    {     sendRequest();   } </script>   <input name='login' size=20>         <input name="log" type="button" value="проверить" onClick="login();">

Файл обработчик

<?php    if(isset($_GET['login']))   {     include('config.php');     $login_q = "Select FIO from `contacts` where FIO='".$_POST['Login']."'";     $query_status = mysql_query($login_q);     if(mysql_num_rows($query_status)==0)     {       echo "К сожелению данный Login существует";     }    else    {     echo "Вы можете продолжить регистрацию";    }  } ?>

encodeURIComponent() надо обработать

всмысли а как это сделать?

автор: bronenos   (27.11.2007 в 14:40)

req.open("GET", "url.php?login="+encodeURICompoment(document.all.login.value), true);

Выводит ошибку

Препологаеться наличие объекта

ие версии 5?
если да то http://vladgorod.ru/ajax/mirage.js

копируйте себе метод encode и испольуйте для кодирования