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

سایت های دیگر ما:

گود دانلود_حس خوب دانلود موزیک www.gooddlmusic.ir گود دانلود_حس خوب دانلود عکس www.gooddlimage.ir گود دانلود_حس خوب دانلود بازی www.gooddlgame.ir

جستجوگر

موضوعات

آخرین ارسالی های انجمن

عنوان	پاسخ	بازدید	توسط
تصاویری از قدرتمندترین سلاح آمریکا که برای اولین بار آماده پرواز می‌شود	0	73	admin
جنگ غزه؛ آمریکا برای سومین بار قطعنامه آتش‌بس را در شورای امنیت وتو کرد	0	157	admin
موضع یمن پس از حملات آمریکایی هرگز تغییر نکرده است کشتی‌های اسرائیلی همچنان در تیررس	0	86	admin
اولین ماهواره‌های Direct-to-Cell پرتاب شدند؛ اینترنت ماهواره‌ای برای گوشی‌های عادی	0	95	admin
راهنمایی درباره انتخاب رشته آی تی، وضعیت شغلی استخدام در بازار کار	0	80	admin
GTA 6 می‌تواند بزرگترین عرضه تاریخ صنعت بازی را رقم بزند	0	86	admin
با بهترین برنامه های ویندوز 11 آشنا شوید	0	82	admin
تصاویری جالب و دیدنی از اولین ماوس کامپیوتر	0	100	admin
تکذیب حمله سایبری درباره اختلال اخیر اینترنت	0	173	admin
بهترین بازی های اندروید، لیست 158 بازی جدید و نصب آنها	0	268	admin
بهترین ترفند های جالب و مخفی اندروید که باید بدانید و استفاده کنید	0	537	admin
سیستم عامل ویندوز فون چیست ؟	0	694	admin
گزینه های خرید تبلت 4G ساپورت – زیر یک میلیون تومان	0	1259	admin
آشنایی با HyperOS – پلتفرم جدید شیائومی برای یکپارچه کردن دیوایس‌های شرکت	0	1200	admin
ابزار نمایش شعر تصادفی از شاعران برای وبلاگ و سایت	0	910	admin

12 3 4 5 6 7 8 9...95 96 »

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

چهارشنبه 24 اردیبهشت 1399 admin جاوا اسکریپت/ایجکس , 2641 بازدید

در این بخش از سری آموزش جاوا اسکریپت قصد داریم به شما نحوه پیاده سازی 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 بسازید.

<span style="color:#000000;">var request = new XMLHttpRequest();</span>

1	var request = new XMLHttpRequest();

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

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

<span style="color:#000000;">request.open("GET", "info.txt"); -Or- request.open("POST", "add-user.php");</span>

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

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

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

<span style="color:#000000;">request.send(); -Or- request.send(body);</span>

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 در جاوا اسکریپت را نشان می دهد:

<span style="color:#000000;"><!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;
        }
    };
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://netparadis.com/multiple-file-upload-using-fine-uploader/" target="_blank" class="ua8e5cb7880c2740e5cdfec8a9b8f4ac3"><style>.ua8e5cb7880c2740e5cdfec8a9b8f4ac3{padding:0;margin:0;padding-top:1em!important;padding-bottom:1em!important;width:100%;display:block;font-weight:700;background-color:#e6e6e6;border:0!important;border-left:4px solid #E74C3C!important;box-shadow:0 1px 2px rgba(0,0,0,.17);-moz-box-shadow:0 1px 2px rgba(0,0,0,.17);-o-box-shadow:0 1px 2px rgba(0,0,0,.17);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.17);text-decoration:none}.ua8e5cb7880c2740e5cdfec8a9b8f4ac3:active,.ua8e5cb7880c2740e5cdfec8a9b8f4ac3:hover{opacity:1;transition:opacity 250ms;webkit-transition:opacity 250ms;text-decoration:none}.ua8e5cb7880c2740e5cdfec8a9b8f4ac3{transition:background-color 250ms;webkit-transition:background-color 250ms;opacity:.9;transition:opacity 250ms;webkit-transition:opacity 250ms}.ua8e5cb7880c2740e5cdfec8a9b8f4ac3 .ctaText{font-weight:700;color:#7F8C8D;text-decoration:none;font-size:16px}.ua8e5cb7880c2740e5cdfec8a9b8f4ac3 .postTitle{color:#000;text-decoration:underline!important;font-size:16px}.ua8e5cb7880c2740e5cdfec8a9b8f4ac3:hover .postTitle{text-decoration:underline!important}</style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">حتما بخوانید</span>  <span class="postTitle">آپلود چندگانه فایل در php با Fine Uploader</span></div></a></div>
    // 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></span>

<!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 ما به سادگی یک نام کامل از اتصال نام و نام خانوادگی ایجاد و پیام خوش آمد گویی را برگشت می دهد.

<span style="color:#000000;"><?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.";
}
?></span>

<?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 در جاوا اسکریپت نشان می دهد.

<span style="color:#000000;"><!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;
        }
    };
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://netparadis.com/javascript-tutorial-39-json-parsing/" target="_blank" class="ueb91a792a55c00034894ff64cfdbaf7b"><style>.ueb91a792a55c00034894ff64cfdbaf7b{padding:0;margin:0;padding-top:1em!important;padding-bottom:1em!important;width:100%;display:block;font-weight:700;background-color:#e6e6e6;border:0!important;border-left:4px solid #E74C3C!important;box-shadow:0 1px 2px rgba(0,0,0,.17);-moz-box-shadow:0 1px 2px rgba(0,0,0,.17);-o-box-shadow:0 1px 2px rgba(0,0,0,.17);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.17);text-decoration:none}.ueb91a792a55c00034894ff64cfdbaf7b:active,.ueb91a792a55c00034894ff64cfdbaf7b:hover{opacity:1;transition:opacity 250ms;webkit-transition:opacity 250ms;text-decoration:none}.ueb91a792a55c00034894ff64cfdbaf7b{transition:background-color 250ms;webkit-transition:background-color 250ms;opacity:.9;transition:opacity 250ms;webkit-transition:opacity 250ms}.ueb91a792a55c00034894ff64cfdbaf7b .ctaText{font-weight:700;color:#7F8C8D;text-decoration:none;font-size:16px}.ueb91a792a55c00034894ff64cfdbaf7b .postTitle{color:#000;text-decoration:underline!important;font-size:16px}.ueb91a792a55c00034894ff64cfdbaf7b:hover .postTitle{text-decoration:underline!important}</style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">حتما بخوانید</span>  <span class="postTitle">آموزش جاوا اسکریپت – JSON در جاوا اسکریپت</span></div></a></div>    
    // 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></span>

<!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() بصورت زیر مشخص کنید :

<span style="color:#000000;">request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");</span>

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 مقادیر ارسال شده توسط کاربر را در خرورجی برگشت می دهد.

<span style="color:#000000;"><?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>";
}
?></span>

<?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 در جاوا اسکریپت نهایت استفاده را برده باشد.

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

موفق باشید.

تصویر : http://up.gooddl.ir/view/3411556/qqqqqq.jpg