Loading:


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

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



Napisz Artyku³

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




Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2024 v.1.5 | design: diviXdesign & rainbowcolors