PI-Popovichenko / ПІ_ПЗС-1244_Поповіченко_Лаб№5
.docМІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Кафедра програмного забезпечення автоматизованих систем
ЗВІТ
про виконання лабораторної роботи №5
з дисципліни
«Програмування інтернет»
Перевірив:
ст. викладач
Метелап В.В
Виконав:
студентка
3-го
курсу
групи ПЗС-1244
Поповіченко
А.
Черкаси 2013
Тема роботи: організація асинхронного обміну даних в мережі WWW з використанням AJAX.
Мета роботи: навчитись розробляти AJAX-додатки для асинхронного запису і читання даних в бази даних.
Завдання:
1.Розроблений у лабораторній роботі 5 PHP-скрипт доповнити функцією читання записів з бази даних зі значеннями, що співпадають з параметрами запиту користувача і видати ці записи клієнту у форматі XML і JSON.
2.Переробити обробку значень елементу checkbox форми таким чином, аби
вони зберігались в полі бази даних типу Set.
3.Додати на сторінку з Web-формою кнопку читання даних з сервера і області для виведення результатів збереження даних PHP-скриптом і прочитаних з бази даних записів.
4.Розробити Ajax-бібліотеку з функціями асинхронного запису даних форми в базу даних і їх читання. Дані на сервер повинні передаватись по протоколу GET, або POST. Отрімані з серверу дані виводити в додані в п.3 області.
5.Додати у кнопки запису і читання Web-форми обробники подій, що викликають функції асинхронного запису і читання даних розробленої в п.4 Ajax-бібліотеки.
Структура документа
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>
lab5
</title>
<script type="text/javascript" src="ajax.js"></script>
<style>
.inStyle{
color: green;
font-family: cursive, "Century Gothic", sans-serif;
font-style: italic
}
.formStyle{
color: black;
font-family: cursive, "Century Gothic", sans-serif;
font-style: italic
}
.fieldStyle{
color: #808080;
font-family: cursive, "Century Gothic", sans-serif;
font-style: italic
}
.linkStyle{
color: #80d364;
font-family: cursive, "Century Gothic", sans-serif;
font-style: italic
}
</style>
</head>
<body>
<table>
<form action="javascript:insert()" method="post" class="formStyle">
<tr>
<td>Marshrut:</td>
<td><input type="text" name="marsh" id="marsh" onclick="toClearField(this)" class="fieldStyle"></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" name="uname" id="uname" onclick="toClearField(this)" class="fieldStyle"></td>
</tr>
<tr>
<td>Lastname:</td>
<td><input type="text" name="ulastname" id="ulastname" onclick="toClearField(this)" class="fieldStyle"></td>
</tr>
<tr>
<td>Patronimic:</td>
<td><input type="text" name="ufname" id="ufname" onclick="toClearField(this)" class="fieldStyle"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" name="uphone" id="uphone" onclick="toClearField(this)" class="fieldStyle"></td>
</tr>
<tr>
<td>Numbers:</td>
<td><input type="text" name="kol" id="kol" onclick="toClearField(this)" class="fieldStyle"></td>
</tr>
<tr>
<td><button type="submit">Save</button></td>
<td align="middle"><button type="reset">Clear</button></td>
</tr>
</form>
</table>
<div id="insert_response" class="inStyle"></div><br>
<a class="linkStyle" href="readdata.html">Saves data</a>
</body>
</html>
ajax.js
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
function insert() {
var uname = encodeURI(document.getElementById('uname').value);
var ulastname = encodeURI(document.getElementById('ulastname').value);
var ufname = encodeURI(document.getElementById('ufname').value);
var uphone = encodeURI(document.getElementById('uphone').value);
var marsh = encodeURI(document.getElementById('marsh').value);
var kol = encodeURI(document.getElementById('kol').value);
var query="&uphone="+uphone+"&uname="+uname+"&ulastname="+ulastname+"&ufname="+ufname+"&marsh="+marsh+"&kol="+kol;
http.open('post', 'insert.php?',true);
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
http.onreadystatechange = insertReply;
http.send(query);
}
function insertReply() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('insert_response').innerHTML = 'Data is recorded';
}
}
function toClearField(f){
if(f.value != ""){
f.value = "";
document.getElementById('insert_response').innerHTML = ''
}
}
getuser.php
<?php
$q=$_GET["q"];
$link = mysql_connect('localhost', 'root', '');
if (!$link)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("baza", $link)or die(mysql_error());
$query = "";
switch($q){
case 1: $query="SELECT ulastname, marsh, uphone, kol FROM transport "; break;
case 2: $query="SELECT ulastname, marsh, uphone FROM transport "; break;
}
$result = mysql_query($query);
if($q==1){
echo "<table border='1'>
<tr>
<th>User lastname</th>
<th>Marshrut</th>
<th>Phone</th>
<th>Numbers</th>
</tr>";
while($row = mysql_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['ulastname'] . "</td>";
echo "<td>" . $row['marsh'] . "</td>";
echo "<td>" . $row['uphone'] . "</td>";
echo "<td>" . $row['kol'] . "</td>";
echo "</tr>";
}
}
if($q==2){
echo "<table border='1'>
<tr>
<th>User lastname</th>
<th>Marshrut</th>
<th>Phone</th>
</tr>";
while($row = mysql_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['ulastname'] . "</td>";
echo "<td>" . $row['marsh'] . "</td>";
echo "<td>" . $row['uphone'] . "</td>";
echo "</tr>";
}
}
echo "</table>";
mysql_close($link);
?>
insert.php
<?php
if (isset($_POST["uname"])&&isset($_POST["ufname"])&&isset($_POST["uphone"])&&isset($_POST["ulastname"])&&isset($_POST["marsh"])&&isset($_POST["kol"])) {
$db_name = "baza";
$db_host = "localhost";
$table = "transport";
$user = "root";
$password = "";
$link = mysql_connect($host, $user, $password);
mysql_select_db($db_name, $link);
$query = "insert into transport (uname,ufname,ulastname,uphone,marsh,kol) VALUES ('" . $_POST['uname'] . "','" . $_POST['ufname'] . "','" . $_POST['ulastname'] . "','" . $_POST['uphone'] . "','" . $_POST['marsh'] . "','" . $_POST['kol'] . "')";
mysql_query($query, $link);
mysql_close($link);
}else{
echo "Error, no data!";
}
readdata.html
<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
<style>
.inStyle{
color: green;
font-family: "courier", sans-serif;
font-style: italic
}
</style>
</head>
<body>
<center>
<form>
<select onchange="showUser(this.value)">
<option value="">Select qwerty:</option>
<option value="1">All fields</option>
<option value="2">Lastname,phone,marsh</option>
</select>
</form>
<div id="txtHint" class="inStyle"><b>User info will be listed here.</b></div>
<a href="index.html" class="inStyle">Insert new info</a>
</center>
</body>
</html>
Web-сторінка
Висновок: виконавши лабораторну роботу, я навчився розробляти AJAX-додатки для асинхронного запису і читання даних в бази даних.