دوره کامل آموزش اصول AJAX [ویدئو]

سرفصل ها و درس ها

تاریخچه AJAX History of AJAX

• ویدیو تبلیغاتی Promotional Video

• بخش مقدمه Section Introduction

• تاریخچه AJAX History of AJAX

• اولین بار "AJAX" ساخته شد The First Time “AJAX” Was Coined

• خلاصه Summary

پروتکل HTTP و نقش AJAX HTTP Protocol and the Role of AJAX

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• سایت های پویا در مقابل استاتیک Dynamic Versus Static Sites

• سایت های پویا در مقابل استاتیک Dynamic Versus Static Sites

• پروتکل HTTP HTTP Protocol

• پروتکل HTTP HTTP Protocol

• URI و پروتکل ها URI and Protocols

• URI و پروتکل ها URI and Protocols

• نحوه قرار دادن داده ها در یک درخواست HTTP - قسمت 1 How to Place Data into an HTTP Request - Part 1

• نحوه قرار دادن داده ها در یک درخواست HTTP - قسمت 1 How to Place Data into an HTTP Request - Part 1

• نحوه قرار دادن داده ها در یک درخواست HTTP - قسمت 2 How to Place Data into an HTTP Request - Part 2

• نحوه قرار دادن داده ها در یک درخواست HTTP - قسمت 2 How to Place Data into an HTTP Request - Part 2

• نحوه قرار دادن داده ها در یک درخواست HTTP - قسمت 3 How to Place Data into an HTTP Request - Part 3

• نحوه قرار دادن داده ها در یک درخواست HTTP - قسمت 3 How to Place Data into an HTTP Request - Part 3

• نحوه قرار دادن داده ها در یک درخواست HTTP - قسمت 4 How to Place Data into an HTTP Request - Part 4

• نحوه قرار دادن داده ها در یک درخواست HTTP - قسمت 4 How to Place Data into an HTTP Request - Part 4

پروتکل HTTP و نقش AJAX HTTP Protocol and the Role of AJAX

HTTP/2 و HTTP/3 چیست What is HTTP/2 and HTTP/3

• HTTP/1.1 - از کجا همه چیز شروع شد HTTP/1.1 - Where It All Began

• HTTP/1.1 - از کجا همه چیز شروع شد HTTP/1.1 - Where It All Began

• HTTP/2 از کجا آمده است؟ Where Did HTTP/2 Come From?

• HTTP/2 از کجا آمده است؟ Where Did HTTP/2 Come From?

• HTTP/2 چیست؟ What is HTTP/2?

• HTTP/2 چیست؟ What is HTTP/2?

• HTTP/2 پرسش و پاسخ HTTP/2 Q&A

• HTTP/2 پرسش و پاسخ HTTP/2 Q&A

HTTP/2 و HTTP/3 چیست What is HTTP/2 and HTTP/3

کد همزمان در مقابل کد ناهمزمان Synchronous Versus Asynchronous Code

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• کد همزمان در مقابل کد ناهمزمان Synchronous Versus Asynchronous Code

• کد همزمان در مقابل کد ناهمزمان Synchronous Versus Asynchronous Code

• مثال های همزمان Synchronous Examples

• مثال های همزمان Synchronous Examples

• مثال های ناهمزمان Asynchronous Examples

• مثال های ناهمزمان Asynchronous Examples

کد همزمان در مقابل کد ناهمزمان Synchronous Versus Asynchronous Code

AJAX - مبانی AJAX – The Basics

• مروری بر فرآیند GET/RESPONSE An overview of the GET / RESPONSE Process

• مروری بر فرآیند GET/RESPONSE An overview of the GET / RESPONSE Process

• AJAX چیست؟ What Is AJAX?

• AJAX چیست؟ What Is AJAX?

• درخواست معمولی در مقابل درخواست AJAX Typical Request Versus AJAX Request

• درخواست معمولی در مقابل درخواست AJAX Typical Request Versus AJAX Request

• خلاصه Summary

• خلاصه Summary

AJAX - مبانی AJAX – The Basics

JSON و XML JSON and XML

• XML چیست و چه تفاوتی با HTML دارد؟ What Is XML and How Does It Differ to HTML?

• XML چیست و چه تفاوتی با HTML دارد؟ What Is XML and How Does It Differ to HTML?

