آگهی
article

نمایش داینامیک و صفحه به صفحه مطالب با ای جکس (Ajax)

ajax-dynamic-page-to-page

استفاده از ای جکس (Ajax) به عنوان تکنیک نوین در عرصه وب در خیلی از مواقع گزینه مناسبی برای نمایش محتوا به صورت جذابتر و راه حلی برای طراحی رابط کاربری حرفه ای تر است، مهمتر از اینها صرفه جویی در استفاده از منابع سرور و کمک به بارگذاری سریع تر صفحات در سمت کاربر مخصوصا برای مواقعی که کیفیت و سرعت اینترنت پائین است از مزیت های عمده استفاده از ای جکس (Ajax) محسوب می شود، با این وجود قبل از دخیل کردن این قابلیت در کدنویسی صفحات وب باید دقت کافی داشته و ظرافت به خرج دهیم، اگر بخواهیم از کتابخانه های آماده یا فریم ورک های (Framework) ای جکس که بعضا حجمی فراتر از 100 کیلوبایت دارند برای پروژه ها و صفحاتی که سرعت بارگذاری و سهولت پیمایش در آنها از اهمیت بالایی برخوردار است استفاده کنیم با وضعیت کیفیت اینترنت در شرایط پائین به مشکل برخواهیم خورد، علاوه بر این ممکن است از سمت سرور نیز به لحاظ حجم داده های رد و بدل شده (ترافیک) محدود شده باشیم و واضح است که هرچه اطلاعات بیشتری از سرور فراخوانی شود این محدودیت سریعتر گریبانگیر خواهد شد، در هر صورت راه حل بهینه این است که کدهای سبک و ساده اما با قدرتمندی و کاربری مشابه را جایگزین سورس های حجیم کنیم، به همین منظور در این مطلب اسکریپتی کاربردی را بررسی می کنیم که به کمک آن می توانیم محتوای HTML را به صورت صفحه به صفحه و به شکلی حرفه ای بارگذاری کرده و نمایش دهیم.

نکته: قبل از پرداختن به ادامه آموزش یادآور می شویم اسکریپت ارائه شده در این مطلب توسط برنامه نویسان خارجی و سازگار با زبان انگلیسی نوشته شده است، برای راحتی کاربران فارسی زبان کدهای اسکریپت را متناسب با زبان فارسی بهینه سازی کرده ایم تا به بهترین شکل و بدون نقص قابل استفاده باشد.

دانلود اسکریپت نمایش داینامیک مطالب با ای جکس


قبل از هر چیز ابتدا بسته زیر را دریافت می کنیم، این بسته حاوی چند فایل با نام های ajax-pagetopage.html (صفحه اصلی و اول برنامه جهت فراخوانی در مرورگر و تست)، ajax-pagetopage.css (فایل استایل CSS برنامه جهت اعمال تنظیمات مربوط به شکل ظاهری و سفارشی سازی)، ajax-pagetopage.js (فایل اصلی برنامه حاوی کدنویسی جاوا اسکریپت و ای جکس)، loading.gif (تصویر متحرک با فرمت gif جهت نمایش پیام محتوا در حال بارگذاری است...) و یک فولدر حاوی چهار نمونه صفحه با فرمت html که با هر درخواست کاربر محتوا از این دایرکتوری بارگذاری شده و عملکرد اسکریپت مشخص می شود.
دانلود اسکریپت بارگذاری داینامیک مطالب با ای جکس - حجم: کمتر از 10 کیلوبایت

نحوه استفاده از اسکریپت نمایش داینامیک مطالب با ای جکس


استفاده از این اسکریپت بسیار آسان و سریع است، کافی است صفحات مورد نظر خود را در فولدر pages در لوکال هاست یا سرور قرار دهیم و سپس مطابق تنظیمات فایل نمونه (که در بسته بالا قرار داده شده است) فایل های ajax-pagetopage.css و ajax-pagetopage.js را آدرس دهی کرده و در نهایت فایل ajax-pagetopage.html برنامه را در مرورگر فراخوانی کنیم، با این وجود برای آشنایی بیشتر و جلوگیری از سردرگمی در ادامه گام به گام مراحل کار را شرح می دهیم.

فایل ajax-pagetopage.html، اعمال تنظیمات اصلی و فراخوانی در مرورگر


فایل ajax-pagetopage.html به صورت نمونه برای اعمال تنظیمات اصلی و فراخوانی برنامه در مرورگر کاربرد دارد، این فایل در واقع نقش صفحه Index را داشته و حاوی نمونه تنظیماتی است که با پیروی از آنها می توانیم محتوای مورد نظر خودمان را جایگزین کنیم، در قسمت head عنوان صفحه و فایل CSS و JavaScript اسکریپت را در تگ link و script وارد می کنیم:
<link rel="stylesheet" type="text/css" href="ajax-pagetopage.css">
<script src="ajax-pagetopage.js"></script>
دقت کنیم که آدرس دهی در قسمت href و src صحیح تنظیم شده باشد.
در تگ body نیز سه بلاک div به صورت نمونه زیر درج می کنیم:
<div id="pagetopage-top"></div>
<div id="ajaxcontent"></div>
<div id="pagetopage-bottom"></div>
این سه بلاک قسمت بالا، محتوا و قسمت پائینی خروجی را در خود نمایش می دهند، مقادیر id ها باید مطابق نمونه تنظیم شوند.
در نهایت باید صفحات موجود در دایرکتوری pages را به اسکریپت معرفی و برنامه را فراخوانی کنیم که این کار در قسمت زیر انجام می شود:
<script>
var ajaxonpages = {
    pages: ["pages/example1.html", "pages/example2.html", "pages/example3.html", "pages/example4.html"],
    selectedpage: 0 //set page shown by default (0 = 1st page)
};

