مقدمه‌ای بر AJAX
پرش به ناوبری
پرش به جستجو
AJAX یک ابزار رؤیایی برای توسعه دهنده است، زیرا که شما می‌توانید: [۱]
- داده‌ها را از یک وب سرور بعد از بارگزاری صفحه بخوانید
- یک صفحه وب را بدون نیاز به بارگذاری مجدد آن، بروز رسانی کنید
- در پس زمینه، داده‌هایی را به سمت وب سرور ارسال کنید
مثال AJAX
ساخت نمونه مثال این بخش در دست اقدام است.
توضیح مثال AJAX
صفحه HTML
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <div id="demo">
6 <h2>Let AJAX change this text</h2>
7 <button type="button" onclick="loadDoc()">Change Content</button>
8 </div>
9
10 </body>
11 </html>
صفحه HTML فوق یک بخش <div> و یک <button> دارد .
بخش <div> برای نمایش اطلاعات از یک سرور استفاده می شود .
<button> (در صورتی که روی آن کلیک شود) یک تابع را فراخوانی میکند.
این تابع داده را از یک وب سرور تقاضا میکند و ان را نمایش می‌دهد:
تابع loadDoc()
1 function loadDoc() {
2 var xhttp = new XMLHttpRequest();
3 xhttp.onreadystatechange = function() {
4 if (this.readyState == 4 && this.status == 200) {
5 document.getElementById("demo").innerHTML = this.responseText;
6 }
7 };
8 xhttp.open("GET", "ajax_info.txt", true);
9 xhttp.send();
10 }
AJAX چیست؟
AJAX (سرواژهٔ: Asynchronous JavaScript And XML) است.
AJAX یک زبان برنامه‌نویسی نیست.
AJAX از ترکیب موارد زیر استفاده میکند:
- شیء (به انگلیسی: object) پیشفرض مرورگر با نام
XMLHttpRequest(برای درخواست اطلاعات از یک وب سرور)
- جاوا اسکریپت و HTML DOM (برای نمایش یا استفاده از داده‌ها)
AJAX یک نام گمراه کننده است. نرم‌افزارهای AJAX می‌بایست از XML برای جابه‌جایی داده استفاده کنند، اما بسیار رایج است که داده‌ها را به صورت متن plain (به فارسی: ساده) یا به صورت متن JSON جابه‌جا می‌کنند.
AJAX به صفحات وب این اجازه را می‌دهد که باتبادل داده‌ها با یک وب سرور در پس زمینه، به صورت غیرهمزمان بروز رسانی شوند. این بدان معناست که می‌توان بخشی از یک صفحه وب را بدون بارگذاری مجدد کل صفحه وب، بروز رسانی کرد.
AJAX چطور کار میکند؟
| ۱. یک رویداد در یک صفحه وب رخ می‌دهد (صفحه بارگذاری می‌شود، روی یک دکمه کلیک می‌شود) |
| ۲. XMLHttpRequest توسط جاوا اسکریپت ساخته می‌شود |
| ۳.شیء XMLHttpRequest درخواستی را به یک وب سرور ارسال میکند |
| ۴. وب سرور درخواست را پردازش می کند |
| ۵. سرور نتیجه را به صفحه وب برمی‌گرداند |
| ۶.نتیجه توسط جاوا اسکریپت خوانده می‌شود |
| ۷. عکس العمل (همانند بروز رسانی صفحه) توسط جاوا اسکریپت اجرا می‌شود |
منابع آموزشی