Loading:

BLACK WEEK IT! [Zgarnij książkę GRATIS lub kupuj solo z rabatem do -50%]

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.empty(); 2.ftp_alloc 3.yaz_wait 4.reset 5.current() 6.ftp_delete 7.strpbrk() 8.bzerrno() 9.gmmktime() 10.assert()

56853.05

Lista rozwijana z danymi w formacie XML - AJAX i PHP

Skrypt pobiera dane z pliku XML utworzonego przez PHP i umieszcza je na liście rozwijanej.

Listing

//Kod pliku index.html #########################################

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax</title>
<link href="ajaxcss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ajaxcore.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div id="mainDiv" class="mainDiv">
<p>Proszę wybrać jeden z zestawów danych:</p>
<input type="button" value="Pierwszy zestaw" class="myButton"
onclick="startRequest(1);" id="btnZestaw1">
<input type="button" value="Drugi zestaw" class="myButton"
onclick="startRequest(2);" id="btnZestaw2">
<br><br>
<select id="listaOpcji" style="width:250px;"
onchange="listaOpcjiChange()">
</select>
</div>
<div id="dataDiv" class="dataDiv">
</div>
</body>
</html>

//Kod pliku dane.php #########################################

<?php
$zestaw1 = array(
"Java. Ćwiczenia praktyczne",
"Java. Ćwiczenia zaawansowane",
"Praktyczny kurs Java");

$zestaw2 = array(
"PHP. 101 praktycznych skryptów",
"PHP i MySQL. Dla każdego",
"PHP5. Praktyczny kurs");

if(isSet($_GET['zestaw'])){
if($_GET['zestaw'] == 1){
$zestaw = $zestaw1;
}
else if($_GET['zestaw'] == 2){
$zestaw = $zestaw2;
}
else{
echo "Nieprawidłowe dane.";
exit;
}
$dom = new DOMDocument();
$dom->encoding = "utf-8";
$opcjeEl = $dom->createElement("opcje");
$dom->appendChild($opcjeEl);

foreach($zestaw as $opcja){
$opcja = iconv("iso-8859-2", "utf-8", $opcja);
$opcjaEl = $dom->createElement("opcja");
$opcjaTxt = $dom->createTextNode($opcja);
$opcjaEl->appendChild($opcjaTxt);
$opcjeEl->appendChild($opcjaEl);
}
$xmlText = $dom->saveXML();

header("Content-type: text/xml; utf-8");
echo $xmlText;
}
else{
echo "Nieprawidłowe dane.";
}
?>

//Kod pliku ajax.css #########################################

.mainDiv
{
color: #333333;
position: relative;
background-color: #EFEFEF;
border: 1px solid #000000;
margin: 10px 10px 10px 10px;
padding: 14px 14px 14px 14px;
width: 300px;
height: 130px;
visibility: visible;
}

.dataDiv
{
color: #333333;
position: relative;
background-color: #ffffff;
border: 1px solid #000000;
margin: 10px 10px 10px 10px;
padding: 14px 14px 14px 14px;
width: 300px;

visibility: visible;
}

.myButton
{
font-family:helvetica,sans-serif;
font-size:84%;
font-weight:bold;
border:1px solid;
border-top-color:#696;
border-left-color:#696;
border-right-color:#363;
border-bottom-color:#363;
}

.myTextInput
{
border:1px solid;
background-color: #F8F8F8;
border-top-color:#696;
border-left-color:#696;
border-right-color:#363;
border-bottom-color:#363;
width:70%;
}

//Kod pliku ajaxcore.js #########################################

function getXMLHttpRequestObject()
{
try{
return new XMLHttpRequest();
}
catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
return false;
}
}
}

function startGETRequest(url, onComplete, onEnd)
{
var XMLHttpRequestObject = getXMLHttpRequestObject();
if(XMLHttpRequestObject){
XMLHttpRequestObject.open("GET", url);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4){
if(XMLHttpRequestObject.status == 200){
var responseXML = XMLHttpRequestObject.responseXML;
var responseText = XMLHttpRequestObject.responseText;
onComplete(responseText, responseXML);
}
delete XMLHttpRequestObject;
onEnd();
}
}
XMLHttpRequestObject.send(null);
}
}

function startPOSTRequest(url, params, onComplete, onEnd)
{
var XMLHttpRequestObject = getXMLHttpRequestObject();
if(XMLHttpRequestObject){
XMLHttpRequestObject.open("POST", url);
XMLHttpRequestObject.setRequestHeader(
'Content-Type', 'application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4){
if(XMLHttpRequestObject.status == 200){
var responseXML = XMLHttpRequestObject.responseXML;
var responseText = XMLHttpRequestObject.responseText;
onComplete(responseText, responseXML);
}
delete XMLHttpRequestObject;
onEnd();
}
}
XMLHttpRequestObject.send(params);
}
}

//Kod pliku ajax.js #########################################

function listaOpcjiChange()
{
var div = document.getElementById("dataDiv");
var listaOpcji = document.getElementById("listaOpcji");
var str = listaOpcji[listaOpcji.selectedIndex].value;
div.innerHTML = str;
}

function startRequest(zestaw)
{
var btnZestaw1 = document.getElementById('btnZestaw1');
var btnZestaw2 = document.getElementById('btnZestaw2');
btnZestaw1.disabled = true;
btnZestaw2.disabled = true;

url = "http://localhost/dane.php?zestaw=" + zestaw;
startGETRequest(url, onComplete, onEnd);
}

function onEnd()
{
var btnZestaw1 = document.getElementById('btnZestaw1');
var btnZestaw2 = document.getElementById('btnZestaw2');

btnZestaw1.disabled = false;
btnZestaw2.disabled = false;
}

function przetwarzajXML(xml)
{
var listaOpcji = document.getElementById("listaOpcji");
var opcje = xml.documentElement.childNodes;

listaOpcji.options.length = 0;
listaOpcji[0] = new Option("Wybierz jedną z opcji", "");
for(var i = 0; i < opcje.length; i++){
if(opcje[i].nodeType == 1){
var opcja = opcje[i].firstChild.nodeValue;
listaOpcji[i + 1] = new Option(opcja, opcja);
}
}
}

function onComplete(text, xml)
{
if (!xml || !xml.documentElement){
alert(text);
}
else if (xml.documentElement.nodeName == "parsererror"){
alert(text);
}
else{
przetwarzajXML(xml);
}
}