var myajaxinstance = new ajaxpageclass.createajax(ajaxonpages, "ajaxcontent", ["pagetopage-top", "pagetopage-bottom"]);
</script>
دقت کنیم که حتما بلاک های div بالاتر از کد جاوا اسکریپت قرار داده شوند، در غیر اینصورت ممکن است موجب از کار افتادن برنامه شود.

فایل ajax-pagetopage.css، اعمال تغییرات ظاهری و سفارشی سازی


فایل ajax-pagetopage.css برای اعمال تغییرات ظاهری و سفارشی سازی پارامترهای مختلف شامل رنگ بندی ها، تنظیم پس زمینه، تغییر اندازه ها و مواردی از این دست کاربرد دارد، اگر به هر دلیل نیاز به تغییر شکل فعلی برنامه وجود داشته باشد با داشتن آشنایی با CSS و تسلط نسبی بر استایل نویسی وب می توانیم مقادیر را به صورت دلخواه ویرایش کنیم.
.pagetopaging {
    padding: 2px;
    margin: 1em 0;
    clear: both;
}
.pagetopaging ul {
    margin: 0;
    padding: 0;
    text-align: right; /*Set to "left" or "right" to left/right align pagetopaging interface*/
    font-size: 100%;
}
.pagetopaging li {
    list-style-type: none;
    display: inline;
    padding-bottom: 1px;
}
*:first-child + html .pagetopaging li a { /*IE7 only CSS hack*/
    margin-right: 4px; /*IE bug causes default spacing between links to disappear, so added it explicitly in IE7 */
}
* html .pagetopaging li a { /*IE6 and below CSS hack*/
    margin-right: 4px; /*IE bug causes default spacing between links to disappear, so added it explicitly in IE6 and below browsers*/
}
.pagetopaging a, .pagetopaging a:visited, .pagetopaging a:active {
    padding: 0 5px;
    border: 1px solid #9aafe5;
    text-decoration: none;
    color: #2e6ab1;
}
.pagetopaging a:hover {
    border: 1px solid #2b66a5;
    color: #000;
    background-color: #f9f9f9;
}
.pagetopaging a.currentpage { /*Style for currently selected page link*/
    background-color: #2e6ab1;
    color: #FFF !important;
    border-color: #2b66a5;
    font-weight: bold;
    cursor: default;
}
.pagetopaging a.disabled, .pagetopaging a.disabled:hover { /*Style for "disabled" previous or next link*/
    background-color: white;
    cursor: default;
    color: #929292;
    border-color: transparent;
}
.pagetopaging a.prevnext { /*Style for previous and next link*/
    font-weight: bold;
}
همان طور که مشخص است خاصیت های استایل CSS برای مرورگرهای قدیمی مانند اینترنت اکسپلورر نیز سازگار شده اند.

فایل ajax-pagetopage.js، کدنویسی جاوا اسکریپت و ای جکس


فایل ajax-pagetopage.js ترکیبی از کدهای جاوا اسکریپت و ای جکس است که به صورت شی گرا نوشته شده است، به طور خلاصه این فایل با توجه به صفحه درخواستی کاربر تقاضایی به سرور ارسال می کند و در مقابل محتوای فایل HTML مقصد را به عنوان پاسخ درخواست دریافت کرده و در بلاک های div خروجی می دهد، همان طور که دیدیم فایل ajax-pagetopage.js را باید در قسمت head صفحه اصلی به صورت زیر وارد کنیم:
<script src="ajax-pagetopage.js"></script>
محتویات فایل ajax-pagetopage.js کدنویسی اصلی برنامه و سازگار شده با زبان فارسی:
var ajaxpageclass = new Object();
//HTML to show while requested page is being fetched
ajaxpageclass.loadstatustext = '<img src="loading.gif" alt="loading" height="16" width="16">چند لحظه صبر کنید...';
//Bust cache when fetching pages?
ajaxpageclass.ajaxbustcache = false;
//enable persistence of last viewed pagetopaging link (so reloading page doesn't reset page to 1)?
ajaxpageclass.pagetopagepersist = true;
//Limit page links displayed to a specific number (useful if you have many pages in your ajax)?
ajaxpageclass.pagerange = 4;
//Ellipse text (no HTML allowed)
ajaxpageclass.ellipse = "...";

