آموزش جاوا اسکریپت – Ajax در جاوا اسکریپت

در این بخش از سری آموزش جاوا اسکریپت قصد داریم به شما نحوه پیاده سازی Ajax در جاوا اسکریپت را آموزش بدیم.

ایجکس (Ajax) چیست؟

Ajax مخفف Asynchronous Javascript And Xml است که به معنای بارگذاری داده ها از سرور و بروزرسانی بخش هایی از صفحه وب بصورت انتخابی بدون لود مجدد کل صفحه وب است.

به زبان ساده, Ajax در جاوا اسکریپت مرورگر را مجبور به استفاده از شیٔ XMLHttpRequest (XHR) برای ارسال و دریافت اطلاعات از وب سرور بصورت غیرهمزمان (asynchronously) در پشت صحنه, بدون بلاک کردن صفحه یا ایجاد تداخل در رابط کاربری است.

Ajax آنقدری محبوب است که به سختی می توانید یک اپلیکیشن را پیدا کنید که در بعضی از قسمت ها از Ajax استفاده نکرده باشد. این مثال در مقایس های بزرگ اپلیکیشن های آنلاین می تواند : Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr و … بسیاری از اپ های دیگر.

نکته: Ajax یک تکنولوژی جدید نیست. در واقع, ایجکس در کل واقعا یک تکنولوژی نیست. Ajax فقط یک اصطلاح برای شرح فرایند تبادل داده از وب سرور بصورت غیرهمگام با جاوا اسکریپت بدون رفرش صفحه است.

نکته ۲: واژه x در Ajax را با بطور مثال XML اشتباه نگیرید. اینجا فقط بحث زمان مطرح است. چرا که فرمت های تبادل داده ای مثل JSON یا HTML یا متن ساده نیز می تواند به جای XML استفاده شود.

Ajax در جاوا اسکریپت چطور کار می کند

برای ایجاد ارتباط Ajax , جاوا اسکریپت از یک شیٔ در مرورگر به نام XMLHttpRequest استفاده می کند که باعث ارسال درخواست های HTTP به سمت سرور و دریافت داده ها در پاسخ (response) می شود.

همه مرورگر های مدرن و IE7+ از شیٔ XMLHttpRequest پشتیبانی می کنند.

تصویر زیر نحوه کار ارتباط AJAX را نشان می دهد.

از آنجا که درخواست های Ajax معمولا غیرهمزمان هستند, اجرای اسکریپت به محض ارسال درخواست ایجکس, ادامه می یابد. بنابراین اجرای اسکریپت تا زمانی که پاسخ دریافت شود, متوقف نخواهد شد.

در بخش زیر در مورد هر یک از فرایندهایی که با آن کار خواهیم کرد, بحث می کنیم.

ارسال درخواست و دریافت پاسخ

قبل از ایجاد ارتباط Ajax بین سرور و کلاینت, اولین کاری که باید انجام بدید این است که یک نمونه از شیٔ XMLHttpRequest بسازید.

var request = new XMLHttpRequest();

1	var request = new XMLHttpRequest();

حالا, در مرحله بعدی ارسال درخواست به سرور, ایجاد یک درخواست جدید با متد open() از شیٔ XMLHttpRequest است.

متد open() معمولا دو پارامتر دریافت می کند – نوع درخواست HTTP که می تواند GET, POST ,.. باشد و دومی نیز آدرس URLی که قصد ارسال درخواست را دارید.

request.open("GET", "info.txt"); -Or- request.open("POST", "add-user.php");

1	request.open("GET", "info.txt"); -Or- request.open("POST", "add-user.php");

نکته: فایل می تواند هر نوعی مثل .text, .xml یا اسکریپت های تحت سرور مثل .php, .asp باشد که بعضی عملیات را روی سرور انجام دهد (اضافه یا خواندن داده از دیتابیس)

در نهایت از متد send() برای ارسال درخواست به سرور استفاده می کنیم.

request.send(); -Or- request.send(body);

1	request.send(); -Or- request.send(body);

نکته: متد send() یک پارامتر اختیاری body که به شما اجازه می دهد بدنه درخواست را مشخص کنید, دریافت می کند. در درجه اول چون درخواست های GET بدنه درخواست ندارند, پس برای درخواست های POST استفاده می شود.

