فراخوانی فایل با آژاکس (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>

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

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

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

<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>

این فایل را نیز با نام ajax-copy-get.js ذخیره کنید.
همچنین فایلی با نام ajax-copy-get.txt باید در دایرکتوری (فولدر مورد نظر) موجود باشد و خالی نباشد (یعنی محتوایی داخل آن وجود داشته باشد)، تا اطلاعات از آن دریافت شود.
توضیح:
- در این کد سه تابع تعریف شده است، تابع Display، Retrieve و SubmitForm که هر کدام مربوط به بخش خاصی از فرآیند ارسال و دریافت اطلاعات با آژاکس هستند.
- تابع SubmitForm درون خود درخواست آژاکسی (CreateRequest) را فراخوانی می کند، در هنگامی که حالت آماده یا Request.readyState برابر 4 می شود، تابع Retrieve فراخوانی می شود که وظیفه ی تعریف شده آن، نمایش محتویات فایل با فرمت txt است (که نام و آدرس آن را در متغیر filename قرار داده ایم)، اما تا وقتی درخواست ارسال نشده است، readyState در عدد صفر است، لذا درخواست با متد 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 از صفحه فراخوانی شده، دریافت شوند (در این مورد در آموزش های PHP یا مبانی عمومی وب، تحت عنوان سربرگ های HTTP مباحثی وجود دارد).

فایل 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 ایجاد کنید.
اکنون همه چیز آماده است که توابع را فراخوانی کنیم.

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

توابع در آژاکس در درواقع مبتنی بر جاوا اسکریپت هستند، چرا که آژاکس تنها ترکیبی نوین از دو زبان کهن جاوا اسکریپت و 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) فراخوانی کنید.