/////////////// No need to edit beyond here ///////////////
ajaxpageclass.connect = function(pageurl, divId){
    var page_request = false;
    var bustcacheparameter = "";

    if(window.XMLHttpRequest && !document.all){
        //if Mozilla, Safari etc (skip IE7, as object is buggy in that browser)
        page_request = new XMLHttpRequest();
    } else if(window.ActiveXObject){
        //if IE6 or below
        try{
            page_request = new ActiveXObject("Msxml2.XMLHTTP")
        } catch(e){
            try{
                page_request = new ActiveXObject("Microsoft.XMLHTTP")
            } catch(e){

            }
        }
    } else{
        return false;
    }

    document.getElementById(divId).innerHTML = this.loadstatustext; //Display "fetching page message"
    page_request.onreadystatechange = function(){
        ajaxpageclass.loadpage(page_request, divId);
    };

    if(this.ajaxbustcache) //if bust caching of external page
        bustcacheparameter = (pageurl.indexOf("?") != -1) ? "&" + new Date().getTime() : "?" + new Date().getTime();
    page_request.open('
GET', pageurl + bustcacheparameter, true);
    page_request.send(null);
};

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

ajaxpageclass.getCookie = function(Name){
    var re = new RegExp(Name + "=[^;]+", "i"); //construct RE to search for target name/value pair

    if(document.cookie.match(re)) //if cookie found
        return document.cookie.match(re)[0].split("=")[1]; //return its value
    return null;
};

ajaxpageclass.setCookie = function(name, value){
    document.cookie = name + "=" + value;
};

ajaxpageclass.getInitialPage = function(divId, pageinfo){
    var persistedpage = this.getCookie(divId);
    var selectedpage = (this.pagetopagepersist && this.getCookie(divId) != null) ? parseInt(this.getCookie(divId)) : pageinfo.selectedpage;
    return (selectedpage > pageinfo.pages.length - 1) ? 0 : selectedpage; //check that selectedpage isn'
t out of range
};

ajaxpageclass.createajax = function(pageinfo, divId, pagetopageIds){ //MAIN CONSTRUCTOR FUNCTION
    this.pageinfo = pageinfo; //store object containing URLs of pages to fetch, selected page number etc
    this.divId = divId;
    this.pagetopageIds = pagetopageIds; //array of ids corresponding to the pagetopaging DIVs defined for this pageinstance
    //NOTE: this.pagetopageInfo stores references to various components of each pagetopaging DIV defined for this pageinstance
    //NOTE: Eg: divs[0] = 1st pagetopage div, pagelinks[0][0] = 1st page link within 1st pagetopage DIV, prevlink[0] = previous link within pagetopage DIV etc
    this.pagetopageInfo = {
        divs: [],
        pagelinks: [[]],
        prevlink: [],
        nextlink: [],
        previouspage: null,
        previousrange: [null, null],
        leftellipse: [],
        rightellipse: []
    };
    this.dopagerange = false;
    this.pagerangestyle = '';
    this.ellipse = '<span style="display:none">' + ajaxpageclass.ellipse + '</span>'; //construct HTML for ellipse
    var initialpage = ajaxpageclass.getInitialPage(divId, pageinfo);
    this.buildpagetopaging(initialpage);
    this.selectpage(initialpage);
};

ajaxpageclass.createajax.prototype = {
    buildpagetopaging: function(selectedpage){ //build pagetopaging links based on length of this.pageinfo.pages[]
        this.dopagerange = (this.pageinfo.pages.length > ajaxpageclass.pagerange); //Bool: enable limitpagerange if pagerange value is less than total pages available
        this.pagerangestyle = this.dopagerange ? 'style="display:none"' : ''; //if limitpagerange enabled, hide pagetopaging links when building them
        this.pagetopageInfo.previousrange = null; //Set previousrange[start, finish] to null to start
        if(this.pageinfo.pages.length <= 1){ //no 0 or just 1 page
            document.getElementById(this.pagetopageIds[0]).innerHTML = (this.pageinfo.pages.length == 1) ? "Page 1 of 1" : "";
            return;
        } else{ //construct pagetopage interface
            var pagetopageHTML = '<div class="pagetopaging"><ul>\n';
            pagetopageHTML += '<li><a href="#previous" rel="' + (selectedpage - 1) + '">«</a></li>\n'; //previous link HTML
            for(var i = 0; i < this.pageinfo.pages.length; i++){
                var ellipses = {
                    left: (i == 0 ? this.ellipse : ''),
                    right: (i == this.pageinfo.pages.length - 1 ? this.ellipse : '')
                }; //if this is 1st or last page link, add ellipse next to them, hidden by default
                pagetopageHTML += '<li>' + ellipses.right + '<a href="#page' + (i + 1) + '" rel="' + i + '" ' + this.pagerangestyle + '>' + (i + 1) + '</a>' + ellipses.left + '</li>\n';
            }
            pagetopageHTML += '<li><a href="#next" rel="' + (selectedpage + 1) + '">بعدی »</a></li>\n'; //next link HTML
            pagetopageHTML += '</ul></div>';
        }//end construction
        this.pagetopageInfo.previouspage = selectedpage; //remember last viewed page
        for(var i = 0; i < this.pagetopageIds.length; i++){ //loop through # of pagetopaging DIVs specified
            var pagetopagediv = document.getElementById(this.pagetopageIds[i]); //reference pagetopaging DIV
            this.pagetopageInfo.divs[i] = pagetopagediv; //store ref to this pagetopage DIV
            pagetopagediv.innerHTML = pagetopageHTML;
            var pagetopagelinks = pagetopagediv.getElementsByTagName("a");
            var ellipsespans = pagetopagediv.getElementsByTagName("span");
            this.pagetopageInfo.prevlink[i] = pagetopagelinks[0];
            if(pagetopagelinks.length > 0)
                this.pagetopageInfo.nextlink[i] = pagetopagelinks[pagetopagelinks.length - 1];
            this.pagetopageInfo.leftellipse[i] = ellipsespans[0];
            this.pagetopageInfo.rightellipse[i] = ellipsespans[1];
            this.pagetopageInfo.pagelinks[i] = []; //array to store the page links of pagetopaging DIV
            for(var p = 1; p < pagetopagelinks.length - 1; p++){
                this.pagetopageInfo.pagelinks[i][p - 1] = pagetopagelinks[p];
            }
            var pageinstance = this;
            pagetopagediv.onclick = function(e){
                var targetobj = window.event ? window.event.srcElement : e.target;
                if(targetobj.tagName == "A" && targetobj.getAttribute("rel") != ""){
                    if(!/disabled/i.test(targetobj.className)){ //if this pagetopaging link isn't disabled (CSS classname "disabled")
                        pageinstance.selectpage(parseInt(targetobj.getAttribute("rel")));
                    }
                }
                return false;
            }
        }
    },

    selectpage: function(selectedpage){
        //replace URL'
s root domain with dynamic root domain (with or without "www"), for ajax security sake:
        if(this.pageinfo.pages.length > 0){
            var ajaxfriendlyurl = this.pageinfo.pages[selectedpage].replace(/^http:\/\/[^\/]+\//i, "http://" + window.location.hostname + "/");
            ajaxpageclass.connect(ajaxfriendlyurl, this.divId); //fetch requested page and display it inside DIV
        }
        if(this.pageinfo.pages.length <= 1) //if this ajax only contains only 1 page (or 0)
            return; //stop here
        var pagetopageInfo = this.pagetopageInfo;
        for(var i = 0; i < pagetopageInfo.divs.length; i++){ //loop through # of pagetopaging DIVs specified
            //var pagetopagediv=document.getElementById(this.pagetopageIds[i]);
            pagetopageInfo.prevlink[i].className = (selectedpage == 0) ? "prevnext disabled" : "prevnext"; //if current page is 1st page, disable "prev" button
            pagetopageInfo.prevlink[i].setAttribute("rel", selectedpage - 1); //update rel attr of "prev" button with page # to go to when clicked on
            pagetopageInfo.nextlink[i].className = (selectedpage == this.pageinfo.pages.length - 1) ? "prevnext disabled" : "prevnext";
            pagetopageInfo.nextlink[i].setAttribute("rel", selectedpage + 1);
            pagetopageInfo.pagelinks[i][pagetopageInfo.previouspage].className = ""; //deselect last clicked on pagetopaging link (previous)
            pagetopageInfo.pagelinks[i][selectedpage].className = "currentpage"; //select current pagetopaging link
        }
        pagetopageInfo.previouspage = selectedpage; //Update last viewed page info
        ajaxpageclass.setCookie(this.divId, selectedpage);
        this.limitpagerange(selectedpage); //limit range of page links displayed (if applicable)
    },

    limitpagerange: function(selectedpage){
        //reminder: selectedpage count starts at 0 (0=1st page)
        var pagetopageInfo = this.pagetopageInfo;
        if(this.dopagerange){
            var visiblelinks = ajaxpageclass.pagerange - 1; //# of visible page links other than currently selected link
            var visibleleftlinks = Math.floor(visiblelinks / 2); //calculate # of visible links to the left of the selected page
            var visiblerightlinks = visibleleftlinks + (visiblelinks % 2 == 1 ? 1 : 0); //calculate # of visible links to the right of the selected page
            if(selectedpage < visibleleftlinks){ //if not enough room to the left to accomodate all visible left links
                var overage = visibleleftlinks - selectedpage;
                visibleleftlinks -= overage; //remove overage links from visible left links
                visiblerightlinks += overage; //add overage links to the visible right links
            }
            else if((this.pageinfo.pages.length - selectedpage - 1) < visiblerightlinks){ //else if not enough room to the left to accomodate all visible right links
                var overage = visiblerightlinks - (this.pageinfo.pages.length - selectedpage - 1);
                visiblerightlinks -= overage; //remove overage links from visible right links
                visibleleftlinks += overage; //add overage links to the visible left links
            }
            var currentrange = [selectedpage - visibleleftlinks, selectedpage + visiblerightlinks]; //calculate indices of visible pages to show: [startindex, endindex]
            var previousrange = pagetopageInfo.previousrange; //retrieve previous page range
            for(var i = 0; i < pagetopageInfo.divs.length; i++){ //loop through pagetopage divs
                if(previousrange){ //if previous range is available (not null)
                    for(var p = previousrange[0]; p <= previousrange[1]; p++){ //hide all page links
                        pagetopageInfo.pagelinks[i][p].style.display = "none";
                    }
                }
                for(var p = currentrange[0]; p <= currentrange[1]; p++){ //reveal all active page links
                    pagetopageInfo.pagelinks[i][p].style.display = "inline";
                }
                pagetopageInfo.pagelinks[i][0].style.display = "inline"; //always show 1st page link
                pagetopageInfo.pagelinks[i][this.pageinfo.pages.length - 1].style.display = "inline"; //always show last page link
                pagetopageInfo.leftellipse[i].style.display = (currentrange[0] > 1) ? "inline" : "none"; //if starting page is page3 or higher, show ellipse to page1
                pagetopageInfo.rightellipse[i].style.display = (currentrange[1] < this.pageinfo.pages.length - 2) ? "inline" : "none"; //if end page is 2 pages before last page or less, show ellipse to last page
            }
        }
        pagetopageInfo.previousrange = currentrange;
    },

    refresh: function(pageinfo){
        this.pageinfo = pageinfo;
        var initialpage = ajaxpageclass.getInitialPage(this.divId, pageinfo);
        this.buildpagetopaging(initialpage);
        this.selectpage(initialpage);
    }
};
توضیح:
- مواردی که در این کد قابل تغییر هستند، متد ajaxpageclass.loadstatustext مربوط به پیام درحال بارگذاری، قسمت ajaxpageclass.ajaxbustcache = false مربوط به تنظیمات حافظه موقت یا به اصطلاح کش شدن صفحات (دو مقدار true یا false)، قسمت ajaxpageclass.pagetopagepersist مربوط به ذخیره شدن یا نشدن صفحات انتخابی کاربر (به طور مثال اگر کاربر در صفحه 2 دکمه رفرش را کلیک کند، پس از بارگذاری مجدد صفحه اسلاید از صفحه دوم شروع می شود نه از صفحه اول) این قابلیت توسط کوکی (Cookie) میسر می شود و در نهایت متد ajaxpageclass.pagerange برای مشخص کردن حداکثر تعداد لینک ها برای حالت صفحه به صفحه.

پیش نمایش بارگذاری داینامیک مطالب با ای جکس


در خاتمه این آموزش نمونه کد و پیش نمایش آنلاین این اسکریپت را جهت تست و بررسی قرار داده ایم که می توانیم از آن جهت پیش آگاهی از نحوه عملکرد برنامه استفاده کنیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمایش صفحه به صفحه با ای جکس</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
</style>
<link rel="stylesheet" type="text/css" href="ajax-pagetopage.css">
<script src="ajax-pagetopage.js"></script>
</head>
<body>
<div id="pagetopage-top"></div>
<div id="ajaxcontent"></div>
<div id="pagetopage-bottom"></div>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است!</noscript>
<script>
var ajaxonpages = {
    pages: ["pages/example1.html", "pages/example2.html", "pages/example3.html", "pages/example4.html"],
    selectedpage: 0 //set page shown by default (0 = 1st page)
};

var myajaxinstance = new ajaxpageclass.createajax(ajaxonpages, "ajaxcontent", ["pagetopage-top", "pagetopage-bottom"]);
</script>
<hr>
در متغیر selectedpage می توانیم صفحه پیش فرض را مشخص کنیم، عدد 0 در اینجا به معنی صفحه 1 است!
</body>
</html>
پیش نمایش آنلاین
sectionدسته بندی: آموزش کاربردی » Ajax
related مطالب بیشتر:
» ساخت قابلیت امتیازدهی با PHP و Ajax
» نمایش نتایج پایگاه داده MySQL با PHP و ای جکس (Ajax)
» آموزش نحوه آپلود فایل با PHP و ای جکس (Ajax)
» اعتبار سنجی همزمان فرم با آژاکس (Ajax) و PHP
» لیست داینامیک پیشنهاد کلمات، مبتنی بر ای جکس، PHP و MySQL
commentنظرات (۱۸ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: یوشا
زمان: ۱۳:۵۹:۳۸ - تاریخ: ۱۳۹۱/۱۱/۲۰
سلام
آموزش خیلی خوبی بود...
حال داد!
نویسنده: Saeid
زمان: ۱۱:۰۵:۵۰ - تاریخ: ۱۳۹۱/۱۲/۲۲
سلام ، آموزش هاتون بیسته :-)
نویسنده: ابوالفضل
زمان: ۱۱:۵۱:۴۶ - تاریخ: ۱۳۹۱/۱۲/۲۸
سلام من میخام بجای صفحات html که بار گذاری میکنه
صفحات php بهش بدم اما وقتی فرمت رو تغییر میدم دیگه کار نمیکنه و روی لودینگ میمونه باید چیکار کنم
پاسخ: 
باید در دو قسمت فایل ها را مطابق با php تنظیم کنید، یک مورد نام خود فایل ها است که در فولدر pages قرار می گیرند، فرمت این فایل ها باید php باشد، مورد دیگر قسمت مربوط به تنظیم آدرس صفحات در کد است یعنی این تکه کد:
pages: ["pages/example.php", "pages/example2.php", "pages/example3.php", "pages/example4.php"]
که مطابق نمونه باید با نام فایل ها مطابقت کند، اگر این دو مرحله را درست انجام دهید نباید مشکل دیگری باشد.
نکته: نمایش پیام در حال بارگذاری و بارگذاری نشدن صفحات به این معنی است که فایل پیدا نشده است.
نویسنده: مازیار
زمان: ۲۳:۲۱:۳۹ - تاریخ: ۱۳۹۲/۰۲/۰۷
سلام
من یک سوال داشتم که گمان کنم به همین مطلب مربوط باشد در صفحه سرچ تصویر گوگل وقتی سرچ می کنیم به طور مثال 10 تصویر لود می کند وقتی اسکرول را پایین می اوریم 10 تصویر بعدی لود می شود به همین ترتیب هر چه قدر اسکرول پایین تر می اید تصاویر بیشتری لود می شود و کل تصاویر یکجا بارگذاری نمی شود لطفا در صورت امکان آموزش این مورد را در سایت قرار دهید ممنون
پاسخ: 
ممنون از پیشنهاد خوب شما، به دلیل حجم بالای آموزش های درخواستی کاربران و فرصت کم، مدتی زمان خواهد برد تا به این آموزش پرداخته شود، ضمن اینکه انجام این مورد نیازمند آشنایی با موارد پیچیده تری از جاوا اسکریپت و ای جکس است.
نویسنده: Abolfazl
زمان: ۲۲:۱۳:۰۶ - تاریخ: ۱۳۹۲/۰۳/۰۴
سلام
چطوری به جای شماره ی صفخات نام اونها رو قرار بدم مثلا ثبت نام، ورود،....؟
پاسخ: 
برای این کار باید فایل ajax-pagetopage.js را ویرایش و خط 106 قسمت مربوط به ایجاد لینک را که در حلقه for قرار دارد مطابق نیازتان تغییر دهید، در حالت پیش فرض i + 1 به عنوان عبارت لینک قرار می گیرد.
نویسنده: masuod
زمان: ۱۶:۵۶:۰۹ - تاریخ: ۱۳۹۲/۰۵/۲۹
سلام من میخوام به جای این پیج ها عکس قرار بدم که با کلیک روی هر کدام صفحه مورد نظر باز بشه.
مثل یه گالری عکس باشه اما عکس رو برام بزرگ نکنه بلکه یه html یا swf را برام باز کنه و عکس ها هم بصورت کشوئی جا بجا بشه.
اینم با آژاکس حل میشه.
لطفا راهنمایی کنید؟
پاسخ: 
برای این کار باید به دنبال یک اسلایدر تصاویر باشید، توانایی کد حاضر در حدی است که ملاحظه می کنید، بیش از این نیاز به کدنویسی و تغییرات زیادی دارد، البته برای صرف نمایش عکس یا فلش می توانید کدها را در صفحات HTML حاضر درج کنید.
نویسنده: سعید
زمان: ۱۱:۴۹:۴۹ - تاریخ: ۱۳۹۲/۰۶/۲۶
سلام
ممنون از مطالب و آموزش های خوبتون.
من این آموزش رو پیاده کردم و به خوبی هم جواب داد. منتها من می خوام این رو توی چند جای مختلف سایتم استفاده کنم، که البته باز هم به درستی کار می کنه و تنها مشکلی که پیش میاد، بحث کش یا همون کوکی هاست.
میشه لطفاً راهی رو بگید تا بشه برای هر صفحه مختلفی که از این آموزش استفاده میشه، کوکی ها و کش متفاوتی ایجاد بشه؟
ممنون
پاسخ: 
قسمت cache به صورت غیر تکراری ایجاد می شود، لذا نیازی به تغییر آن نیست، تنها برای کوکی باید این کار را به روش زیر انجام دهید:
var myajaxinstance=new ajaxpageclass.createajax(ajaxonpages, "ajaxcontent", ["pagetopage-top", "pagetopage-bottom"])
در نمونه کد بالا، ajaxcontent نام کوکی است که توسط کد تولید می شود، می توانید یک نام مختلف برای هر صفحه انتخاب کنید، به فرض ajaxcontent1، ajaxcontent2 و...
نویسنده: رضا
زمان: ۱۲:۳۴:۱۵ - تاریخ: ۱۳۹۲/۰۸/۰۸
سلام، منمون از شما
من این آموزش رو پیدا کردم اما یک مشکل داره .
این صفحات باید برای اولین بار رفرش بشن مگر نه به صورت داینامیک تغییر نمی کنن.مثلا صفحه 1 اگه تغییر پیدا کنه باید یکبار رفرش بشه و از اون به بعد دیگه به صورت داینامیک اگه صفحه 1 رو تغییر بدیم تغییر می کنه این کار که فایده ای نداره؟؟؟
پاسخ: 
می توانید از متاتگ زیر در صفحات (جانبی) استفاده کنید تا از cache شدن آنها جلوگیری شود:
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
یک روش حرفه ای تر این است که با استفاده از PHP، در قسمت آدرس فایل یک عبارات رندوم به صورت متغیر GET ایجاد کنید، به فرض آدرس ها به این نحو باشد:
pages/example.html?rnd=xu73hd0e9dy6rhf5k
این عبارت رندوم باعث می شود تا مرورگر هر بار تصور کند که فایل شما یک فایل جدید است و آن را به صورت اولیه بارگذاری کند.
نویسنده: سیا
زمان: ۱۵:۰۵:۰۶ - تاریخ: ۱۳۹۲/۱۰/۲۵
دستت درد نکنه گلم :)
نویسنده: mostafa
زمان: ۱۰:۵۷:۵۱ - تاریخ: ۱۳۹۳/۰۶/۰۹
سلام
یه سوال داشتم، من پنج تا تب دارم که با جاوا اسکریپت کار میکنه این پنج تب هر کدوم یه قسمت داره، حالا من میخوام برای هر تب یه کد صفحه بندی با آژاکس بذارم، اگر راهنمایی کنید ممنون میشم.
راستی... واقعا سایت خوبی دارید...
پاسخ: 
سوالتان خیلی واضح نیست! نیاز به بررسی صفحه و ذکر دقیق جزئیات کاری است که می خواهید انجام دهید.
نویسنده: محمد
زمان: ۰۱:۱۵:۳۶ - تاریخ: ۱۳۹۳/۰۷/۰۶
سلام
ممنونم از آموزش خوبتون
یه سوال ضروری داشتم
اگه بخوام اینو در وبلاگ استفاده کنم چطوری میشه؟
به عنوان مثال آدرس صفحات وبلاگ من اینجوریه در بلاگفا
http://test.blogfa.com/?p=2
چطور میتونم فقط قسمت محتوای صفحه بالا رو نمایش بدم
پاسخ: 
امکان تفکیک محتوا از سایر بخش ها در صفحات وبلاگ ها وجود ندارد، لذا این کد برای هدف شما مناسب نیست!
نویسنده: محمد
زمان: ۱۲:۲۸:۰۰ - تاریخ: ۱۳۹۳/۰۷/۰۷
من خودم این کار انجام دادم
با استفاده از php و jquery فقط قسمت محتوای وبلاگ رو توی صفحه example.php بارگذاری کردم
نویسنده: رضا
زمان: ۱۲:۲۱:۲۸ - تاریخ: ۱۳۹۳/۰۷/۰۹
سلام و تشکر از آموزش خوبتون
چطوری میشه صفحات رو از یک url مثل http://webgoo.ir
بارگذاری کرد
پاسخ: 
تست نشده، اما به نظر این کد چنین قابلیتی ندارد، در Ajax به دلیل رعایت امنیت مرورگر کاربران، امکان ارسال درخواست به سرورهای دیگر وجود ندارد.
نویسنده: محسن یزدانی
زمان: ۲۱:۰۴:۵۸ - تاریخ: ۱۳۹۳/۰۷/۱۶
سلام می تونیم کاری کنیم که مقدار فایل بارگذاری شده رو به صورت درصد نشون بده؟
پاسخ: 
با این کد خیر، باید از جی کئوری و آموزش های جداگانه ای استفاده کنید.
نویسنده: مصطفی
زمان: ۱۴:۱۹:۵۴ - تاریخ: ۱۳۹۳/۰۹/۰۵
با سلام و تشکر
من می خواستم به جای شماره ها ، منوی خودم رو قرار بدم ولی هرکاری می کنم نمی شود.
لطفا در مثال توضیح دهید
با تشکر
پاسخ: 
اعداد این کد به صورت داینامیک (در حلقه for خط 106) ساخته می شوند و (حداقل به راحتی) قابل تغییر نیستند!
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





7 × 1
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form مهدی
در:
سلام من از کد زیر استفاده کردم ولی وقتی که اعمال میشه کل css های سایتم میپره.. چه باید بکنم
۰۹:۵۵:۵۰ ۱۳۹۹/۰۴/۲۳

form سلماسی
در:
سلام ایا اگر از وبسایت شخصی کسی بازدید کنیم صاحب وبسایت شماره ی ما را می بیند
۲۱:۳۱:۵۳ ۱۳۹۹/۰۴/۲۲

form mahdi
در:
سلام استاد اگه براتون زحمتی نیست یه نگاه دیگه بهش بندازید ، الان ریموو ادیت درست هستن فقط برای نمایش کلیشون که وقتی رفرش میکنیم...
۱۹:۱۳:۱۵ ۱۳۹۹/۰۴/۲۲

form mahdi
در:
سلام استاد عزیز ، میتونید یه نمونه که فقط با جاوا اسکریپت کار شده نه با فریمورکاش بهم معرفی کنید ببینم؟ من هرچی گشتم پیدا...
۱۴:۴۶:۲۴ ۱۳۹۹/۰۴/۲۲

form mahdi
در:
سلام استاد عزیز و گرامی ، یه دفتر چه یادداشت با localstorage میخوام بنویسم ولی مشکل دارم، دو تا سوال دارم ممنون میشم راهنماییم...
۱۲:۰۵:۰۷ ۱۳۹۹/۰۴/۲۲

form اریا
در:
سلام و درود بزرگوار چه دستوری باید بنویسیم تا فقط مقدارهای خاصی از ارایه بتونیم نمایش بدیم. مثلا یک ارایه 6 خونه ای...
۱۶:۴۷:۳۱ ۱۳۹۹/۰۴/۲۰

form کافه کتاب
در:
سپاس خیلی وقت بود دنبالش بودم مرسی از سایت عالیتون
۱۴:۵۱:۴۳ ۱۳۹۹/۰۴/۲۰

form سجاد
در:
دمتون گرم. خیلی زحمت کشیدید
۱۳:۴۳:۱۱ ۱۳۹۹/۰۴/۲۰

form KhashayarPrk
در:
سلام. میخوام الگو تمام کلمات داخل پرانتز رو بدون پرانتز بریزه ارایه با این کد فقط یک پرانتز رو جواب میده.
۱۳:۱۳:۴۷ ۱۳۹۹/۰۴/۲۰

form Oliver
در:
چطوری دستور background رو برای جدلمون عکسش رو تنظیم کنیم و بهش طول و عرض بدیم
۱۶:۰۷:۱۷ ۱۳۹۹/۰۴/۱۸

form محمد
در:
با عرض سلام ببخشید چطوری میتونم واسه اشتراک کاربر انقضا بزارم مثلا یک ماه داخل دیتابیس ردیف تایم رو درست کردم البته تاریخ رو تبدیل...
۱۹:۱۴:۵۹ ۱۳۹۹/۰۴/۱۵

form آیدا
در:
سلام من در حال طراحی با html هستم اما طبق فیلم آموزشی پیش میرم از یه جایی به بعد هم تغییرات اعمال نمیشه...
۲۲:۴۷:۴۴ ۱۳۹۹/۰۴/۱۴

form علی
در:
سلام اگه میشه یه تکه کدی بفرستید که کاربر نتونه عکس مورد نظر رو دانلود کنه و با نگه داشتن روی عکس فقط لینکو ببینه...
۰۹:۳۰:۴۹ ۱۳۹۹/۰۴/۱۴

form sina2000
در:
با سلام و خسته نباشید طبق کد زیر استفاده میگه متغیر Pdc برای PDO است لطفا نمونه کد برای لایبرری...
۱۵:۰۳:۵۱ ۱۳۹۹/۰۴/۱۳

form محمد امین
در:
سلام ممنون از مطلبتون ببخشید من یه سایتی با شی گرایی کامل زدم الان میخوام آدرسشو بهینه کنم آدرس الان من به این صورته:...
۱۸:۲۸:۲۴ ۱۳۹۹/۰۴/۱۱
form ترنم
در:
سلام وقتتون بخیر ببخشید من کدهای مربوط منو و زیر منو رو نوشتم ولی موقع اجرا منوی اصلی رو میاره ولی زیر منوها رو...
۱۱:۰۶:۲۹ ۱۳۹۹/۰۴/۱۱
form ا
در:
سلام چرا وقتی مطالب مربوط که تو وبلاگم هست رو جستجو میکنم نمیاره ؟؟؟
۲۰:۳۱:۰۸ ۱۳۹۹/۰۴/۰۷
form amir
در:
سلام من اگه بخوام با وارد کردن یه id داخل یک text کل اون ردیف پاک بشن باید چه کنم مثلا یک text دریافت میکنم...
۰۱:۴۸:۰۵ ۱۳۹۹/۰۴/۰۷
form محمدباقر حسیبیان
در:
من این مشکل برام پیش اومده که موقع ورود به پروژه م توی لوکال هاست wamp صفحه سفیده و هیچی رو نشون نمیده و کد...
۱۶:۴۲:۳۸ ۱۳۹۹/۰۴/۰۶
form ...
در:
سلام دو سایت نوشته ای مربوط به من رو چند سال قبل لینک دانلود قرار دادن من ازشون خواستم بردارنش ولی اینکارو نکردن سایت...
۱۷:۲۶:۴۲ ۱۳۹۹/۰۴/۰۵
form مجتبی
در:
سلام میشه یک کد جاوا رو به php تبدیل کرد تا لود سایت سریع تر بشه؟
۱۳:۰۴:۲۳ ۱۳۹۹/۰۴/۰۴
form متین
در:
سلام ؛ من تازه شروع به یادگیری کردم ؛ مطلب بسیار کاربردی بود ؛ ممنون از شما دوست عزیز.
۰۱:۵۰:۰۵ ۱۳۹۹/۰۴/۰۴
form mahdi
در:
سلام استاد عزیز و گرامی امیدوارم که حالتون خوب باشه ، اگه براتون ممکنه لطفا یه آموزش خوب در زمینه وردپرس بهم معرفی کنید ،...
۲۱:۴۸:۱۳ ۱۳۹۹/۰۴/۰۳
form امید
در:
در برنامه نویسی کاربر با چه دستوری میتواند به صفحه اصلی برگردد
۱۹:۰۶:۵۶ ۱۳۹۹/۰۴/۰۳
form ali
در:
با سلام من یک پروژه طراحی کردم میخوام که وقتی کاربر روی ادامه مطلب کلیک کرد در خود صفحه بقیه مطالب را ببینه...
۱۸:۴۷:۲۲ ۱۳۹۹/۰۴/۰۳
form علی
در:
سلام و تشکر از زحمات ارزشمند شما احتراما بنده امروز از یک شماره تلفن ثابت از طریق یک رایانه و یک موبایل به طور...
۱۸:۰۱:۱۰ ۱۳۹۹/۰۴/۰۳
form oscar
در:
درود. اگر بخوایم در نمایش تاریخ و زمان که به صورت لحظه ای خودش در صفحه رفرش میشه، فقط عبارت " Mon Jun 22 2020...
۱۵:۵۹:۳۲ ۱۳۹۹/۰۴/۰۲
form علی
در:
با سلام چطور میشه فقط یک صفحه مورد نظرمون رفرش بشه نه همه صفحات سایت
۰۰:۰۳:۴۱ ۱۳۹۹/۰۳/۳۱
form Farzad
در:
الان وقتی فایل رو میخواد دانلود بکنه از خودش فایل میسازه ، به این صورت یعنی بعد از پوشه file هر پوشه ای باشه...
۱۸:۵۶:۲۱ ۱۳۹۹/۰۳/۳۰
form Farzad
در:
سلام ، خسته نباشید من فایل هایی که در هاست میزارم به این شکل هست: یعنی مشخص نیست فایل ها تو چه پوشه...
۱۳:۳۳:۴۰ ۱۳۹۹/۰۳/۳۰
form شیما طیبی
در:
سلام خیلی مطلب مفیدی بود . همیشه به وبلاگ نویسی به چشم یه کار خسته کننده نگاه میکردم ولی خب یه مقدار نظرم تغییر کرد....
۲۳:۵۲:۳۲ ۱۳۹۹/۰۳/۲۹
form احسان
در:
سلام من یک کد اسکریپت دارم که به صورت عددی تبدیل شده است. میخواستم بپرسم چطوری میتونم اسکریپت به حالت اولیه نوشته شده برگردانم و...
۲۱:۰۲:۱۳ ۱۳۹۹/۰۳/۲۷
form علی
در:
ممنون از پاسختون اما روش بالا جهت دانلود فایل کاربرد داره . من میخواستم به صورت استریم ویدئو پخش بشه اما آدرس مستقیم ویدئو...
۰۰:۳۷:۴۶ ۱۳۹۹/۰۳/۲۷
form محمد
در:
سلام مجدد ببخشید طبق فرمایش شما من در دیتابیس جدولی ساخته بودم فقط مشکلم اینجاست چطوری میتونم توسط کوکی یا سیشن با تابع دیت انقضا...
۲۲:۳۸:۰۳ ۱۳۹۹/۰۳/۲۵
form محمد
در:
با عرض سلام ببخشید چطوری میشه واسه اشتراک خریدن زمان ۱ ماهه گذاشت که بعد از گذشت ۱ ماه پیام بده دوباره اشتراک تهیه کنید...
۱۳:۱۳:۵۵ ۱۳۹۹/۰۳/۲۵
در انتظار بررسی: ۴