متد GET معمولا برای ارسال حجم کمی از اطلاعات به سرور استفاده می شود درحالی که متد POST برای ارسال حجم زیادی از داده ها مثل داده فرم ها استفاده می شود.

در متد GET داده به عنوان پارامترهای URL ارسال می شود اما در متد POST داده ها به عنوان بدنه درخواست ارسال می شود پس در URL مرورگر قابل نمایش نیستند.

آموزش زیر را برای مقایسه دو متد POST و GET با جزییات مطالعه کنید :

https://netparadis.com/post-get-variables-php

در بخش زیر نگاهی دقیق تر به نحوه کار درخواست های Ajax می اندازیم.

اجرای درخواست GET ایجکس

درخواست GET معمولا برای دریافت یا بازیابی بعضی اطلاعات از سمت سرور که نیاز به دستکاری یا ایجاد تغییر در دیتابیس نیست, استفاده می کنیم. برای مثال, دریافت نتایج جستجو, دریافت اطلاعات کاربر بر اساس id یا نام و … .

مثال زیر به شما نحوه ارسال درخواست GET برای Ajax در جاوا اسکریپت را نشان می دهد:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Ajax GET Demo</title>
<script>
function displayFullName() {
    // Creating the XMLHttpRequest object
    var request = new XMLHttpRequest();

    // Instantiating the request object
    request.open("GET", "greet.php?fname=John&lname=Clark");

    // Defining event listener for readystatechange event
    request.onreadystatechange = function() {
        // Check if the request is compete and was successful
        if(this.readyState === 4 && this.status === 200) {
            // Inserting the response from server into an HTML element
            document.getElementById("result").innerHTML = this.responseText;
        }
    };

    // Sending the request to the server
    request.send();
}
</script>
</head>
<body>
    <div id="result">
        <p>Content of the result DIV box will be replaced by the server response</p>
    </div>
    <button type="button" onclick="displayFullName()">Display Full Name</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Ajax GET Demo</title>

function displayFullName() {

// Creating the XMLHttpRequest object

var request = new XMLHttpRequest();

// Instantiating the request object

request.open("GET", "greet.php?fname=John&lname=Clark");

// Defining event listener for readystatechange event

request.onreadystatechange = function() {

// Check if the request is compete and was successful

if(this.readyState === 4 && this.status === 200) {

// Inserting the response from server into an HTML element

document.getElementById("result").innerHTML = this.responseText;

}

};

// Sending the request to the server

request.send();

}

</script>

</head>

<body>

<p>Content of the result DIV box will be replaced by the server response</p>

</div>

<button type="button" onclick="displayFullName()">Display Full Name</button>

</body>

</html>

زمانی که درخواست غیرهمزمان است, متد send() سریعا یک مقدار را بعد از ارسال درخواست (request) برگشت می دهد.

از این رو, شما باید قبل از پردازش آن بررسی کنید که پاسخ در حال حاضر کجای چرخه حیات قرار دارد که اینکار با خصوصیت readyState از شیٔ XMLHttpRequest انجام می شود.

readyState یک مقدار عددی است که وضعیت درخواست HTTP را مشخص می کند. همچنین, تابع اختصاص داده شده به هندلر رویداد onreadystatechange در هربار تغییر خصوصیت readyState صدا زده می شود.

مقادیر احتمالی خصوصیت readyState در زیر خلاصه شده اند.

Value	State	Description
`۰`	`UNSENT`	An `XMLHttpRequest` object has been created, but the `open()` method hasn’t been called yet (i.e. request not initialized).
`۱`	`OPENED`	The `open()` method has been called (i.e. server connection established).
`۲`	`HEADERS_RECEIVED`	The `send()` method has been called (i.e. server has received the request).
`۳`	`LOADING`	The server is processing the request.
`۴`	`DONE`	The request has been processed and the response is ready.

نکته: از نظر تئوری رویداد readystatechange در هر بار تغییر خصوصیت readyState اجرا شود اما بیشتر مرورگرها زمانی که readyState به ۰ یا ۱ تغییر می کنند, این رویداد را ایجاد نمی کنند. به هر حال تمام مرورگرها این رویداد را زمانی که readyState به ۴ تغییر می کند, اجرار می کنند.

خصوصیت status یک مقدار عددی کد وضعیت HTTP را از پاسخ XMLHttpRequest برگشت می دهد.