• تجزیه داده های XML با استفاده از روش DOMParser Parsing XML Data Using the DOMParser Method

• تجزیه داده های XML با استفاده از روش DOMParser Parsing XML Data Using the DOMParser Method

• تجزیه داده های XML - اتمام مثال ما Parsing XML Data - Finishing Off Our Example

• تجزیه داده های XML - اتمام مثال ما Parsing XML Data - Finishing Off Our Example

• معرفی JSON و شباهت های جاوا اسکریپت JSON Introduction and Similarities to JavaScript

• معرفی JSON و شباهت های جاوا اسکریپت JSON Introduction and Similarities to JavaScript

• نحوه استفاده از روش JSON How to Use the JSON Method

• نحوه استفاده از روش JSON How to Use the JSON Method

• مثالی از یک شیء JSON و یک شیء XML Example of a JSON Object and XML Object

• مثالی از یک شیء JSON و یک شیء XML Example of a JSON Object and XML Object

• شباهت ها و تفاوت های بین JSON و XML Similarities and Differences Between JSON and XML

• شباهت ها و تفاوت های بین JSON و XML Similarities and Differences Between JSON and XML

• استفاده از XML گاهی راحت‌تر از JSON است XML Is Sometimes Easier to Use than JSON

• استفاده از XML گاهی راحت‌تر از JSON است XML Is Sometimes Easier to Use than JSON

• خلاصه Summary

• خلاصه Summary

JSON و XML JSON and XML

توابع سازنده Constructor Functions

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• اولین نمونه AJAX First AJAX Example

• اولین نمونه AJAX First AJAX Example

• شیء XMLHttpRequest() یک تابع سازنده است The XMLHttpRequest() Object Is a Constructor Function

• شیء XMLHttpRequest() یک تابع سازنده است The XMLHttpRequest() Object Is a Constructor Function

• عملکرد سازنده چیست؟ What Is a Constructor Function?

• عملکرد سازنده چیست؟ What Is a Constructor Function?

• کلمه کلیدی NEW چیست؟ What Is the NEW Keyword?

• کلمه کلیدی NEW چیست؟ What Is the NEW Keyword?

• اگر از کلمه کلیدی جدید استفاده نکنید چه اتفاقی می افتد؟ What Happens If You Don't Use the NEW Keyword?

• اگر از کلمه کلیدی جدید استفاده نکنید چه اتفاقی می افتد؟ What Happens If You Don't Use the NEW Keyword?

• مقدمه ای بر ویژگی new.target Introduction to the new.target Property

• مقدمه ای بر ویژگی new.target Introduction to the new.target Property

• استفاده از ویژگی new.target برای پرتاب خطای سفارشی Using the new.target Property to Throw a Custom Error

• استفاده از ویژگی new.target برای پرتاب خطای سفارشی Using the new.target Property to Throw a Custom Error

• توابع سازنده کمی پیچیده تر هستند Constructor Functions Are a Little More Complex

• توابع سازنده کمی پیچیده تر هستند Constructor Functions Are a Little More Complex

توابع سازنده Constructor Functions

AJAX اصلی – XMLHttpRequest() Original AJAX – XMLHttpRequest()

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• چرا درباره شی XHR بیاموزیم؟ Why Learn about the XHR Object

• چرا درباره شی XHR بیاموزیم؟ Why Learn about the XHR Object

• نحوه تنظیم یک درخواست AJAX How to Set Up an AJAX Request

• نحوه تنظیم یک درخواست AJAX How to Set Up an AJAX Request

• املاک آماده ایالت چیست؟ What Is the readyState Property?

• املاک آماده ایالت چیست؟ What Is the readyState Property?

• با استفاده از ویژگی readyState Using the readyState Property

• با استفاده از ویژگی readyState Using the readyState Property

• Onreadystatechange Event Handler چیست؟ What Is the onreadystatechange Event Handler?

• Onreadystatechange Event Handler چیست؟ What Is the onreadystatechange Event Handler?

• ResponseText Property و خطر گوش ندادن برای readyState 4 responseText Property, and the Danger of not Listening for readyState of 4

• ResponseText Property و خطر گوش ندادن برای readyState 4 responseText Property, and the Danger of not Listening for readyState of 4

• کدهای وضعیت Status Codes

• کدهای وضعیت Status Codes

