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.PDF_moveto 2.basename() 3.fam_close 4.touch 5.strripos() 6.ucwords() 7.tan 8.linkinfo 9.yp_next() 10.chr()

56853.05

Dynamiczna zmiana zawartości warstwy za pomocą pól wyboru - AJAX

Skrypt pokazuje jak za pomocą pól wyboru kontrolować zawartość warstwy.

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">

<span onclick="loadArticle(1)" style="cursor:pointer">
<input type="radio" name="article" value="1" id="radio1">
Pierwszy artykuł
</span>

<span onclick="loadArticle(2)" style="cursor:pointer">
<input type="radio" name="article" value="2" id="radio2">
Drugi artykuł
</span>

<span onclick="loadArticle(3)" style="cursor:pointer">
<input type="radio" name="article" value="3" id="radio3">
Trzeci artykuł
</span>

</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 changeButtonsState(id)
{
var radio1 = document.getElementById('radio1');
var radio2 = document.getElementById('radio2');
var radio3 = document.getElementById('radio3');

switch(id){
case 1 : radio1.checked = true;break;
case 2 : radio2.checked = true;break;
case 3 : radio3.checked = true;break;
default : return;
}
}

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

changeButtonsState(id);

disableButtons = true;
startGETRequest(url, onComplete, onEnd);
}

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

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