بعضی از این کدهای معمول بصورت زیر هستند.

۲۰۰ – OK . درخواست با موفقیت در سرور پردازش شد.
۴۰۴ – Not Found . سرور نمی تواند صفحه درخواستی را پیدا کند.
۵۰۳ – Service Unavailable . سرور بصورت موقت غیر قابل دسترس است.

برای دیدن لیست کامل می توانید مقاله کد وضعیت HTTP را مطالعه کنید

کد greet.php ما به سادگی یک نام کامل از اتصال نام و نام خانوادگی ایجاد و پیام خوش آمد گویی را برگشت می دهد.

<?php
if(isset($_GET["fname"]) && isset($_GET["lname"])) {
    $fname = htmlspecialchars($_GET["fname"]);
    $lname = htmlspecialchars($_GET["lname"]);
    
    // Creating full name by joining first and last name
    $fullname = $fname . " " . $lname;

    // Displaying a welcome message
    echo "Hello, $fullname! Welcome to our website.";
} else {
    echo "Hi there! Welcome to our website.";
}
?>

<?php

if(isset($_GET["fname"]) && isset($_GET["lname"])) {

$fname = htmlspecialchars($_GET["fname"]);

$lname = htmlspecialchars($_GET["lname"]);

// Creating full name by joining first and last name

$fullname = $fname . " " . $lname;

// Displaying a welcome message

echo "Hello, $fullname! Welcome to our website.";

} else {

echo "Hi there! Welcome to our website.";

}

اجرای درخواست POST ایجکس

متد POST اساسا برای ارسال داده های فرم به سمت وب سرور استفاده می شود.

مثال زیر به شما نحوه ارسال (submit) داده های فرم به سمت سرور را با Ajax در جاوا اسکریپت نشان می دهد.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Ajax POST Demo</title>
<script>
function postComment() {
    // Creating the XMLHttpRequest object
    var request = new XMLHttpRequest();
    
    // Instantiating the request object
    request.open("POST", "confirmation.php");
    
    // Defining event listener for readystatechange event
    request.onreadystatechange = function() {
        // Check if the request is compete and was successful
        if(this.readyState === 4 && this.status === 200) {
            // Inserting the response from server into an HTML element
            document.getElementById("result").innerHTML = this.responseText;
        }
    };
    
    // Retrieving the form data
    var myForm = document.getElementById("myForm");
    var formData = new FormData(myForm);

    // Sending the request to the server
    request.send(formData);
}
</script>
</head>
<body>
    <form id="myForm">
        <label>Name:</label>
        <div><input type="text" name="name"></div>
        <br>
        <label>Comment:</label>
        <div><textarea name="comment"></textarea></div>
        <p><button type="button" onclick="postComment()">Post Comment</button></p>
    </form>    
    <div id="result">
        <p>Content of the result DIV box will be replaced by the server response</p>
    </div>    
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Ajax POST Demo</title>

function postComment() {

// Creating the XMLHttpRequest object

var request = new XMLHttpRequest();

// Instantiating the request object

request.open("POST", "confirmation.php");

// Defining event listener for readystatechange event

request.onreadystatechange = function() {

// Check if the request is compete and was successful

if(this.readyState === 4 && this.status === 200) {

// Inserting the response from server into an HTML element

document.getElementById("result").innerHTML = this.responseText;

}

};

// Retrieving the form data

var myForm = document.getElementById("myForm");

var formData = new FormData(myForm);

// Sending the request to the server

request.send(formData);

}

</script>

</head>

<body>

<br>

<label>Comment:</label>

<p><button type="button" onclick="postComment()">Post Comment</button></p>

</form>

<p>Content of the result DIV box will be replaced by the server response</p>

</div>

</body>

</html>

اگر از آبجکت FormData برای ارسال داده ها استفاده نکنید. برای مثال, اگر داده ها را در فرمت query string مثل request.send(key1=value1&key2=value2) ارسال کنید, پس نیاز است که هدر درخواست را با متد setRequestHeader() بصورت زیر مشخص کنید :

request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

1	request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

متد setRequestHeader() باید بعد از open() و قبل از send() استفاده کنید.

بعضی از هدرهای درخواست معمول :

application/x-www-form-urlencoded, multipart/form-data, application/json, application/xml, text/plain, text/html

