Уроки AJAX. Используем GET запросы.

Пришло время создать реальное и полезное web-приложение. В данном уроке будет рассмотрено взаимодействие с сервером через GET запросы, для этого мы напишем небольшой php-скрипт извлекающий информацию о сотрудниках из базы данных c использование AJAX технологии. В качестве СУБД будем использовать MySQL.

Предполагаяю что уже ознакомились с предыдущими уроками: создание XMLHttp объекта и использование XMLHttp объекта, если нет, то бегом навёрстывать упущенное :-)

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

CREATE TABLE `Customers` (
  `CustomerId` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `Name` varchar(255) NOT NULL default '',
  `Adress` varchar(255) NOT NULL default '',
  `Phone` varchar(255) NOT NULL default '',
  `E-mail` varchar(255) NOT NULL default ''
);

Давайте "забъём" туда некую информацию:

INSERT INTO `Customers`(`Name`,`Adress`,`Phone`,`E-mail`) VALUES('Иванов Иван Иванович','Московская 34, дом 3, кв. 67','8-111-777-95-64','ivanov@pentagon.gov');
INSERT INTO `Customers`(`Name`,`Adress`,`Phone`,`E-mail`) VALUES('Петр Петрович Сидоров','Деребасовская 66, дом 12, корпус 7, кв. 1','111-56-77','sidorov@mil.gov');
INSERT INTO `Customers`(`Name`,`Adress`,`Phone`,`E-mail`) VALUES('Рубан Анатолий Альбертович','ул. имени Патриса Лумумбы 66, кв 666','666-666-666','ruban@jabadabadu.com');

Для "тэст-драйва" этого вполне достаточно. Можете добавить ещё кого-нибудь, по вкусу ;-) Теперь создадим собственно ядро. Это будет PHP скрипт извлекающий из БД информацию о клиенте по его уникальному идентификатору.

Здесь всё просто. Берём id (строка 5), пробуем подключиться к серверу БД (кстати, не забудьте поменять настройки подключения), составляем запрос, фильтруем все спец символы в нём на случай потенциальной атаки злоумышленника (строка 16), далее мы исполняем этот запрос и заносим информацию в одну результирующую строку.


 
    header("Content-Type: text/plain; charset=windows-1251");
 
    $sId = $_GET['id'];
 
    
    $host = "localhost";
    $user = "user";
    $pass = "pass";
    $database = "database";
 
    $link = mysql_connect($host,$user,$pass) or die(mysql_error());
    mysql_query("SET NAMES cp1251");
    
    $query = mysql_real_escape_string("SELECT * FROM `Customers` WHERE `CustomerId` = $sId"); 
    
    @mysql_select_db($database) or ($info = mysql_error());
    
    if($result = mysql_query($query) and mysql_num_rows($result) > 0) {
        $values = mysql_fetch_array($result,MYSQL_ASSOC);
        $info = $values['Name']."
".$values['Adress']."
Phone: ".$values['Phone']."
 E-mail: ".$values['E-mail']."
";
    } else {
        $info = "There is no client with such id!";
    }
    
    mysql_close($link);
    
    echo $info;
    
?>

Один момент. Почему же в 3-й строке мы указали Content-Type: text/plain а не text/html? В данном случае лучше всё таки определить тип данных как text/plain потому что страница содержит не только HTML код. Так-же необходимо явно указать кодировку в заголовке, в случае если мы используем русские буквы, иначе начнутся проблемы. Вобщем с этим разобрались. Сохраним сценарий под именем customers.php.

Настало время подготовить нашу AJAX страничку (info.html), которая будет посылать GET запрос и получать от сервера информацию о клиентах:

<html>
<head>

