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.split 2.curl_error 3.mhash() 4.ftp_site 5.imagegif 6.assert() 7.rename 8.dechex 9.touch 10.closedir()

56853.05

Dodanie danych z serwera do już istniejącej treści - AJAX i PHP

Skrypt pokazuje jak pobrać treść z serwera i dodać ją do już istniejącej treści.

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>

//dane.php ###########################################

<?php
if(isSet($_GET["id"])){
$id = $_GET["id"];
switch($id){
case 1: $fileName = "./art1.html";break;
case 2: $fileName = "./art2.html";break;
case 3: $fileName = "./art3.html";break;
default: die("error");
}
if(($str = file_get_contents($fileName)) === false){
echo "error";
}
else{
echo $str;
}
}
else{
echo "error";
}
?>

//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;
if(id < 1 || id > 3) return;
url = "dane.php?id=" + id;
disableButtons = true;
startGETRequest(url, onComplete, onEnd);
}

function onComplete(text, xml)
{
if(text == "error"){
alert("Dane nie są dostępne.");
}
else{
var dataDiv = document.getElementById('dataDiv');
dataDiv.innerHTML += text;
}
}

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