نکته: شیٔ FormData یک راه آسان برای ایجاد جفت کلید/مقدار برای نمایش فیلدهای فرم و مقادیر آنها که می توانند با متد XMLHttpRequest.send() ارسال شوند, ارایه می دهد.

کد فایل confirmation.php مقادیر ارسال شده توسط کاربر را در خرورجی برگشت می دهد.

<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = htmlspecialchars(trim($_POST["name"]));
    $comment = htmlspecialchars(trim($_POST["comment"]));
    
    // Check if form fields values are empty
    if(!empty($name) && !empty($comment)) {
        echo "<p>Hi, <b>$name</b>. Your comment has been received successfully.<p>";
        echo "<p>Here's the comment that you've entered: <b>$comment</b></p>";
    } else {
        echo "<p>Please fill all the fields in the form!</p>";
    }
} else {
    echo "<p>Something went wrong. Please try again.</p>";
}
?>

<?php

if($_SERVER["REQUEST_METHOD"] == "POST") {

$name = htmlspecialchars(trim($_POST["name"]));

$comment = htmlspecialchars(trim($_POST["comment"]));

// Check if form fields values are empty

if(!empty($name) && !empty($comment)) {

echo "<p>Hi, <b>$name</b>. Your comment has been received successfully.<p>";

echo "<p>Here's the comment that you've entered: <b>$comment</b></p>";

} else {

echo "<p>Please fill all the fields in the form!</p>";

}

} else {

echo "<p>Something went wrong. Please try again.</p>";

}

بنابر دلایل امنیتی, مرورگرها اجازه ارسال درخواست های Ajax بین دامنه ها را نمی دهند. به این معنا که فقط می توانید یک درخواست Ajax را از آدرس های URL همان دامنه به عنوان صفحه اصلی ارسال کنید.

برای مثال, اگر اپلیکیشن شما روی دامنه “mysite.com” در حال اجرا است, نمی توانید یک درخواست ایجکس را از دامنه mysite.com به othersite.com یا هر دامنه دیگر ارسال کنید که به عنوان قانون same origin شناخته می شود.

به هر حال, می توانید تصاویر, استایل ها, فایل های JS و دیگر منابع را از هر دامنه ای لود کنید.

نکته: متد های Ajax در جی کویری را هم می توانید برای پیاده سازی سریع ایجکس بررسی کنید. فریمورک jQuery متدهای راحتی را برای پیاده سازی قابلیت Ajax ارایه داده است.

امیدواریم در این بخش آموزش جاوا اسکریپت, از آموزش Ajax در جاوا اسکریپت نهایت استفاده را برده باشد.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

لغو پاسخ

مسعود ۳۰ آذر ۱۴۰۲

سلام ممنون از انوزش خوبتون میخواستم بدونم چطور میتونم مقدار برگشتی رو بریزم توی یک متغییر و بعدا ازش استفاده کنم ؟

پاسخ

حسن شفیعی ۱ دی ۱۴۰۲

سلام خوشحالیم که مفید واقع شده
مقدار برگشتی رو داخل کوکی ذخیره کنید تا بعدا بتونید استفاده کنید:
آموزش جاوا اسکریپت – کوکی ها در جاوا اسکریپت

پاسخ

مسعود ۱ دی ۱۴۰۲

ممنون از پاسختون اما فک میکنم سوالم رو کامل نپرسیدم .
من باید این مقدار برگشتی رو به عنوان یک متغیر php استفاده کنم و توی کدهای php ازش استفاده کنم . راهی وجود داره ؟

پاسخ
حسن شفیعی ۲ دی ۱۴۰۲

راه جل همون کوکی هست که بتونید استفاده کنید

پاسخ

MoeinS ۷ اسفند ۱۴۰۰

خسته نباشید…خیلی عالی و مفید بود و استفاده کردم.

پاسخ

حسن شفیعی ۷ اسفند ۱۴۰۰

سلام. ممنون.
خوشحالیم که مفید واقع شده.
موفق و پیروز باشید

پاسخ

داود ۲۱ اردیبهشت ۱۴۰۰

سلام من میخوام اطلاعاتی از اطلاعات json را از سرور بگیرم و در صفحه ی خودم منتشر کنم باید چیکار کنم؟

پاسخ

