ذخیره و نمایش اطلاعات فایل با ای جکس (Ajax) و PHP

تابع فراهم سازی امکان ارسال درخواست ای جکس (Ajax)

همانطور که در آموزش های مقدماتی برنامه نویسی ای جکس (Ajax) گفتیم، برای ارسال پارامترها یا دریافت پاسخ سرور به واسطه دستورات ای جکس قبل از هر کاری ابتدا باید شرایط ارسال درخواست را فراهم کنیم که معمولا این ساز و کار در مفسر جاوا اسکریپت مرورگرها با استفاده از آبجکت (object) یا شی XMLHttpRequest ایجاد می شود و به این صورت می توانیم درخواست را در بستر ای جکس از مرورگر به سرور ارسال یا پاسخ را از سرور دریافت و در مرورگر پردازش کنیم، به هر صورت از آنجایی که مرورگر اینترنت اکسپلورر در نسخه های قدیمی (ماقبل 7) از متدهای خاص خود استفاده می کند برای نوشتن تابع فراهم سازی امکان ارسال درخواست ای جکس (Ajax) سازگار با این مرورگر و خطایابی ساده تر معمولا از روش try و catch استفاده می کنیم، در نمونه کد زیر تابع فراهم سازی امکان ارسال درخواست ای جکس (Ajax) سازگار با نسخه های قدیمی مرورگر اینترنت اکسپلورر را درج کرده ایم:

<script>
//تابع درخواست ای جکس
function ajaxRequest(){
    var xmlHttp;
    
    try{
        //Opera, Firefox, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e){
        //Internet Explorer
        try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("متاسفانه مرورگر شما از ای جکس پشتیبانی نمی کند");
                return false;
            }
        }
    }
    
    //return
    return xmlHttp;
}
</script>

به این صورت هر زمان که تابع را فراخوانی کنیم در پاسخ یک شی XMLHttpRequest ساخته می شود (مرورگر اینترنت اکسپلورر در نسخه های ماقبل 7 از قابلیت ActiveXObject استفاده می کند).
این نمونه کدها را می توانیم در فایلی با نام دلخواه ajax_request.js ذخیره و در صفحه وارد کنیم یا اینکه کدها را به صورت مستقیم در صفحه HTML درج کنیم.
نکته: در هنگامی که کدهای جاوا اسکریپتی را در فایل های مستقل با فرمت js درج می کنیم قاعدتا تگ های script باید حذف شوند، با این توضیح دقت کنیم که اگر تابع را در فایل ajax_request.js درج می کنیم نباید به همراه تگ های script باشد!

کدهای ارسال درخواست و دریافت پاسخ با ای جکس (Ajax)

پس از اینکه شرایط درخواست ای جکس را با کمک آبجکت XMLHttpRequest مهیا کردیم به کدهایی نیاز داریم که ارسال، دریافت و نمایش اطلاعات را مدیریت کنیم، برای این کار از نمونه کد زیر استفاده می کنیم:

<script>
//ارسال اطلاعات فیلدها و ذخیره در فایل متنی
function sendRequest(id){
    var ajax_request = ajaxRequest();
    var php_file = 'php-file.php';
    var value = document.getElementById(id).value;
    
    ajax_request.onreadystatechange = function(){
        if(ajax_request.readyState == 4){
            if(ajax_request.status == 200){
                displayContent('مقادیر با موفقیت به سرور ارسال شد!<br>');
            } else{
                displayContent('دریافت خطا! HTTP کد: ' + ajax_request.status + '<br>');
            }
        } else{
            displayContent('لطفا چند لحظه صبر کنید...<br>');
        }
    };
    
    ajax_request.open("POST", php_file, true);
    ajax_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax_request.send('value=' + value);       
}

