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