حسن شفیعی ۲۱ اردیبهشت ۱۴۰۰

سلام. از ajax استفاده کنید

پاسخ

رضا ۸ بهمن ۱۳۹۹

سلام مهندس جان، شما آموزش جاوا اسکریپ و آژاکس رو انجام میدین؟

پاسخ

حسن شفیعی ۸ بهمن ۱۳۹۹

سلام.
خیر.
همه سری آموزش های متنی در سایت بصورت رایگان منتشر شده

پاسخ

حسین ۳ آبان ۱۳۹۸

سلام استاد شفیعی خسته نباشید. درجاوااسکریپت کدی هست است که بتونم شمارنده تعداد کلیک رو که با متغیر سشن ذخیره میکنه با هر بار کلیک دریک فایل tex ذخیره کنیم (درمرورگرذخیره نشه) ونتیجه رو از فایل نشون بدیم.

پاسخ

حسن شفیعی ۸ آبان ۱۳۹۸

سلام. بفرمایید کد آماده این مورد :

<?php

    $counterFile = 'counter.txt' ;

    // jQuery ajax request is sent here
    if ( isset($_GET['increase']) )
    {
        if ( ( $counter = @file_get_contents($counterFile) ) === false ) die('Error : file counter does not exist') ;
        file_put_contents($counterFile,++$counter) ;
        echo $counter ;
        return false ;
    }

    if ( ! $counter = @file_get_contents($counterFile) )
    {
        if ( ! $myfile = fopen($counterFile,'w') )
            die('Unable to create counter file !!') ;
        chmod($counterFile,0644);
        file_put_contents($counterFile,0) ;
    }

?>
<html>
    <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
            jQuery(document).on('click','a#download',function(){
                jQuery('div#counter').html('Loading...') ;
                var ajax = jQuery.ajax({
                    method : 'get',
                    url : '/test.php', // Link to this page
                    data : { 'increase' : '1' }
                }) ;
                ajax.done(function(data){
                    jQuery('div#counter').html(data) ;
                }) ;
                ajax.fail(function(data){
                    alert('ajax fail : url of ajax request is not reachable') ;
                }) ;
            }) ;
        </script>
    </head>
    <div id="counter"><?php echo $counter ; ?></div>
    <a href="" id="download" onclick="window.open(this.href);return false;" rel="nofollow">Download btn</a>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

$counterFile = 'counter.txt' ;

// jQuery ajax request is sent here

if ( isset($_GET['increase']) )

{

if ( ( $counter = @file_get_contents($counterFile) ) === false ) die('Error : file counter does not exist') ;

file_put_contents($counterFile,++$counter) ;

echo $counter ;

return false ;

if ( ! $counter = @file_get_contents($counterFile) )

if ( ! $myfile = fopen($counterFile,'w') )

die('Unable to create counter file !!') ;

chmod($counterFile,۰۶۴۴);

file_put_contents($counterFile,۰) ;

<html>

jQuery(document).on('click','a#download',function(){

jQuery('div#counter').html('Loading...') ;

var ajax = jQuery.ajax({

method : 'get',

url : '/test.php', // Link to this page

data : { 'increase' : '۱' }

}) ;

ajax.done(function(data){

jQuery('div#counter').html(data) ;

ajax.fail(function(data){

alert('ajax fail : url of ajax request is not reachable') ;

<a href="" id="download" onclick="window.open(this.href);return false;" rel="nofollow">Download btn</a>

با جاوا اسکریپت نمیتونید داخل سشن ذخیره کنید برای همین از php هم باید کمک بگیرید
موفق باشید.

پاسخ

حسین ۸ آبان ۱۳۹۸

خیلی متشکرم از لطف شما

پاسخ

آموزش جاوا اسکریپت – Ajax در جاوا اسکریپت

ایجکس (Ajax) چیست؟

Ajax در جاوا اسکریپت چطور کار می کند

ارسال درخواست و دریافت پاسخ

اجرای درخواست GET ایجکس

اجرای درخواست POST ایجکس

ساخت سیستم نوتیفیکیشن با php و Ajax

آموزش جی کوئری – Ajax چیست؟ Ajax در جی کوئری

افزودن ایموجی به سیستم نظرات توسط PHP

معرفی متدهای ایجکس در jQuery – بخش اول

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه