AJAX. Используем GET запросы. (Рейтинг: +4)

Рейтинг RU сайтов с отдачей
Печать RSS
AJAX. Используем GET запросы.

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

Итак, приступим. Для начала давайте создадим таблицу в которой будет содержаться информация о наших клиентах. Делается это следующим 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','[email protected]');
INSERT INTO `Customers`(`Name`,`Adress`,`Phone`,`E-mail`) VALUES('Петр Петрович Сидоров','Деребасовская 66, дом 12, корпус 7, кв. 1','111-56-77','[email protected]');
INSERT INTO `Customers`(`Name`,`Adress`,`Phone`,`E-mail`) VALUES('Рубан Анатолий Альбертович','ул. имени Патриса Лумумбы 66, кв 666','666-666-666','[email protected]');

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

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

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-елементе.
Вы не поверите, но это конец! Наше творение работает, и все счастливы :-)

(Источник)
Добавил: Станислав 20.08.2010 / 18:32
AJAX, JavaScript, PHP
Рейтинг: +4
Просмотры: 2394
Комментарии (1) »