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

Ajax چیست؟

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

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

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

توجه: Ajax یک فناوری جدید نیست، در واقع، Ajax حتی واقعاً یک فناوری نیست. Ajax فقط یک اصطلاح برای توصیف فرآیند تبادل داده ها از یک وب سرور به صورت ناهمزمان از طریق جاوا اسکریپت، بدون ترفرش کردن دوباره صفحه است.

نکته: عبارت X (یعنی XML) در AJAX اشتباه نگیرید. فقط دلایل تاریخی وجود دارد. سایر فرمت های تبادل داده مانند JSON، HTML یا متن ساده را می توان به جای XML استفاده کرد.

آشنایی با نحوه عملکرد Ajax (ایجکس)

برای انجام ارتباط Ajax، جاوا اسکریپت از یک شیء ویژه تعبیه شده در مرورگر استفاده می کند. یک شی XMLHttpRequest (XHR) برای ایجاد درخواست های HTTP به سرور و دریافت داده ها در پاسخ.

همه مرورگرهای مدرن (Chrome، Firefox، IE7+، Safari، Opera) از شی XMLHttpRequest پشتیبانی می کنند.

تصاویر زیر نحوه عملکرد ارتباط Ajax را نشان می دهد:

نحوه عملکرد Ajax

از آنجایی که درخواست‌های 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");

request.open("GET", "info.txt");

-Or-

request.open("POST", "add-user.php");

نکته: فایل می‌تواند از هر نوع باشد، مانند txt یا xml. یا فایل‌های اسکریپتی سمت سرور، مانند .php یا asp. که می‌تواند برخی از اقدامات را در سرور انجام دهند (مثلاً درج یا خواندن داده‌ها از پایگاه داده) قبل از ارسال پاسخ به مشتری.

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

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

request.send();

-Or-

request.send(body);

نکته: متد ()send یک پارامتر body اختیاری را می پذیرد که به ما امکان می دهد بدنه درخواست را مشخص کنیم. این در درجه اول برای درخواست‌های HTTP POST استفاده می‌شود، از انجا که درخواست HTTP GET بدنه درخواستی ندارد، فقط درخواست هدر ها میباشد.

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

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

در بخش بعدی Ajax در جاوا اسکریپت نگاهی دقیق تر به نحوه عملکرد درخواست های Ajax خواهیم داشت.

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

درخواست GET معمولاً برای دریافت یا بازیابی نوعی از اطلاعات از سرور استفاده می شود که نیازی به دستکاری یا تغییر در پایگاه داده ندارد، به عنوان مثال، واکشی نتایج جستجو بر اساس یک عبارت، واکشی جزئیات کاربر بر اساس شناسه یا نام آنها، و … .

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

<!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", "/examples/php/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", "/examples/php/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 بلافاصله پس از ارسال درخواست باز می گردد.بنابراین، قبل از پردازش آن با استفاده از پراپرتی readyState شی XMLHttpRequest، باید بررسی کنید که پاسخ در حال حاضر در چرخه حیات خود کجا قرار دارد.

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

Ajax در جاوا اسکریپت

توجه: از نظر تئوری، رویداد readystatechange باید هر بار که ویژگی readyState تغییر می‌کند فعال شود.اما، اکثر مرورگرها وقتی ReadState به 0 یا 1 تغییر می کند، این رویداد را فعال نمی کنند. با این حال، همه مرورگرها این رویداد را هنگامی که readyState به 4 تغییر می دهد، فعال می کنند.

پراپرتی status کد عددی وضعیت HTTP پاسخ XMLHttpRequest را برمی گرداند. برخی از کدهای رایج وضعیت HTTP در زیر فهرست شده اند:

200 — OK : سرور با موفقیت این درخواست را پردازش کرد.
404 — Not Found : سرور نمی تواند صفحه درخواستی را پیدا کند.
503 — Service Unavailable: سرور به طور موقت در دسترس نیست.

در اینجا کدی از فایل “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.";

}

انجام درخواست Ajax POST

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

مثال زیر به شما نشان می دهد که چگونه داده های فرم را با استفاده از 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", "/examples/php/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", "/examples/php/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 به سرور ارسال می‌کنید، به عنوان مثال: 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 ارسال شوند.اگر نوع رمزگذاری فرم روی multipart/form-data تنظیم شده باشد، داده های ارسالی در همان قالبی است که متد ()subform برای ارسال داده ها استفاده می کند.

در اینجا کد فایل “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 را به آدرس های اینترنتی ارسال کنید، به عنوان مثال، اگر برنامه شما در دامنه “mysite.com” اجرا می شود، نمی توانید درخواست Ajax را به “othersite.com” یا هر سایت دیگری ارسال کنید.این معمولاً به عنوان همان سیاست مبدا شناخته می شود.

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

نکته: روش های jQuery Ajax را برای اجرای سریع و بدون درز Ajax بررسی کنید. چارچوب jQuery روش های بسیار مناسبی را برای پیاده سازی عملکرد Ajax ارائه می دهد.

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

سایر مقالات:

کوکی ها در جاوا اسکریپت

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

برای امتیاز به این نوشته کلیک کنید!

[کل: 1 میانگین: 5]

اشتراک‌گذاری

کوکی ها در جاوا اسکریپت نوشته قبل

sharedpreferences در کاتلین چگونه پیاده سازی میشود. نوشته بعد

علی فرجی

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