<title>Информация о клиентах.title>
<meta http-equiv="Content-type:text/html" charset="cp1251">
<script language="JavaScript">


  function createXMLHttp() {
   if(typeof XMLHttpRequest != "undefined") {
    return new XMLHttpRequest();
   } else if(window.ActiveXObject) {
    var aVersions = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",
         "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp",
         "Microsoft.XMLHttp"
         ];
    for (var i = 0; i < aVersions.length; i++) {
     try {
      var oXmlHttp = new ActiveXObject(aVersions[i]);
      alert(aVersions[i]);
      return oXmlHttp;
     } catch (oError) {

     }
    }
    throw new Error("Невозможно создать объект XMLHttp.");
   }
  }

  function displayCustomerInfo(sText) {
   sElem = document.getElementById("txtCustomerInfo");
   sElem.innerHTML = sText;
  }

  function getRequest() {
   var sId = document.getElementById("txtCustomerId").value;
   var oXmlHttp = createXMLHttp();
   oXmlHttp.open("GET","customers.php?id="+sId,true);
   oXmlHttp.onreadystatechange = function() {
    if(oXmlHttp.readyState == 4) {
     if(oXmlHttp.status == 200) {
      displayCustomerInfo(oXmlHttp.responseText);
     } else {
      displayCustomerInfo("Ошибка: " + oXmlHttp.statusText);
     }
    }
   };
   oXmlHttp.send(null);
  }

script>

head>

<body>
  <center>
  Введите идентификационный номер: <input type="text" id="txtCustomerId"> <input type="button" onClick="getRequest()" value="Запрос"><br><br>
  <div id="txtCustomerInfo">div>
  center>
body>

html>

Здесь всё тоже не так сложно как кажется на первый взгял :-)
Есть три функции. createXMLHttp() - занимается тем что создаёт объект XMLHttp, особенность в том что нет привязки к конкретному браузеру.
getRequest() - эта функция отправляет асинхронный GET запрос нашему сценарию customers.php и получает ответ. Когда ответ получен, вызывается функция displayCustomerInfo(), она рамещает полученные данные в заранее созданом под эти цели div-елементе.
Вы не поверите, но это конец! Наше творение работает, и все счастливы :-)

В следующем уроке рассмотри отправку POST запросов.

I`l be back :-D

Опубликовано: 2008-06-24 22:45:04 purple_m0nkey

Собственно примерчег Гуд... Только Один огромный косяк.... При Выполнении вот этого куска displayCustomerInfo(oXmlHttp.responseText); Явчег вытягивает полностью весь скрипт с хтмло и прочим! А если он в обращаемом файле? ... То получается ЛАЖА... И пжалуйсто Расскажите немного об выводе результатов ... так сказать в правильном виде)))

Dostan

Что то там ошибок до фига =(

sasasasa

БОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРОБОДРО

Александр

Да там пару очепяток. Всё работает, подскажи только как мне из ссылки передать GET-ом значение переменной в скрипт. Т.е. вот типа того пытался а он хочет передавать. Подскажи плз. =)

Александр

Ой, что-то ону тут у тебя в комментариях обрезает хтмл код. =)(пытался сделать так "ссылка?переменная=значение" - не прокатило). Что делать? =)

NNNNNN

спасибо за код) получилось )))))

F[eeeeetttnm

Спасиб за урок, все просто и понятно, сделал по уроку. все работает, теперь попробую к своему сайту пристроить=))

Abibas220

А как сделать так, что бы возвражалось несколько значений из PHP , а затем эти значения вставлять в разные DIV. В этом примере вовращает текст со страницы CUSTOMERS,но мне надо что бы возвращало несколько значений, есть способы что бы как нибудь идентифитировать возвращенные данные??? Надеюсь вы поняли что я имел ввиду, а то я никак немогу сформулировать свой вопрос=))...

slavik

урок супер большое спасибо

wvIGjLGpealEBwk

Action requires kwnoelgde, and now I can act!

GrkfxYqPuOyHSOadqW

b5MeK7 ygostofmihaw

zqlZOdPK

K15nr1 immtftkhxelv