Contenu Dynamique D'Ajax

Auteur: Commande Dynamique

Description: Ce manuscrit emploie Ajax pour vous permettre de charger les pages externes dans une division sans devoir recharger le browser ou employer IFRAMES. Si vos pages externes mettent en référence des css ou dossiers externes de js pour dénommer, ce manuscrit peut également les charger et appliquer à la page sur demande.

Note: En raison des limitations de sécurité, les pages externes chargées doivent être du même domaine que la page entourante. Tous les css et dossiers externes de js liés à ces pages, cependant, peuvent être de n'importe quel domaine.

Choisissez une page pour charger.

Le "forum archive" le lien illustre comment vous n'êtes pas limités aux pages justes de HTML de chargement, mais également les pages dynamiquement produites (IE: php). Les dernières expositions de lien comment vous pouvez appeler les css et les js externes classe sur demande à la page, comme en chargeant une page externe, pour lui dénommer et fournir la fonctionnalité.

Directions

Étape 1: Insérez ci-dessous le manuscrit à la section PRINCIPALE de votre page:

Choisissez Tous
<script type="text/javascript"> /*********************************************** * 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 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) } page_request.open('GET', url, 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 } } } </script>

Étape 2: Une fois que cela est fait, créez simplement les liens qui chargeront une page externe dans la division ou le récipient désirée en utilisant un ci-dessous de la syntaxe:

Lien normal:

 < un href="javascript:ajaxpage('test.htm ', '< division id="contentarea"></div > de contentarea');">test</a >

Dans le cas ci-dessus, "test.htm" est le dossier sur votre serveur que vous voulez charger, et "rightcolumn", l'identification du récipient que ce contenu sera chargé dans. Vous pouvez même charger une page externe sans exiger le déclic d'un lien, en appelant la fonction directement:

 < manuscrit type="text/javascript ">/d'ajaxpage('test.htm ', 'de rightcolumn ')/charge" test.htm "dans" < du rightcolumn "division/manuscrit >

Lien de Absolute URL de charge:

Voici une syntaxe différente de lien qui met en référence un Absolute URL au dossier sur votre serveur:

 < ' de href="javascript:ajaxpage( rootdomain+/mydir/index.htm ', < division id="contentarea"></div > de 'contentarea');">test</a >

Ceci chargera "http://www.mydomain.com/mydir/index.htm". Ici la chose importante à noter est la variable de "rootdomain". Au lieu d'indiquer littéralement le domaine de votre serveur, tel que "http://www.mydomain.com", vous devriez à la place employer le "rootdomain" et laissez le manuscrit dynamiquement déterminer ce domaine. La raison de ceci est due aux deux manières possibles que votre domaine peut être écrit, avec ou sans le préfixe de "WWW". Cette variation crée un problème dans cela si vous codiez dur votre domaine à l'intérieur du lien en utilisant une version ("http://www") et l'utilisateur regarde votre emplacement en utilisant l'autre ("HTTP://"), à Ajax, les deux domaines ne s'assortissent pas, déclenchant la limitation de sécurité mentionnée ci-dessus, et le dossier n'est pas chargé pour cet utilisateur. Le soin variable de prises de "rootdomain" de ceci en déterminant dynamiquement votre Domain Name courant en tant qu'utilisateur emploie à l'intérieur de son browser pour construire un plein URL au dossier pour charger.

Utilisation d'un menu de baisse vers le bas pour charger les liens

Certains ont demandé comment employer un menu de baisse vers le bas à la place pour choisir et charger un lien. Vous pouvez employer le code suivant:

 > < du manuscrit type="text/javascript "/* * * ajaxcombo(selectobjID combo de fonction du snippet **/ d'Ajax de charge de menu, variété selectobj=document.getElementById de loadarea){?  document.getElementById(selectobjID):  "" si (selectobj! =" "  du && selectobj.options[selectobj.selectedIndex].value  ajaxpage(selectobj.options[selectobj.selectedIndex].value, < de loadarea) }/manuscrit > < forme > < choisie identification = l'" ajaxmenu " size="1 "> l'< option value="page1.htm">Page 1</option > l'< option value="page2.htm">Page 2</option > l'< option value="subdirectory/page3.htm">Page 3</option > </choisissent > forme d''contentarea 'd'onClick="ajaxcombo(' <  pour entrer type="button" ajaxmenu ')"" de value="Go/< division id="contentarea"></div > > la </>

là où l'"ajaxmenu" est l'identification du menu < choisi > utilisé à cette fin, et "page1.htm", "page2.htm" etc.. sont les chemins relatifs aux dossiers à charger (URLs NON absolu).

Si vous avez besoin du menu de baisse vers le bas pour charger URLs absolu sur votre emplacement, modifiez juste la fonction d'"ajaxpage()" dans le code ci-dessus:

 ajaxpage( rootdomain+"/"+  selectobj.options[selectobj.selectedIndex].value, loadarea)

En conclusion, et si ce n'était pas assez, si vous souhaitez le menu de baisse vers le bas pour charger un dossier simplement en le choisissant à partir du menu (contre cliqueter sur "sautent" le bouton, changent la forme entière ci-dessus en:

 ajaxmenu 'd'onChange="ajaxcombo(de size="1 "d'" ajaxmenu"  de <  forme > < choisi l'identification  =  ', 'contentarea ')"> < dossier du value="">Select A d'option à load</option > l'< option value="page1.htm">Page 1</option > l'< option value="page2.htm">Page 2</option > l'< option value="subdirectory/page3.htm">Page 3</option > </choisissent > </forme >

Notification comment la première < option > a une valeur de (""), blanc qui informe le manuscrit pour ne pas charger n'importe quel dossier pour cette option.

Chargez la page et le lien externe de CSS/Javascript:

Si vous souhaitez dénommer vos pages externes en utilisant le CSS ou le Javascript, vous ne devriez pas les insérer directement à l'intérieur de la page externe. Plutôt, économiser eux en tant que dossiers externes (des css et des js), et laissez le manuscrit les appliquent dynamiquement quand la page externe est chargée en utilisant la fonction "loadobjs()". Voici un exemple:

< un href="javascript:ajaxpage('test.htm ', 'contentarea '); loadobjs('external.css ', 'feature.js ') "> test</a >
< division id="contentarea"></div >

Le lien ci-dessus charge non seulement "test.htm" dans une division, mais s'applique également "external.css" et "feature.js" à la page en même temps, qui vraisemblablement devrait contenir le code ce des cibles spécifiquement l'intérieur "test.htm" de HTML.

Syntaxe de loadobjs()

Notez que le loadobjs() de fonction peut appeler tout nombre dont de CSS et de dossiers externes de Javascript vous avez besoin. Par exemple:

) de loadobjs('external.css '// dossier de la charge une CSS loadobjs('external.css ', 'external2.css ', 'feature.js ')// dossiers de la charge 2 CSS et 1) du dossier loadobjs('feature.js ', 'du feature2.js ', 'du feature3.js 'de JS// dossiers de la charge 3 JS

En outre, cette fonction se rappellera quand un dossier de CSS ou de JS a été déjà chargé et appliqué à la page, et ne chargera pas le même dossier encore même si le lien qui l'appelle est cliqueté des périodes multiples. C'est dans l'intéret de l'efficacité.

Bien, c'est une enveloppe pour maintenant! Pour votre référence, vous pouvez télécharger tous les dossiers qui composent le demo ci-dessus.

Contenu Dynamique D'Ajax

Partager cet article