След като се запознахме с връзките между
PHP и AJAX сега мисля да ви покажа няколко примера в два урока, за да се уверите сами в гъвкавоста на тази технология. Ето ги и тях:
PHP и AJAX XML Пример
AJAX може да се използва за интерактивно общуване с XML файл.В примера по-долу ще покажем как уеб страница може да извежда информация от XML файл като използва AJAX.
Примера се състои от 4 файла:
- прост HTML файл
- XML файл
- JavaScript файл
- PHP страница
HTML файла
Примерът по-долу съдържа прост HTML и линк към JavaScript файл:
CODE1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form>
Избери CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<p>
<div id="txtHint"><b>Информацията ще се изпише тук.</b></div>
</p>
</body>
</html> |
Както виждате това е проста HTML форма с падащо меню наречено "cds". В параграгфа долу има елемент div наречен "txtHint". В този div ще се показва получената информация от сървъра. Когато потребителят избере някаква опция се извиква функция наречена "showCD". Изпълнението на тази функция се задейства от събитието "onchange". С други думи: Всеки път когато потрепителят промени съдържанеито на падащото меню функцията showCD се извиква.
XML файла
XML файла се нарича cd_catalog.xml. Този документ съдържа информацията за CD колекцията.
CODE1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
</CATALOG> |
JavaScript файла
Това е JavaScript файла наречен "selectcd.js":
CODE1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| var xmlHttp
function showCD(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getcd.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
} |
Функциите
stateChanged() и
GetXmlHttpObject са същище като в примера който ви показах в предишния урок.
Функцията showCD()
Ако е избрана опция от падащото меню кода се изпълнява по следния начин:
1. Извиква функцията GetXmlHttpObject за да създаде XMLHTTP обект
2. Дефинира url (filename) което да изпрати до сървъра
3. Добавя параметър (q) към url със съдържанието на падащото меню
4. Добавя произволно число за да се предотврати използването на скрити файлове.
5. Отваря XMLHTTP обекта с даденото url.
6. Изпраща HTTP request към сървъра
