Loading:

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.ftp_mdtm 2.printf() 3.setcookie 4.bzopen() 5.fstat() 6.str_pad() 7.bool isset 8.stop() 9.ftp_alloc 10.ord()

56853.05

Dynamiczna zmiana zawartości warstwy za pomocą przycisków - AJAX

Skrypt pokazuje jak za pomocą przycisków dynamicznie pobrać wyświetlaną w witrynie treść.

Listing

//index.html ###########################################

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<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="selectorsDiv" class="mainDiv">
<input type="button" class="myButton" value="Pierwszy artykuł"
onclick="loadArticle(1)" id="btn1">
<input type="button" class="myButton" value="Drugi artykuł"
onclick="loadArticle(2)" id="btn2">
<input type="button" class="myButton" value="Trzeci artykuł"
onclick="loadArticle(3)" id="btn3">
</div>
<div id="dataDiv" class="dataDiv">
</div>

</body>
</html>

//art3.html ###########################################

<p>
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
</p>

//art2.html ###########################################

<p>
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
</p>

//art1.html ###########################################

<p>
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
</p>

//ajaxcss.css ###########################################

.mainDiv
{
color: #333333;
position: relative;
background-color: #EFEFEF;
border: 1px solid #000000;
margin: 10px 10px 10px 10px;
padding: 14px 14px 14px 14px;
width: 420px;
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: 420px;
height: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;
width:120px;
margin:5px;
}

//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);
}
}

//ajax.js ###########################################

disableButtons = false;

function loadArticle(id)
{
if(disableButtons) return;
switch(id){
case 1 : url = "http://localhost/art1.html";break;
case 2 : url = "http://localhost/art2.html";break;
case 3 : url = "http://localhost/art3.html";break;
default : return;
}
disableButtons = true;
startGETRequest(url, onComplete, onEnd);
}

function onComplete(text, xml)
{
var dataDiv = document.getElementById('dataDiv');
dataDiv.innerHTML = text;
}

function onEnd(text, xml)
{
disableButtons = false;
}