ساخت یک spa ساده با استفاده از جاوااسکریپت و ایجکس

@siso
سلام و وقت بخیر
ببینید ساخت SPA با AJAX معمولی کار بسیار دشوار و البته زمان بری هست(انجام دادم که میگم 😂) . راکت هم از فریمورک Alpine.js استفاده می‌کنه . میخواهید SPA بسازید ؟ بسم الله، Vue راحت ترین راهه .
موفق و سلامت باشید
یا حق

@TimeRunner2359
بله خب من متوجه این هستم که ابزارهایی مث Vue یا React و ... واسه اینجور کارا ساخته شدن
ولی در نهایت تمام کدهایی که توی این فریمورک ها ساخته میشه بایستی به کدهای JS قابل فهم برای مرورگر تبدیل بشن و بنده دوس دارم بدونم اون کد قابل فهم برای مرورگر چی هست که موجب ایجاد SPA میشه وگرنه با React و کمی هم با Vue کار کردم. این کدهای ساده ای هم که بالا قرار دادم واسه رسوندن مفهوم سوالم بوده
نمیخوام واسه صفحات ساده و سبک از ری اکت یا ویو یا هر فریمورک دیگه ای استفاده کنم

@siso
در این صورت این لینک می‌تونه براتون مفید باشه
من به مشکل دکمه بک و فوروارد شما بر نخوردم ، ولی پیشنهاد میکنم از axios یا حداقل AJAX با jQuery استفاده کنید . کار با Xhr سخت و زمان بر هست و استفاده اش هم کمه.
موفق و سلامت باشید
یا حق

@TimeRunner2359
تشکر
لینک رو مطالعه کردم.
توی مثالش فقط چندتا تصویر و یه سری داده JSON رو با ایجکس دریافت کرده در حالیکه من قصد دارم یه صفحه html رو بطور کامل دریافت کنم
در مورد مسئله کارکرد دکمه بک و فوروارد هم موردش حل شد ظاهرا توی نوشتن کد دقت نکرده بودم. الآن مسئله اصلی من کار نکردن اسکریپت های توی صفحه لود شده توسط ایجکس هست. مثلا میخوام صفحه لاگین رو با ایجکس بگیرم و این صفحه خودش یه سری اعتبارسنجی داره که بدون اسکریپت هاش کار نمیکنه

VueJs گزینه خوبی هست و حجم بسیار کمی هم داره
و میتونه انتخاب منطقی هم باشه.

بنده دوس دارم بدونم اون کد قابل فهم برای مرورگر چی هست

شما یک SPA ساده بنویس و کدهاش رو بررسی کن.. باقی کار آنالیز کدها جاوااسکریپته

@ali.bayat
یه مشکلی که هست فریم ورکی مث ویو جی اس به خاطر کلاینت ساید بودنش مشکل سئو هم داره و برای رفع این مشکل بایستی SSR استفاده کرد. به همین جهت قصد دارم خودم بدون فریم ورک خاصی SPA رو بسازم.(البته چون پروژه خیلی کوچیکه)

@siso
میتونید از alpine.js استفاده کنید

این کاری ک میگم رو انجام بدبد ببینید درست میشه یا نه:

حدس میزنم مشکل سر همون فانکشن اول توی create_spa_using_ajax.js باشه.

یک پرامیس درست کنید:

const promise = new Promise((resolve, reject) => {
    try {
        loadProgram()
        resolve(); // or return a value by resolve(value)
    }catch (err) {
        reject(err)
    }

});

و بعد همون تابعی که خدمتتون عرض کردم رو در تابع loadprogram قرار بدید:

const loadProgram = () => {
    window.onpopstate = (event) => {
        if(event.state) console.log("state",event.state)
    }
}

برای فراخوانی پرامیس داریم:

promise.then(() => {
    ajax(document.location.pathname)
})
.catch(err => {
    console.log("Error", err)
});

const ajax = (pathname) => {
    // ...
}

این روش برای من کار کرد
این رو امحان کنید و نتیجه رو به من اطلاع بدید.
موفق باشید

@hamedniroomand
دوست عزیز من کدهایی که شما دادید رو تست کردم ولی جواب نداد. فک کنم شما سوال منو درست متوجه نشدید
این کدی که شما دادید eventListener مربوط به popState رو توی پرامیسی صدا میزنه که موقع باز شدن صفحه اجرا میشه که همین باعث میشه هر وقت صفحه ای که این کد توش قرار داده شده رو مستقیما(بدون ایجکس) باز کنیم اون صفحه دوبار از سرور دریافت بشه، یه بار که مستقیما صداش زدیم یه بار هم با ایجکس
ببینید مشکل من اینه که هر صفحه ای رو باز میکنم اسکریپت هاش بدرستی کار میکنه ولی وقتی همون صفحه رو با ایجکس باز میکنم دیگه اسکریپت هاش اجرا نمیشن

اگر مایل بودید میتونید خودتون یه نگاه به پروژه بندازید تا متوجه منظور بنده بشید

فایل پروژه

@hesammousavi
جناب موسوی اگر امکانش هست توی این گفتگو بنده رو راهنمایی بفرمایید
آیا کاری که من قصد انجامش رو دارم (تعویض صفحه HTML با استفاده از Ajax و اجرای صحیح اون بطوریکه اسکریپت های صفحه جدید اجرا بشن و اسکریپت های صفحه قبلی غیرفعال) شدنی هست؟
یا اینکه این امکان وجود نداره و در صورتی که بخوام همچین اتفاقی بیوفته بایستی تمام اسکریپت های سایت رو توی یه فایل قرار بدم و رفرنس اون فایل رو به تمام صفحات بدم (اینطور توی هر صفحه کلی اسکریپت داریم که مال اون صفحه نیست)
و اینکه توی سایتی مث راکت قسمت View چه اتفاقی میوفته که هم SPA هست و هم SEO داره (بحث من این نیست که از چه فریمورکی استفاده شده سوالم اینه که چه اتفاقی میوفته چون من وقتی تب Network مرورگر رو نگاه کردم دیدم صفحات با ایجکس عوض میشن و هربار یه فایل html رو دریافت میکنه و قاعدتا اون فایل داره جایگزین صفحه قبل میشه )

@hesammousavi
سلام خسته نباشید
منم همین مشکل رو دارم
توی لاراول

let all_a = document.querySelectorAll("a");
all_a.forEach((i, b) => {
    all_a[b].onclick = (e) => {
            if (all_a[b].getAttribute("target") !== "_blank"){
                e.preventDefault();
                let a_href = all_a[b].getAttribute("href");
                history.replaceState(null, "/"
                    , location.href.slice(-1) === "/"
                        ?  a_href
                        : a_href
                );
                fetch(a_href)
                .then(Response => Response.text())
                .then(Response => {
                let parser = new DOMParser();
                let pars = parser.parseFromString(Response, 'text/html');
                    document.querySelector("html").innerHTML = pars.querySelector("html").innerHTML;
                });
            }
    };
});

این کدمه

js ها رو وقتی صفحه لود میشه نمیاره

صفحه ارور لاراول رو هم نمیاره اگر توی لاراول یک باگی چیزی داشته باشه مگه اینکه حالت دیباگ مود غیرعفال باشه که مثلا 500 بوده

اگر میدونید باید چیکار کنم ممنون میشم بگید.

بعد مهندس یک سوال دیگه

چطوری میشه به بک و فوروارد توی مرورگر اون بالا دسترسی داشت؟ مثلا چطوری میتونم بگم اگر بک رو زد فلان اتفاق بی افته برنگرد یکی عقب ؟