article

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

ajax-php-txt-file

در وب اگر بخواهیم اطلاعاتی را از سمت کاربر (Client) ارسال و در سمت سرور (Server) در فایلی ذخیره کنیم یا برعکس اطلاعات فایلی را از سرور خوانده و بدون رفرش صفحه در سمت کاربر نمایش دهیم، بی تردید گزینه مناسب انجام این فرآیندها استفاده از قابلیت های ای جکس (Ajax) خواهد بود، ای جکس به عنوان فناوری که می تواند واسط بین سمت کاربر و سمت سرور باشد به خوبی جایگزین روش های متداول که مبتنی بر رفرش و بارگذاری مجدد صفحه هستند می شود، گفتیم که تکنیک ای جکس مبتنی بر جاوا اسکریپت است و لذا در سمت کاربر علاوه بر متدهای ای جکس باید از دستورات جاوا اسکریپتی نیز استفاده کنیم، در سمت سرور نیز نیاز به زبان های برنامه نویسی سمت سرور نظیر PHP است که مقادیر ارسال شده از ای جکس را دریافت و در فایل ذخیره نموده یا مواردی را از فایل خوانده و در پاسخ درخواست ای جکس به سمت کاربر ارسال نماید، با این توضیح در آموزش پیش رو در خصوص نحوه ذخیره و نمایش اطلاعات فایل با ای جکس (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
sectionدسته بندی: آموزش مقدماتی » Ajax
related مطالب بیشتر:
» نمایش پیام در حال بارگذاری با ای جکس (Ajax)
» ارسال و دریافت اطلاعات با متد GET و POST در ای جکس (Ajax)
» نمایش افکت fade in با ای جکس (Ajax)
» آموزش ای جکس (Ajax)، تکنیک غیرهمزمانی در وب
» فریم ورک های آژاکس (Ajax Frameworks)
commentنظرات (۱۶ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: Hesam
زمان: ۱۶:۰۷:۱۹ - تاریخ: ۱۳۹۱/۱۰/۲۱
سپاس از پاسخ حضرتعالي ، چون تعداد آيتم ها زياد هست نمي تونه بصورت دستي كپي كنه ... يك گروه 6,7 نفري براي بروز رساني از صبح ساعت 8 تا 5 بعدازظهر در حال فعاليت هستند .
كه ايشان زحمات همه را به راحتي بالا ميكشه !
آيا روشي وجود دارد كساني كه به سايت من File_Get_Contents يا CURL مي كنند را شناسايي و در ديتابيس ذخيره كنم ؟
بنده حدود 5 ماه پيش از شما در رابطه با بارگذاري محتوا بدون رفرش شدن صفحه كمك گرفتم و راهنمايي هاي شما مشكل منو رفع كرد .
در صورت امكان مي خواستم از طريق ايميل موضوع را با شما در ميان بگذارم .
پاينده باشيد
پاسخ: 
مهم نیست فرد از چه تابعی برای فراخوانی صفحات شما استفاده می کند (file_get_contents يا CURL تنها توابع و روش در برنامه نویسی PHP هستند) چون از نظر سرور سایت شما، یک درخواست عادی محسوب شده و اطلاعات لینک درخواست شده در پاسخ داده می شود، لذا بر روی اینکه فرد از چه تکنولوژی استفاده می کند نباید متمرکز شوید، آنچه که باعث شناسایی کاربران می شود یا واسط کاربری آنها است مانند اطلاعات مرورگر یا هر سیستم دیگری که صفحات وب را فراخوانی کند مانند ربات های خزنده، به طور مثال واسط کاربری ربات گوگل با عبارت زیر مشخص می شود:
Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
حال اگر در کد htaccess به جای bot بنویسید Googlebot، تمام واسطه های کاربری که داخل آنها این عبارت باشد، خطای 403 دریافت می کنند، و یا IP آنها است که با آن به سرور شما درخواست ارسال می کنند، خارج از این نمی توان کار خاصی کرد.
شاید درج لینک در محتوا بهترین گزینه برای شما باشد، در محتوا لینک درج کنید تا کاربران سایت مذکور به منبع اصلی مطالب مراجعه کنند.
نویسنده: مازیار
زمان: ۱۱:۱۳:۱۲ - تاریخ: ۱۳۹۱/۱۰/۲۲
کسی که که از این توابع برای فراخوانی استفاده می کند با چند replace می تواند لینک را از متن حذف کند به نظرم بهترین حالت این است که تگ کلیدی که باعث دزدی می شود را متغیر کرد به طور مثال اگر کد فراخوانی با تگ table کار می کند کاری کرد که در هر بار باز شدن صفحه بین 1 تا 4 کد table به صورت رندم ایجاد شود تا کلید از بین برود و سورس html متغیر شود اگر سورس ثابت نداشته باشیم کدی هم برای دزدی نمی توان نوشت
پاسخ: 
ممنون از پیشنهاد بسیار خوب شما، البته این روش هم ممکن است صد در صد مانع دزدی نشود، چون تگ های HTML از مطالب به راحتی قابل تفکیک است، ولی بسته به مهارت فرد تا حدودی جوابگو است.
نویسنده: مازیار
زمان: ۱۲:۵۲:۱۲ - تاریخ: ۱۳۹۱/۱۰/۲۲
مورد دیگری که به ذهن بنده رسید این است که استنفاده از HTACCESS فایده ای ندارد به این دلیل که معمولا برای فرخوانی به طور روزانه از CRONJOB استفاده می شود اگر شما مشخصات را پیدا کنید و بلوک کنید به سادگی با استفاده از هاست های رایگان سیستم را تغییر می دهند و مجددا باید مشخصات جدید را جایگزین کرد که این مورد دردسر کامل به شمار می اید من در سایت بورس ایران دیدم که اسکریپت قیمت هایی که داده بودن خاصیت عجیبی داشت تمام ساختار فراخوانی می شد ولی اعداد فراخوانی نمی شد نمی دانم چگونه این کار را کرده بودند ولی سیستم جالبی بود اگر اطلاعی دارید لطفا بفرمایید بنده هم استفاده کنم
پاسخ: 
به طور کلی می توان این نوع کارها را با ترکیب جاوا اسکریپت و ای جکس انجام داد (به فرض اعداد را با Ajax از سرور دریافت کرد و به جای خروجی مستقیم، از طریق متد innerHTML به خروجی ارسال کرد، در این صورت اعداد در سورس صفحه نشان داده نمی شوند ولی در مرورگر نمایش داده می شوند)، معمولا هم از کتابخانه جی کئوری بدین منظور استفاده می شود.
به این صورت بخش اصلی صفحه برای موتورهای جستجو (و سایر ربات ها) قابل ایندکس است ولی بخش جاوا اسکریپتی که شامل اعداد است، قابل ایندکس نیست.
نویسنده: مازیار
زمان: ۱۵:۰۸:۵۱ - تاریخ: ۱۳۹۱/۱۰/۲۲
نکته جالبی هست اگر امکان داره یک مثال و آموزش برای این مورد در سایت قرار دهید گمان کنم برای افرادی مثل من و اقای حسام بسیار مفید باشد
ممنون میشم مثالی باشه که مثلا 10 عدد را وقتی وارد صفحه میشی در جاهای مختلف صفحه نمایش بده
پاسخ: 
در آموزش های کاربردی ای جکس مطالبی مرتبط به این موضوع وجود دارد، اگر کافی نبود اطلاع دهید تا یک مثال مشابه آنچه می خواهید نوشته شود.
نویسنده: مازیار
زمان: ۱۶:۲۱:۰۶ - تاریخ: ۱۳۹۱/۱۰/۲۳
من یک نمونه ساختم مشکل تا حدی حل شد ولی در سورس در بخش اسکریپت اعداد نمایش داده می شود لطفا به لینک زیر بروید و سورس را مشاهده کنید ببینید راه حلی برای این مشکل دارید ممنون
http://rayanide.com
پاسخ: 
راه حل آن استفاده از ای جکس است، ای جکس نتایج (اعداد) را از سرور (کدهای PHP) دریافت می کند و بدون اینکه در سورس صفحه HTML دیده شود، در بلاک آن را نمایش می دهد.
نویسنده: maryam
زمان: ۱۱:۵۲:۰۸ - تاریخ: ۱۳۹۲/۰۲/۲۸
با سلام
و باز هم ممنون از مطالب مفیدتون
کد شما رو اجرا کردم جواب مورد نظر رو نگرفتم چک کردم دیدم ajax_request.status صفر ست میشه!
و خط ajax_request.responseText
(در فایل ajax-send-receive.js) اجرا نمیشه!
لطفا راهنمایی کنید
پاسخ: 
ابتدا باید مطابق آموزش فایل ها را در کنار هم ایجاد کنید، یعنی این فایل ها:
ajax_request.js
ajax-send-receive.js
text-file.txt
php-file.php
ajax-send-receive.html
اگر تمام موراد را صحیح انجام دهید کد تست شده و عمل می کند، برای خطایابی می توانید تابع به تابع رد اجرای کد را دنبال و با alert مقادیر را بررسی کنید تا اشکال کار مشخص شود.
نویسنده: maryam
زمان: ۱۲:۲۸:۰۱ - تاریخ: ۱۳۹۲/۰۲/۲۸
یه سوال دیگه هم داشتم
فایل تصویری رو هم میشه از این طریق نمایش داد؟
و اینکه ممنون میشم در مورد امکان ذخیره کردن این فایل هم راهنمایی کنید منظورم اینکه کاربر این امکان رو داشته باشه که مثلا بعد از اینکه button رو زد پنجره ای باز بشه که save یا open کردن فایل رو انتخاب کنه
پاسخ: 
برای نمایش تصویر کافی است در پاسخ، کد نمایش را به درخواست آژاکسی تحویل دهید، به فرض به جای متن، پاسخ به این صورت باشد:
<img src="image/example.jpg" alt="example" height="600" width="800">
اما برای اینکه تصویر به صورت قابل ذخیره برای کاربر باشد نمی توانید از آژاکس استفاده کنید، بلکه ابتدا باید یک فایل PHP با نام فرضی download-image.php داشته باشید که مشابه دستورات زیر در آن باشد:
<?php 
$file = 'example.jpg';
header('Content-Description: File Transfer');
header("Content-type: application/octet-stream");
header("Content-Disposition: attachment; filename= ".$file."");
header("Content-Transfer-Encoding: binary");
header("Content-Length: ".filesize($filename));
readfile($file);
?>
و سپس در سمت کاربر و در کدهای جاوا اسکریپت از نمونه کد زیر استفاده کنید:
function DownloadImage(){ 
var file_url = "http://localhost/download-image.php";
document.location = file_url;
}
به این ترتیب با کلیک کاربر بر روی دکمه، تابع فرضی DownloadImage فراخوانی شده و این تابع فایل PHP را فراخوانی می کند و فایل، تصویر را به عنوان خروجی به صورت قابل دانلود به کاربر نشان می دهد.
نویسنده: maryam
زمان: ۲۲:۳۱:۵۳ - تاریخ: ۱۳۹۲/۰۲/۲۸
در مورد سوال اول من تابع ها رو چک کرده بودم و همانطور که خدمتتون عرض کردم Request.status صفر است.
Request.status نامساوی 200 است و خط
var content = Request.responseText
اجرا نمیشه!
ممنون که وقت میذارید
پاسخ: 
اینکه وضعیت برابر صفر است یعنی هیچ درخواستی ارسال نشده و در واقع شی Request به درستی اجرا نشده است، به هر صورت کد تست شده و مشکلی ندارد، باید ببینید کجای کار را اشتباه انجام می دهید.
نویسنده: كميل
زمان: ۰۰:۱۹:۵۳ - تاریخ: ۱۳۹۲/۰۷/۲۸
سلام و ممنون از زحمتي كه مي كشيد
يه سوالي در مود اين آموزشتون برام پيش اومده اونم اينه كه در صفحه php-file.php شما چيزي را echo نكرده ايد... پس مقداري كه درون responseText قرار مي گيرد از كجا مي آيد؟ در واقع صفحه php ما خروجي ندارد (اگر اشتباه نكنم)
اگر هم فرضا متغيرهاي ساخته شده در صفحه را به عنوان خروجي مي گيرد از كجا مي فهمد كه كدام متغير به عنوان خروجي در نظر بگيرد؟
ببخشيد اگه سوالم خيلي مبتديانه بود ... ممنون ميشم اگه كامل جواب بديد
پاسخ: 
ابتدا با یک درخواست فایل PHP با نام فرضی php-file.php فراخوانی می شود که این فایل مقادیر را از فیلد input دریافت و در فایل متنی text-file.txt کپی می کند، سپس تابع receiveResponse فراخوانی شده و اطلاعات از text-file.txt با متد GET دریافت می شود.
نویسنده: علی
زمان: ۱۷:۲۶:۳۰ - تاریخ: ۱۳۹۲/۱۱/۱۳
اقا سلام
ما می خواهیم مقادیر
var x = ?
را از طریق ajax
به یک فرم دیگر مثلا
123.php
ارسال کنیم
میشه راهنمایی بفرمایید چطوری این کار ممکنه و در ضمن این داده ها درون فرم نیستند

در ضمن از راهنمایی قبلی تون هم بسیار بسیار سپاسگذارم
پاسخ: 
لطفا به آموزش های مقدماتی Ajax مراجعه کنید، این موارد جزء نکات مقدماتی ای جکس است.
نویسنده: علی
زمان: ۱۶:۱۱:۲۶ - تاریخ: ۱۳۹۴/۰۲/۱۹
با سلام. یه نکته ای هست برای کسانی که با لوکال هاست کار می کنند. این که باید در صفحه ی پی اچ پی حتما از هدر زیر استفاده کنند و گرنه جواب نمی گیرند.
header("Access-Control-Allow-Origin:*");
با تشکر
پاسخ: 
البته این سربرگ HTTP معنی خاصی دارد و معمولا زمانی استفاده می شود که اطلاعات بین دو دامنه به اشتراک گذاشته شوند (به فرض لوکال هاست و یک سرور آنلاین)، لذا زمانی که تمام فرآیند در یک سایت یا لوکال هاست انجام شود نیاز خاصی به این سربرگ HTTP نخواهد بود، در غیر اینصورت باید مشکل از مورد دیگری باشد!
نویسنده: مهدی
زمان: ۲۳:۵۷:۵۳ - تاریخ: ۱۳۹۵/۰۸/۰۷
سلام
آیا نوشتن این خط کد
var content = Request.responseText;
Display(content, showresult);
ضروری است؟ می توان بجای استفاده از تابع دیسپلی فقط نوشت ؟
showresult.innerHTML=request.responseText
پاسخ: 
بله هیچ تفاوتی نمی کند! البته بهتر است کدهایتان را همیشه تا حد ممکن به صورت تابع بندی شده بنویسید (قسمت هایی که کارهای جداگانه یا تکراری انجام می دهند درون توابع جداگانه باشند) چون این کار علاوه بر اینکه درک و بازخوانی دستورات را ساده تر می کند، روند توسعه برنامه ها را در پروژهای بزرگ و حرفه ای سرعت می بخشد!
نویسنده: مهدی
زمان: ۲۳:۵۹:۵۰ - تاریخ: ۱۳۹۵/۰۸/۰۷
سلام
این خط کد دقیقا چه کار می کنه؟
if(AjaxCaching == false){
url = url + "?nocache=" + Math.random();
و آیا اگه نباشه و ما کلا از متغیر ajaxCashing استفاده نکنیم مشکلی پیش میاد؟
پاسخ: 
این قسمت یک عبارت تصادفی (به صورت یک پارامتر در متد GET) به انتهای آدرس URL درخواستی اضافه می کند، با این کار مرورگر در هر درخواست از سرور، آخرین تغییرات را دریافت می کند و عمل کش شدن (ذخیره موقت داده ها در مرورگر) صورت نمی گیرد، برای اطمینان از اینکه نتیجه دریافتی دقیقا همان آخرین تغییرات در سرور است، این قسمت باید باشد، در غیر اینصورت ممکن است نتایج به روز نشوند و به اصطلاح کش شوند!
نویسنده: حسين
زمان: ۱۵:۰۹:۳۱ - تاریخ: ۱۳۹۷/۰۲/۱۲
سلام ممنون از آموزشات خوبتون (^_^)
من ميخوام يک فايل رو با آژاکس آپلود کنم يعني کاربر يک فايل انتخاب کنه و آپلود کنه راهي هست؟
پاسخ: 
در حال حاضر آپلود فایل با صرف Ajax از طریق آبجکت FormData و HTML5 امکانپذیر است.
https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
ممکن است این قابلیت در نسخه های قدیمی مرورگرها پشتیبانی نشود به همین دلیل فعلا برای سازگاری کامل می توانید از jQuery استفاده کنید (لطفا در وب جستجو کنید).
نویسنده: محمود
زمان: ۱۰:۱۶:۰۶ - تاریخ: ۱۳۹۷/۰۶/۱۷
با سلامی دوباره.
با این فرم :
حذف شد
به صفحه save.php زیر اطلاعات را می فرستم و یک فایل متنی test.txt ایجاد می شود.
حذف شد
حالا من لازم دارم به جای اطلاعات فرم اطلاعات داخل یک تک div مثلن متن و جدول را به صفحه save.php ارسال و فایل متنی بسازم. من در اثر مطالب آموزشی اجکس سایتتان و همینطور در همکارهایتان گشتم و بیشتر ارسال اطلاعات داخل فرم یا تکست که name دارند قابل ارسال بود و البته این از کمی دانش من نیز است. لطفن کمک کنید . تا کاربر با زدن دکمه send محتوای مثلن اطلاعات زیر
حذف شد
را به save.php ارسال شود تا فایل متنی test ساخته شود.
متشکر می شوم . خیلی اسیر شدم. اگر خواستید ایمیل کنید.!
پاسخ: 
ابتدا باید با نحوه دریافت و ارسال پارامترها از طریق متد POST و GET به سرور با Ajax آشنا شوید، سپس می توانید به جای اطلاعات فیلدهای input، هر مقدار متنی دیگر که مد نظرتان بود را ارسال کنید، برای دریافت اطلاعات نیز می توانید به تگ مورد نظر ID اختصاص داده و از متدهای innerHTML یا innerText در جاوا اسکریپت استفاده کنید، به فرض:
var test = document.getElementById('test').innerHTML;
و از این متغیر که اطلاعات را در خود دارد در درخواست Ajax استفاده کنید:
var params = "name=" + test;
xmlHttp.open("POST", "index.php", true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send(params);
قاعدتا اینها فقط بخشی از کدها است و در صورت آشنایی با Ajax راهگشا خواهد بود.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




3 × 7
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form adel
در:
سلام با تشکر از سایت خوب شما. یه سوال داشتم چگونه تمام این کدها را در جاوا اسکریپت همزمان قرار دهیم. من مثلا دستور این...
۲۱:۲۵:۴۰ ۱۳۹۸/۰۸/۲۴

form یه سوال کننده
در:
سلام. ببخشید چطور میشه ایمیل هایی رو میفرستن که ریپلای زدن رو ایمیلی که از طرف ما نبوده بیشتر تو تبلیغات دیدم امیدوارم منظورم و...
۰۳:۲۳:۰۸ ۱۳۹۸/۰۸/۲۴

form پرتو
در:
با عرض سلام و خسته نباشید امیدوارم حالتون خوب باشه من دو سه سال پیش وبلاگم رو حذف کردم ایا امکانش هست برگرده؟ ادرس...
۱۴:۵۵:۵۲ ۱۳۹۸/۰۸/۲۰

form علی
در:
سلام من نمی تونم html tag رو چطور در وبلاگم قرار بدم وبلاگم اینه
tagtak.blog.ir
۱۰:۲۳:۳۴ ۱۳۹۸/۰۸/۲۰

form حمید
در:
سلام. خسته نباشید. من میخاستم استایل فیلدهای فرمم رو تغییر بدم منتهی نمیدونم از چه کدهایی باید استفاده کنم. برای اینکه فرمی به شکل...
۱۰:۳۶:۱۹ ۱۳۹۸/۰۸/۱۹

form سمیه
در:
سلام ممنون بابت آموزش مفیدتون توی تگ ها هرچیزی که در تگ head قرار بگیره نمایش داده نمیشه، اما ممنون میشم...
۲۰:۴۹:۲۳ ۱۳۹۸/۰۸/۱۷

form استادمجازی
در:
سلام. از ادمین عزیز و همگی دعوت می کنم آموزش های خوبتون را بصورت آموزش ویدیویی یا صوتی و... در سایت ostadmajazi.com استادمجازی ...
۲۲:۱۲:۲۳ ۱۳۹۸/۰۸/۱۳

form mohamad
در:
سلام و خسته نباشید ، توی فرمی که ساختم چند تا drop down دارم که میخوام با php براشون شرط بذارم به طوری...
۱۳:۵۱:۳۴ ۱۳۹۸/۰۸/۱۰

form رضا
در:
خسته نباشید این جلسه آخر html بود؟؟؟؟
۰۱:۱۵:۰۷ ۱۳۹۸/۰۸/۱۰

form امیرمحمد
در:
سلام و خسته نباشید استاد بنده میخوام بین دو کد زیر که مشخص کردم رو به دست بیارم
// ---------------------set سلام...
۱۹:۳۰:۵۳ ۱۳۹۸/۰۸/۰۸

form حجت
در:
خیلی ممنونم از لطف شما. اوکی شد.
۱۰:۲۸:۳۵ ۱۳۹۸/۰۸/۰۶

form میلاد
در:
آشنایی نسبی با css, php و ajax دارم و نمیخام از library های موجود در نت استفاده کنم. خواستم با همین متد که انصافا روان...
۲۳:۲۲:۵۵ ۱۳۹۸/۰۸/۰۵

form عرفان
در:
با سلام. مدتی بود که بدلایل مشکلات زیاد نتونستم به وبلاگم رسیدگی کنم ولی وقتی برگشتم میبینم که هزاران بازدید داشتم و همشونم به زبان...
۲۲:۴۹:۴۴ ۱۳۹۸/۰۸/۰۵

form raha
در:
سلام وقتتون بخیر ببخشید علامت @ در کل به چه معناست ممنون میشم پاسخ دهید
۲۰:۱۲:۵۹ ۱۳۹۸/۰۸/۰۵

form میلاد
در:
باسلام تشکر از مطالب روان و پرکاربردتان. در خصوص آموزش مذکور، نحوه و ترفند نمایش محور عمودی در سمت چپ نمودار (مشابه...
۰۲:۳۸:۴۰ ۱۳۹۸/۰۸/۰۵