• بررسی کد وضعیت Checking for Status Code

• بررسی کد وضعیت Checking for Status Code

• جایگزینی onreadystatechange با Onload Event Handler Replacing onreadystatechange with the Onload Event Handler

• جایگزینی onreadystatechange با Onload Event Handler Replacing onreadystatechange with the Onload Event Handler

• ویژگی ResponseType ResponseType Property

• ویژگی ResponseType ResponseType Property

• رویداد یک خطا The onerror Event

• رویداد یک خطا The onerror Event

• رویداد در حال پیشرفت (پیگیری پیشرفت دانلود) The onprogress Event (Tracking Download Progress)

• رویداد در حال پیشرفت (پیگیری پیشرفت دانلود) The onprogress Event (Tracking Download Progress)

• نظارت بر پیشرفت آپلود Monitoring Upload Progress

• نظارت بر پیشرفت آپلود Monitoring Upload Progress

• چالش (گوش دادن برای پیشرفت و بارگذاری رویدادها) - مقدمه Challenge (Listening for Progress and Load Events) - Introduction

• چالش (گوش دادن برای پیشرفت و بارگذاری رویدادها) - مقدمه Challenge (Listening for Progress and Load Events) - Introduction

• چالش (گوش دادن برای پیشرفت و بارگذاری رویدادها) - تنظیم کد ما Challenge (Listening for Progress and Load Events) - Setting Up Our Code

• چالش (گوش دادن برای پیشرفت و بارگذاری رویدادها) - تنظیم کد ما Challenge (Listening for Progress and Load Events) - Setting Up Our Code

• چالش (گوش دادن برای پیشرفت و بارگذاری رویدادها) - پایان دادن به چالش ما Challenge (Listening for Progress and Load Events) - Finishing Off Our Challenge

• چالش (گوش دادن برای پیشرفت و بارگذاری رویدادها) - پایان دادن به چالش ما Challenge (Listening for Progress and Load Events) - Finishing Off Our Challenge

• ارسال درخواست POST Submitting a POST Request

• ارسال درخواست POST Submitting a POST Request

• ایجاد سرور PHP ما و تکمیل درخواست POST ما Creating Our PHP Server and Finishing Off Our POST Request

• ایجاد سرور PHP ما و تکمیل درخواست POST ما Creating Our PHP Server and Finishing Off Our POST Request

AJAX اصلی – XMLHttpRequest() Original AJAX – XMLHttpRequest()

بخش 9: AJAX مدرن - مبانی واکشی Section 9: Modern AJAX – Fetch Basics

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• واکشی مقدمه Fetch Introduction

• واکشی مقدمه Fetch Introduction

• وعده ها چیست؟ What Are Promises?

• وعده ها چیست؟ What Are Promises?

• Fetch Asynchronous است Fetch Is Asynchronous

• Fetch Asynchronous است Fetch Is Asynchronous

• Promises - و استفاده از بیانیه های then () Promises - and Using the then () Statements

• Promises - و استفاده از بیانیه های then () Promises - and Using the then () Statements

• Promises - و استفاده از دستورات catch(). Promises - and Using the catch() Statements

• Promises - و استفاده از دستورات catch(). Promises - and Using the catch() Statements

• Fetch از توابع برگشت به تماس استفاده می کند Fetch Uses Callback Functions

• Fetch از توابع برگشت به تماس استفاده می کند Fetch Uses Callback Functions

• واکشی - زیر سرپوش Fetch - Under the Hood

• واکشی - زیر سرپوش Fetch - Under the Hood

• حلقه رویداد چیست؟ چگونه آن را مشاهده کنم What Is the Event Loop? How I View It

• حلقه رویداد چیست؟ چگونه آن را مشاهده کنم What Is the Event Loop? How I View It

• Fetch Returns a Promise Fetch Returns a Promise

• Fetch Returns a Promise Fetch Returns a Promise

• Fetch دارای نحوی مشابه با jQuery است Fetch Has Similar Syntax to jQuery

• Fetch دارای نحوی مشابه با jQuery است Fetch Has Similar Syntax to jQuery

• یک قدم به عقب برگردید - واکشی خلاصه Take a Step Back - Fetch Summary

• یک قدم به عقب برگردید - واکشی خلاصه Take a Step Back - Fetch Summary

