Ajax i pobieranie zewnętrznych plików

14 July 2008 Comments

Przedstawiony poniżej kod jest już lekko przestarzały. Zalecam stosowania biblioteki jQuery, która jest prosta w użytkowaniu i współpracuje z wszystkimi popularnymi przeglądarkami.

Istnieje multum skryptów oferujących obsługę AJAXa. Są projekty duże oferujące bardzo dużo lecz trudne w nauce i są też proste wykonujące określoną czynność. Te drugie łatwo znaleźć na lepszych stronach ze skryptami JS/DHTML. Jedną z takich stron jest www.dynamicdrive.com. Poniżej zaprezentuję jeden ze skryptów pobierający z wykorzystaniem AJAXA inną stronę. Jest to proces asynchroniczny (może być też synchroniczny ale ten skrypt tak to robi...) czyli ładowanie się zewnętrznej strony nie wpływa na stronę macierzystą (przykład poniżej).
Poniższy kod zapis do pliku *.js, ja zapisałem jako: ajaxGetFile.js

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
var bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

Następnie stwórz dwa pliki: test.php o zawartość:

<?php

<?PHP
sleep(5);
phpinfo();
?>

Oraz index.php:

<head>
<script language="JavaScript" src="ajaxGetFile.js"></script>
</head>
<body onload="javascript:ajaxpage('test.php', 'contentarea');">
<div id="contentarea"></div>
Asynchroniczny AJAX

Po otwarciu w przeglądarce pliku index.php pojawi się napis "Asynchroniczny Ajax" a po 5 sekundach nad nim pojawi się PHPINFO. W tagu body mamy atrybut "onload" co oznacza "zrób coś przy ładowaniu strony. Jak widać w czasie ładowania strony rozpoczął się proces ładowania zewnętrznej strony lecz nie zablokował on ładowania się strony głównej. Skrypt ten zadziała pod każdą współczesną przeglądarką z tym że w Konquerorze (KDE 3.5.2) czy Operze (8.52) sypnie się formatowanie załączanej strony (phpinfo w tym przypadku). Pod Firefoxem 1.5.0.1 formatowanie zostanie zachowane.
Ładowanie pliku wyzwala funkcja javascript:ajaxpage('NAZWA PLIKU', 'ID DIVA'); gdzie ID DIVa to id taga DIV w kodzie strony. Jego zawartość zostanie zamieniona na treść ładowanej strony. Oprócz ładowania przez body można to robić w bardziej standardowe sposoby, np poprzez link:

<a href="javascript:ajaxpage('test.php', 'contentarea');">test</a>

RkBlog

PHP w Akcji, 14 July 2008

﻿Ajax i pobieranie zewnętrznych plików

Ajax i pobieranie zewnętrznych plików