السلام عليكم ورحمة الله
لا أريد الثرثرة كثيرا عن تاريخ وبدايات تقنية الأجاكس لان Google مكتظ بها ،
بإختصار نريد أن نتعلم معاً بناء موقع بسيط المحتوى يعتمد في عمله على تقنية الأجاكس .... وبدون الخوض في شرح عمل الكود لكي نضمن اكبر كمية مستفيدين لهذا الموضوع ،،كفانا ثرثرة
لننطلق الآن :
قبل الانطلاق احب ان انوه الى انه لا يمكن تحميل الصفحات التي خارج نطاق موقعك لأسباب امنية .
لا تقم بوضع أوسمة بداية الـHTML مطلقا في جميع الصفحات ما عدا الصفحة الاولى او الصفحة الرئيسية ، وإذا اضفتها فانها لن تعمل،وهنالكـ حل بالنسبة لملفات التنسيق والالوان تجده في نهاية هذا الموضوع
وهذا مثال جاهز تم تطبيقه عبر هذا الموضوع
ولتحميل جميع ملفات هذا الموضوع اضفط هنا
أولا قم بلصق هذا الكود داخل وسم الـHead في صفحتك الرئيسية او الاساسية :
كود:
/***********************************************
* 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
var bustcacheparameter=""
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
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
}
}
}
</script>
قم بتصميم واجهتك موقعك كما تريد ....
فقط قم بادراج الروابط بالشكل التالي :
الروابط البسيطة و روابط الصور :
كود:
<a href="javascript:ajaxpage('test.htm', 'contentarea');">test</a>
الان قمنا بتجهيز الروابط ،
بعد الانتهاء من التصميم يجب ان تحدد خلية لكي يتم عرض محتويات الصفحات داخلها وتاكد من وضع تعريف الخلية بالاسم contentarea
كود HTML:
<div id="contentarea"></div>
الروابط الخارجية "من نفس الموقع":
ببساطة :
كود HTML:
<a href="javascript:ajaxpage(rootdomain+'/mydir/index.htm', 'contentarea');">test</a
المتغير : rootdomain+ يعني اسم النطاق الخاص بكـ .
تحميل وإضافة ملفات CSS :
ببساطة عبر دالة loadobjs()،،،
كود:
، loadobjs('external.css') //load one CSS file
ليكن شكل الرابط:
كود:
<a href="javascript:ajaxpage('test.htm', 'contentarea'); loadobjs('external.css' )">test</a>
جميع اكواد الجافا تم جلبها من موقع Dynamic Drive
تحياتي القلبية واتمنى اكن قد افدتكم ولو بالقليل
HaMaDa4eVeR