• شی پاسخ چیست؟ What Is the Response Object?

• شی پاسخ چیست؟ What Is the Response Object?

• چگونه با جریان های خواندنی کار می کنید؟ How Do You Work with Readable Streams?

• چگونه با جریان های خواندنی کار می کنید؟ How Do You Work with Readable Streams?

• متد Json() چیست؟ What Is the Json() Method

• متد Json() چیست؟ What Is the Json() Method

• استفاده از متد Json() برای دسترسی به داده های JSON ما Using the Json() Method to Access Our JSON Data

• استفاده از متد Json() برای دسترسی به داده های JSON ما Using the Json() Method to Access Our JSON Data

• واکشی داده های خارجی - مثال کامل Fetching External Data – Complete Example

• واکشی داده های خارجی - مثال کامل Fetching External Data – Complete Example

• مقدمه چالش – XHR در مقابل Fetch در مقابل Async Challenge Introduction – XHR Versus Fetch Versus Async

• مقدمه چالش – XHR در مقابل Fetch در مقابل Async Challenge Introduction – XHR Versus Fetch Versus Async

• چالش - ایجاد درخواست XHR ما Challenge - Building Our XHR Request

• چالش - ایجاد درخواست XHR ما Challenge - Building Our XHR Request

• چالش - ایجاد درخواست واکشی ما Challenge - Building Our Fetch Request

• چالش - ایجاد درخواست واکشی ما Challenge - Building Our Fetch Request

• چالش - نگاهی اجمالی به Async/Await Challenge - A Glimpse into Async/Await

• چالش - نگاهی اجمالی به Async/Await Challenge - A Glimpse into Async/Await

بخش 9: AJAX مدرن - مبانی واکشی Section 9: Modern AJAX – Fetch Basics

AJAX مدرن - جریان Modern AJAX - Streams

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• جریان ها چیست؟ What Are Streams?

• جریان ها چیست؟ What Are Streams?

• خواندن یک جریان (پیشرفته) Reading a Stream (Advanced)

• خواندن یک جریان (پیشرفته) Reading a Stream (Advanced)

• استفاده از روش pipeThrough() برای خواندن تکه ها در زمان واقعی Using the pipeThrough() Method to Read Chunks in Real Time

• استفاده از روش pipeThrough() برای خواندن تکه ها در زمان واقعی Using the pipeThrough() Method to Read Chunks in Real Time

• نوشتن به استریمز Writing to Streams

• نوشتن به استریمز Writing to Streams

• خلاصه Summary

• خلاصه Summary

AJAX مدرن - جریان Modern AJAX - Streams

AJAX مدرن - مفاهیم پیشرفته را واکشی کنید Modern AJAX – Fetch Advanced Concepts

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• واکشی خلاصه Fetch Recap

• واکشی خلاصه Fetch Recap

• با استفاده از متد json() و text() برای دسترسی به داده های ما Using the json() and text() Method to Access Our Data

• با استفاده از متد json() و text() برای دسترسی به داده های ما Using the json() and text() Method to Access Our Data

• مقایسه json() با JSON.parse() Comparing json() to JSON.parse()

• مقایسه json() با JSON.parse() Comparing json() to JSON.parse()

• برای تعریف گزینه های واکشی ما، رابط و رابط سرصفحه ها را درخواست کنید Request Interface and Headers Interface to Define Our Fetch Options

• برای تعریف گزینه های واکشی ما، رابط و رابط سرصفحه ها را درخواست کنید Request Interface and Headers Interface to Define Our Fetch Options

• مقدمه چالش - ایجاد دو درخواست واکشی Challenge Introduction - Building Two Fetch Requests

• مقدمه چالش - ایجاد دو درخواست واکشی Challenge Introduction - Building Two Fetch Requests

• چالش - راه اندازی HTML ما Challenge - Setting Up Our HTML

• چالش - راه اندازی HTML ما Challenge - Setting Up Our HTML

• چالش - استفاده از fetch () برای بازیابی آدرس IP ما Challenge - Using fetch () to Retrieve Our IP Address

• چالش - استفاده از fetch () برای بازیابی آدرس IP ما Challenge - Using fetch () to Retrieve Our IP Address

• چالش - استفاده از fetch () برای بازیابی تصویر ما Challenge - Using fetch () to Retrieve Our Image

