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

[sky boy]

فراخوانی فایل با آژاکس (ajax)

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

<script type="text/javascript">
function createRequest(){
    var request = false;
    try {
        request = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (e) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (e) {
                try {
                    request = new XMLHttpRequest();
                    }
                    catch (e) 
                    {
                        request = false;
                        }
                }
        }
        return request;
}
</script>

این فایل را با نام ajax.js ذخیره کنید.

 

[sky boy]

ارسال و دریافت اطلاعات با آژاکس (ajax)

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

<script type="text/javascript">
var AjaxCaching = false;
function display(content, showresult){
    showresult.innerHTML = content;
}
function retrieve(url){
    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>

این فایل را نیز با نام ajax-copy-get.js ذخیره کنید.
همچنین فایلی با نام ajax-copy-get.txt باید در دایرکتوری (پوشه مورد نظر) موجود باشد و خالی نباشد (یعنی محتوایی داخل آن وجود داشته باشد)، تا اطلاعات از آن دریافت شود.
توضیح:
- در این کد سه تابع تعریف شده است، تابع display، retrieve و submitForm که هر کدام مربوط به بخش خاصی از فرآیند ارسال و دریافت اطلاعات با آژاکس هستند.
- تابع submitForm درون خود درخواست آژاکسی (createRequest) را فراخوانی می کند، در هنگامی که حالت آماده یا Request.readyState برابر 4 می شود، تابع retrieve فراخوانی می شود که وظیفه ی تعریف شده آن، نمایش محتویات فایل با فرمت txt است (که نام و آدرس آن را در متغیر filename قرار داده ایم)، سپس اطلاعات فرم با متد POST ارسال می شود (که در مثال بالا، صرفا درخواستی برای اجرای فایل php مقصد، ارسال می شود).
- آنگاه در فایل php که در ادامه توضیح داده میشه، محتوای فایل اول را با تابع file_get_contents به دست می آوریم و یک کپی از آن با نامی دیگر در همان دایرکتوری می سازیم.
- قسمت مربوط به AjaxCaching در تابع retrieve، برای جلوگیری از ذخیره یا به اصطلاح کَش شدن است، این قسمت با مقادیر متغیر AjaxCaching کنترل می شود (اگر false باشد، کش نمی شود، اما اگر true باشد، عمل کَش صورت می گیرد).
- تابع display تنها وظیفه دارد که با یک دستور innerHTML در جاوا اسکریپت، محتویات را به آی دی بلاک div مقصد بفرستد (در اینجا showresult).
- مقادیر متغیر content در واقع محتوایی است که از فایل txt خوانده می شود و در Request.responseText که قسمتی از فرآیند درخواست مبتنی بر آژاکس است (در آموزش های قبلی در این خصوص گفته شده)، وجود دارد.
- حالت آماده یا readyState برابر 4، یعنی درخواست در آژاکس کامل شده است و status == 200 یعنی صفحه درخواستی، مشکلی ندارد (عدد 200 در یک ارتباط تحت وب به معنی بی نقص بودن آن است، مثلا 404 به معنی پیدا نشدن صفحه مورد نظر، 500 به معنی خطای داخلی سرور و...)، این اعداد باید به طور استاندارد به صورت header از صفحه فراخوانی شده، دریافت شوند

 

[sky boy]

فایل php برای خواندن و کپی

تا اینجا ما درخواست آژاکسی و نحوه کنترل اطلاعات به کمک آن را تنظیم کرده ایم، اما آژاکس به تنهایی، بدون کمک یک زبان برنامه نویسی سمت سرور، کارایی زیادی ندارد،
لذا باید دست به دامن php شویم!
کد زیر به عنوان فایل مقصد با تابع file_get_contents ابتدا محتویات فایل txt را می خواند و در خود نگهداری می کند،
سپس در قسمت 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 ایجاد کنید.
اکنون همه چیز آماده است که توابع را فراخوانی کنیم.

 

[sky boy]

فراخوانی تابع آژاکسی

توابع در آژاکس در درواقع مبتنی بر جاوا اسکریپت هستند، چرا که آژاکس تنها ترکیبی نوین از دو زبان کُهن جاوا اسکریپت و xml است،
لذا فراخوانی آنها نیز می تواند با رویدادهای کنترلی صورت گیرد، مثلا رویداد onclick یا onload و...، در اینجا ما از یک دکمه در فرم html استفاده کرده ایم که مبتنی بر onclick است.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ارسال درخواست آژاکسی و کپی فایل</title>
<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) فراخوانی کنید.