//دریافت اطلاعات فایل متنی و فراخوانی تابع نمایش در مرورگر
function receiveResponse(){
    var ajax_request = ajaxRequest();
    var ajax_caching = false;
    var text_file = 'text-file.txt';
    
    ajax_request.onreadystatechange = function(){
        if(ajax_request.readyState == 4){
            if(ajax_request.status == 200){
                displayContent(ajax_request.responseText);
            } else{
                displayContent('دریافت خطا! HTTP کد: ' + ajax_request.status + '<br>');
            }
        } else{
            displayContent('لطفا چند لحظه صبر کنید...<br>');
        }
    };
    
    if(ajax_caching == false){
        text_file = text_file + '?nocache=' + Math.random();
    }
    
    ajax_request.open("GET", text_file, true);
    ajax_request.send(null);
}

//تابع نمایش اطلاعات در مرورگر (بلاک div)
function displayContent(content){
    var show_result = document.getElementById("show-result");
    
    show_result.innerHTML = content;
}
</script>

این کدها را نیز می توانیم در فایلی با نام دلخواه ajax-send-receive.js ذخیره کنیم.
توضیح:
- در این کد سه تابع تعریف شده است، تابع sendRequest، receiveResponse و displayContent که هر کدام مربوط به بخش خاصی از فرآیند ارسال، دریافت و نمایش اطلاعات با ای جکس است.
- تابع sendRequest درون خود تابع فراهم سازی امکان درخواست ای جکس (ajaxRequest) را فراخوانی می کند، در هنگامی که حالت آماده یا نتیجه متد readyState برابر 4 است وضعیت پاسخ سرور با متد status بررسی می شود، اگر مقدار status برابر 200 باشد یعنی مشکلی در سمت سرور وجود ندارد اما اگر هر کدی به جزء 200 دریافت شود یعنی در فرآیند پردازش درخواست در سرور و کدهای PHP مشکلی رخ داده است، به طور مثال دریافت کد خطای HTTP 404 یعنی منبع درخواستی از سرور یافت نشده است، در ادامه تابع displayContent فراخوانی شده که وظیفه ی آن نمایش اطلاعات مد نظر ما در بلاک div مورد نظر است.
- برای جلوگیری از ذخیره سازی احتمالی درخواست های GET یا به اصطلاح کش (Cache) شدن ناخواسته اطلاعات از پارامتر دلخواه nocache با مقادیر اتفاقی در آدرس URL استفاده کرده ایم که در تابع receiveResponse به صورت متغیر ajax_caching مشخص است، مقادیر اتفاقی باعث می شود مرورگر در هر درخواست مشابه آدرس URL جدید رفتار کند و اطلاعات به صورت خودکار تازه سازی (Refresh) شوند، این کار از ذخیره سازی موقت یا Caching درخواست های  ای جکس در مرورگر جلوگیری می کند.
- تابع displayContent با متد جاوا اسکریپتی innerHTML محتویات مد نظرمان را در بلاک div با آی دی تعریف شده (در اینجا show-result) مقداردهی می کند.
- مقادیر responseText در تابع receiveResponse محتوایی است که از فایل txt خوانده می شود، در واقع درخواست ای جکس محدود به فایل های PHP نیست و می توانیم محتوای فایل های متنی را نیز به عنوان نتیجه درخواست دریافت کرده و به نحو دلخواه پردازش کنیم.

دستورات PHP برای دریافت مقادیر و ذخیره در فایل متنی

همان طور که به کارگیری ای جکس (Ajax) در سمت کاربر مستلزم استفاده از جاوا اسکریپت است، در سمت سرور نیز باید از زبان های برنامه نویسی قابل اجرا در سرور نظیر PHP بهره بگیریم، با دستورات PHP می توانیم مقادیر ارسالی از طریق متدهای متداول POST یا GET را دریافت کرده و پردازش مورد نظر را روی آنها اعمال کنیم، به طور مثال در نمونه کد زیر اطلاعات دریافتی از درخواست ای جکس در فایل فرضی text-file.txt ذخیره می شود:

<?php
@$value = $_POST['value'];
$text_file = 'text-file.txt';

file_put_contents($text_file, $value);
?>