• چالش - استفاده از fetch () برای بازیابی تصویر ما Challenge - Using fetch () to Retrieve Our Image

• شیء رابط URL چیست؟ What Is the URL Interface Object?

• شیء رابط URL چیست؟ What Is the URL Interface Object?

• چالش - مدیریت خطا Challenge – Error Handling

• چالش - مدیریت خطا Challenge – Error Handling

• رسیدگی به خطا با Fetch Error Handling with Fetch

• رسیدگی به خطا با Fetch Error Handling with Fetch

• استفاده از OK Property برای پرتاب خطاها Using the OK Property to Throw Errors

• استفاده از OK Property برای پرتاب خطاها Using the OK Property to Throw Errors

• چالش - بهبود کد ما برای گنجاندن مدیریت خطا Challenge - Improving Our Code to Incorporate Error Handling

• چالش - بهبود کد ما برای گنجاندن مدیریت خطا Challenge - Improving Our Code to Incorporate Error Handling

• ارسال درخواست واکشی POST Fetch Request

• ارسال درخواست واکشی POST Fetch Request

AJAX مدرن - مفاهیم پیشرفته را واکشی کنید Modern AJAX – Fetch Advanced Concepts

Async/Await – بهبود کد واکشی () ما Async/Await – Improving Our fetch () Code

• حلقه رویداد - مقدمه Event Loop - Introduction

• حلقه رویداد - مقدمه Event Loop - Introduction

• سرگرمی - وظایف میکرو در مقابل ماکرو با نگاه کردن به کد توضیح داده شده است Having Fun – Micro Versus Macro Tasks Explained by Looking at the Code

• سرگرمی - وظایف میکرو در مقابل ماکرو با نگاه کردن به کد توضیح داده شده است Having Fun – Micro Versus Macro Tasks Explained by Looking at the Code

• ایجاد قول خودمان برای اجرای کد خارج از موضوع اصلی Creating Our Own Promise to Execute Code Off the Main Thread

• ایجاد قول خودمان برای اجرای کد خارج از موضوع اصلی Creating Our Own Promise to Execute Code Off the Main Thread

• Async/Await - مقدمه Async/Await - Introduction

• Async/Await - مقدمه Async/Await - Introduction

• مثال Async - این یک وعده را برمی گرداند Async Example - It Returns a Promise

• مثال Async - این یک وعده را برمی گرداند Async Example - It Returns a Promise

• انتظار - مقدمه Await - Introduction

• انتظار - مقدمه Await - Introduction

• Async and Await (مثال پیشرفته) Async and Await (Advanced Example)

• Async and Await (مثال پیشرفته) Async and Await (Advanced Example)

• Async/Await - نمونه نهایی Async/Await - Final Example

• Async/Await - نمونه نهایی Async/Await - Final Example

• مقدمه چالش - کد ما را با استفاده از Async/Await بهبود دهید Challenge Introduction - Improve Our Code Using Async/Await

• مقدمه چالش - کد ما را با استفاده از Async/Await بهبود دهید Challenge Introduction - Improve Our Code Using Async/Await

• راه حل چالش - ایجاد مجدد تماس واکشی تصویر ما (با استفاده از Async/Await) Challenge Solution - Refactoring Our Image Fetch Call (Using Async/Await)

• راه حل چالش - ایجاد مجدد تماس واکشی تصویر ما (با استفاده از Async/Await) Challenge Solution - Refactoring Our Image Fetch Call (Using Async/Await)

• راه حل چالش - بازسازی تماس واکشی IP ما (با استفاده از Async/Await) Challenge Solution - Refactoring Our IP Fetch Call (Using Async/Await)

• راه حل چالش - تنظیم مجدد تماس واکشی IP ما (با استفاده از Async/Await) Challenge Solution - Refactoring Our IP Fetch Call (Using Async/Await)

• راه حل چالش - مدیریت خطا با بلوک TRY و CATCH Challenge Solution - Error Handling with a TRY and CATCH Block

• راه حل چالش - مدیریت خطا با بلوک TRY و CATCH Challenge Solution - Error Handling with a TRY and CATCH Block

Async/Await – بهبود کد واکشی () ما Async/Await – Improving Our fetch () Code

نتیجه Conclusion

• Outro Outro

• Outro Outro

نتیجه Conclusion