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