این فایل را با نام php-file.php در کنار سایر فایل ها ایجاد می کنیم.
نکته 1: متد استفاده شده در کدهای PHP بستگی به متدی دارد که در درخواست ارسال اطلاعات سمت کاربر برای ای جکس استفاده شده است (در اینجا متد POST).
نکته 2: تابع استفاده شده در کدهای PHP برای ذخیره سازی اطلاعات در فایل متنی تابع درونی و از پیش تعریف شده file_put_contents است.

https://www.php.net/manual/en/function.file-put-contents.php

کدهای HTML سمت کاربر و پیش نمایش آنلاین

توابع جاوا اسکریپتی را می توانیم به نحو دلخواه با رویدادها (Events) در سمت کاربر فراخوانی کنیم، به طور مثال رویداد onload با بارگذاری کامل صفحه اجرا می شود یا با اختصاص رویداد onclick به دکمه (Button) تابع پس از کلیک کاربر فراخوانی می شود، به هر صورت شیوه و زمان فراخوانی بستگی به نیاز و هدف برنامه دارد به طور مثال در کدهای HTML صفحه زیر دو نمونه دکمه جهت ارسال مقادیر از فیلد input به سرور و دریافت اطلاعات فایل متنی از سرور طراحی شده که مبتنی بر رویداد onclick هستند:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | خواندن و نوشتن فایل متنی با ای جکس (Ajax) و PHP</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height: 22px;    
}
#show-result {
    background: #999999;
    color: #FFFFFF;
}
</style>
<script src="ajax-request.js"></script>
<script src="ajax-send-receive.js"></script>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است یا پشتیبانی نمی شود!</noscript>
<label for="ajax-input">ابتدا یک مقدار متنی در این فیلد وارد کنید:</label>
<input name="ajax_input" id="ajax-input"><br><br>
<button onclick="sendRequest('ajax-input');">ارسال مقادیر</button>
<button onclick="receiveResponse();">دریافت اطلاعات</button><br><br>
<div id="show-result">پاسخ های برنامه در این بلاک نمایش داده می شود.</div>
<hr>
- با فشردن دکمه "ارسال مقادیر" مقدار از فیلد input دریافت و از طریق تابع sendRequest به فایل php-file.php ارسال و با برنامه نویسی PHP در فایل متنی text-file.txt ذخیره می شود.<br>
- با فشردن دکمه "دریافت اطلاعات" مقدار از طریق تابع receiveResponse از فایل متنی text-file.txt دریافت و در بلاک show-result نمایش داده می شود.<br>
- وظیفه نمایش پاسخ های برنامه را تابع displayContent بر عهده دارد.<br>
- برای نوشتن فایل متنی از Ajax + PHP و برای خواندن اطلاعات فایل متنی از Ajax استفاده کرده ایم.
</body>
</html>

پیش نمایش آنلاین

دانلود نمونه فایل های آموزش

در صورت تمایل به تست و بررسی نمونه کدهای ارائه شده در این آموزش در لوکال هاست یا سرور شخصی و جهت سهولت کار می توانیم بسته زیر را در قالب فایل فشرده دریافت کنیم، این بسته حاوی فایل های زیر است:
- ajax-request.js، فایل فراهم سازی امکان ارسال درخواست ای جکس.
- ajax-send-receive.js، فایل حاوی توابع ارسال، دریافت و نمایش اطلاعات با ای جکس.
- text-file.txt، فایل متنی جهت ذخیره و دریافت اطلاعات.
- php-file.php، فایل PHP حاوی دستورات برنامه نویسی جهت نوشتن مقادیر ارسالی کاربر در فایل متنی.
- ajax-send-receive.html، فایل HTML جهت اجرا در مرورگر و تست.
دانلود نمونه فایل های آموزش
نکته: آدرس فرخوانی فایل ajax-send-receive.html در لوکال هاست به صورت نمونه زیر خواهد بود:

http://localhost/ajax-php-text-file/ajax-send-receive.html