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

10 / 10
از 3 کاربر

در این قسمت از آموزش Ajax در بخش مقالات طراحی سایت می خواهیم  نحوه ی نمایش و ذخیره اطلاعات فایل با آژاکس را برای شما بیان کنیم ، به عبارتی می خواهیم ببینیم که چگونه می توان یک فایل را توسط درخواستی مبتنی بر آژاکس به طور همزمان فراخوانی و در عین حال محتویات آن را به کمک برنامه نویسی PHP، در یک فایل دیگر کپی نمود .

از آنجاییکه برای ارسال درخواست یک فایل آژاکس باید از شی xmlhttprequest استفاده کنیم تا دستور به سرور منتقل شود ، معمولا از دو روش try و catch یا XMLHttpRequest مستقیم برای این منظور استفاده می کنند که در عمل هر دو شیوه کارکرد یکسان دارند . اگر می خواهید فایل آژاکسی خود را در تابع جاوا اسکریپتی آماده کنید باید تگ های script را حذف کنید . پس از آماده کردت فایل آژاکس نیازمند توابعی هستیم که اطلاعات ارسالی و دریافتی را مدیریت کند برای ان کار از دستور زیر کمک می گیریم :

<script type="text/javascript">
//نمایش اطلاعات در مرورگر
function Display(content, showresult){
    showresult.innerHTML = content;
}
//دریافت اطلاعات فایل متنی
function Retrieve(url){
    var AjaxCaching = false;
    var showresult = document.getElementById("showresult");
    var Request = CreateRequest();
   
    Request.onreadystatechange = function(){
        if(Request.readyState == 4){
            if(Request.status == 200){
                var content = Request.responseText;
                Display(content, showresult);
            }
        }
    };
    
    if(AjaxCaching == false){
        url = url + "?nocache=" + Math.random();
    }
    Request.open("GET", url, true);
    Request.send(null);
}
//شروع درخواست
function SubmitForm(){
    var Request = CreateRequest();
    var script = "ajax-copy-get.php";
    var filename = "ajax-copy-get.txt";
    Request.onreadystatechange = function(){
        if(Request.readyState == 4){
            Retrieve(filename);
        }
    };
    Request.open("POST", script, true);       
    Request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    Request.send(null);       
}
</script>

در توضیح دستور بالا باید گفت :تابع Display، Retrieve و SubmitForm که هر کدام مربوط به بخش خاصی از فرآیند ارسال و دریافت اطلاعات با آژاکس هستند .
از تابع Submitform برای فراخوانی درخواست آژاکس در createrequest استفاده می شود همچنین از تابع Retrieve برای نمایش محتویات فایل با فرمت txt استفاده می شود لازم به ذکر است بدانید کههنگامی که حالت آماده یا Request.readyState برابر 4 می شود، تابع Retrieve فراخوانی می شود .

از تابع AjaxCathing نیز در تابع retrieve نیز برای جلوگیری از ذخیره یا به اصطلاح کش شدن استفاده می شود که اگر مقدار درست باشد عمل کش صورت می گیرد و اگر غلط باشد کش نمی شود . همچنین تابع Display تنها وظیفه دارد که با یک دستور innerHTML در جاوا اسکریپت، محتویات را به آی دی بلاک div مقصد بفرستد (در اینجا showresult) .

وقتی Ready state برابر  4 باشد یعنی درخواست فایل آژاکس کامل شده است و یعنی صفحه درخواستی، مشکلی ندارد . عدد 200 به معنی بی نقص بودن می باشد و هنگامیکه خطای 404 روی داد یعنی صفحه ی موردنظر پیدا نشده و خطای 500 یعنی مشکل در داخل سرور است . این اعداد باید به طور استاندارد به صورت header از صفحه فراخوانی شده ، دریافت شوند . مقادیر متغیر content در واقع محتوایی است که از فایل txt خوانده می شود و در Request.responseText که قسمتی از فرآیند درخواست مبتنی بر آژاکس است وجود دارد .

پس از ذخیره کردن دستور بالا با نام ajax-copy-get.js فایل دیگری با نام ajax-copy-get.txt باید در فولدر مورد نظر وجود داشته باشد تا بتوان اطلاعات از آن دریافت کرد .

از آنجاییکه آژاکس به تنهایی کارایی زیادی ندارد از php در کنار Ajax استفاده می کنیم . دستور زیر محتویات فایل file-get-contents می خواند و در خود ذخیره می کند ، در قسمت fopen ، فایل جدیدی با متد w ایجاد کرده و محتویات تابع file_get_contents را که به متغیر content تعلق گرفته، درون آن کپی می کند .

<?php
// فایل بر روی سرور دیگر یا همان سرور
$url = "ajax-copy-get.txt";     
// گرفتن محتویات فایل
$content = file_get_contents($url);
// کپی محتویات فایل داخل فایلی دیگر
$nfile = fopen("ajax-copy-get2.txt", "w");
if($nfile != false){
    fwrite($nfile, $content);
    fclose($nfile);
}   
?>

پس از وارد کردن این دستورات فایل را با نام ajax-copy-get.php ذخیره کنید .حال همه چیز آماده است که توابع را فراخوانی کنیم . با توجه به اینکه آژاکس مبتنی بر جاوا اسکریپت می باشد و تنها ترکیبی نوین از دو زبان کهن جاوا اسکریپت و xml است فراخوانی آنها نیز می تواند به صورت کنترلی انجام گیرد . به طور مثال رویداد onclick یا onload و...، در اینجا ما از یک دکمه در فرم HTML استفاده کرده ایم که مبتنی بر onclick است .

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | ارسال درخواست آژاکسی و کپی فایل</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
<script src="ajax.js" type="text/javascript"></script>
<script src="ajax-copy-get.js" type="text/javascript"></script>
</head>
<body>
<form action="" method="post" name="ajax">
<input type="button" id="submit" name="button" onclick="SubmitForm()" value="ارسال درخواست آژاکسی">
</form>
<div id="showresult">
نتیجه اینجا نشان داده می شود!
</div>
</body>
</html>

حال کافی است فایل ها را در لوکال هاست یا سرور ایجاد و این صفحه را (با نام دلخواه و فرمت html) فراخوانی کنید . در مقالات بعدی طراحی سایت اطلاعات جامع تری را در اختیار شما علاقه مندان به طراحی سایت قرار خواهیم داد.

ارسال نظر و نظرات ثبت شده