مقدمه‌ای بر AJAX

از ویکی‌کد
(تغییرمسیر از JavaScript:مقدمه ای بر Ajax)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
تعریف شیء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
۱مقدمه
۲ AJAX XMLHttp
۳درخواست AJAX
۴پاسخ سرور
۵مثال‌های XML در AJAX
۶مثال‌های PHP در AJAX
۷مثال‌های ASP در AJAX
۸مثال پایگاه داده در AJAX
۹نرم‌افزارهای XML
۱۰مثال‌های AJAX
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

AJAX یک ابزار رؤیایی برای توسعه دهنده است، زیرا که شما می‌توانید: [۱]

  • داده‌ها را از یک وب سرور بعد از بارگزاری صفحه بخوانید
  • یک صفحه وب را بدون نیاز به بارگذاری مجدد آن، بروز رسانی کنید
  • در پس زمینه، داده‌هایی را به سمت وب سرور ارسال کنید

مثال AJAX

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مشاهدهٔ نتیجه


توضیح مثال 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 درخواستی را به یک وب سرور ارسال می‌کند
۴. وب سرور درخواست را پردازش می کند
۵. سرور نتیجه را به صفحه وب برمی‌گرداند
۶.نتیجه توسط جاوا اسکریپت خوانده می‌شود
۷. عکس العمل (همانند بروز رسانی صفحه) توسط جاوا اسکریپت اجرا می‌شود


منابع آموزشی