آموزش *جدید* اصول AJAX، به زبان ساده

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

تاریخچه AJAX History of AJAX

• معرفی بخش Section introduction

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

• کمی بیشتر در مورد جاوا (یک مماس) A little more about Java (a tangent)

• اولین بار "AJAX" ساخته شد The first time "AJAX" was coined

• آیا AJAX هنوز هم مربوط به امروز است؟ Is AJAX still relevant today?

• خلاصه Summary

• آزمون تاریخچه AJAX AJAX History Quiz

تاریخچه AJAX History of AJAX

• معرفی بخش Section introduction

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

• کمی بیشتر در مورد جاوا (یک مماس) A little more about Java (a tangent)

• اولین بار "AJAX" ساخته شد The first time "AJAX" was coined

• آیا AJAX هنوز هم مربوط به امروز است؟ Is AJAX still relevant today?

• خلاصه Summary

• آزمون تاریخچه AJAX AJAX History Quiz

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

• معرفی بخش Section introduction

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

• پروتکل HTTP HTTP Protocol

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

• استفاده از پورت ها چیست؟ What are the use of ports?

• نحوه قرار دادن داده ها در یک درخواست 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 - قسمت 3 How to place data into an HTTP request - Part 3

• تصحیح Correction

• نحوه قرار دادن داده ها در یک درخواست HTTP - قسمت 4 How to place data into an HTTP request - Part 4

• پروتکل های HTTP و نقش AJAX HTTP Protocols and the role of AJAX

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

• معرفی بخش Section introduction

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

• پروتکل HTTP HTTP Protocol

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

• استفاده از پورت ها چیست؟ What are the use of ports?

• نحوه قرار دادن داده ها در یک درخواست 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 - قسمت 3 How to place data into an HTTP request - Part 3

• تصحیح Correction

• نحوه قرار دادن داده ها در یک درخواست HTTP - قسمت 4 How to place data into an HTTP request - Part 4

• پروتکل های HTTP و نقش AJAX HTTP Protocols and the role of AJAX

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

• قبل از اینکه شروع کنی Before you begin

• HTTP/1.1 - از جایی که همه چیز شروع شد HTTP/1.1 - where it all began

• HTTP/2 از کجا آمده است؟ Where did HTTP/2 come from?

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

• نظر سریع در مورد HTTP/2 Quick comment on HTTP/2

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

• HTTP/3 - کلمه سریع HTTP/3 - quick word

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

• قبل از اینکه شروع کنی Before you begin

• HTTP/1.1 - از جایی که همه چیز شروع شد HTTP/1.1 - where it all began

• HTTP/2 از کجا آمده است؟ Where did HTTP/2 come from?

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

• نظر سریع در مورد HTTP/2 Quick comment on HTTP/2

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

• HTTP/3 - کلمه سریع HTTP/3 - quick word

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

• معرفی بخش Section introduction

• کد همزمان در مقابل کد ناهمزمان Synchronous vs Asynchronous code

• کلمه سریع در مورد موضوعات و چرا AJAX معرفی شد Quick word on threads and why AJAX was introduced

• نمونه های همزمان Synchronous examples

• نمونه های ناهمزمان Asynchronous examples

• آزمون همزمان در مقابل ناهمزمان Synchronous vs Asynchronous Quiz

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

• معرفی بخش Section introduction

• کد همزمان در مقابل کد ناهمزمان Synchronous vs Asynchronous code

• کلمه سریع در مورد موضوعات و چرا AJAX معرفی شد Quick word on threads and why AJAX was introduced

• نمونه های همزمان Synchronous examples

• نمونه های ناهمزمان Asynchronous examples

• آزمون همزمان در مقابل ناهمزمان Synchronous vs Asynchronous Quiz

AJAX - مبانی AJAX - The Basics

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

• AJAX چیست؟ What is AJAX?

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

• خلاصه Summary

• مبانی AJAX - آزمون AJAX Basics - Quiz

AJAX - مبانی AJAX - The Basics

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

• AJAX چیست؟ What is AJAX?

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

• خلاصه Summary

• مبانی AJAX - آزمون AJAX Basics - Quiz

JSON و XML JSON & XML

• XML چیست و چه تفاوتی با HTML دارد؟ What is XML and how does it differ to HTML?

• تجزیه داده های XML با استفاده از روش DOMParser Parsing XML data using the DOMParser method

• تجزیه داده های XML - اتمام مثال ما Parsing XML data - finishing off our example

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

• JSON و XML JSON and XML

• نحوه استفاده از متد JSON How to use the JSON method

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

• سینتکس JSON Syntax of JSON

• شباهت ها و تفاوت های بین JSON و XML Similarities and differences between JSON and XML

• استفاده از XML گاهی راحت تر از JSON است XML is sometimes easier to use than JSON

• کلمه سریع Quick word

• خلاصه Summary

• آزمون JSON و XML JSON & XML Quiz

JSON و XML JSON & XML

• XML چیست و چه تفاوتی با HTML دارد؟ What is XML and how does it differ to HTML?

• تجزیه داده های XML با استفاده از روش DOMParser Parsing XML data using the DOMParser method

• تجزیه داده های XML - اتمام مثال ما Parsing XML data - finishing off our example

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

• JSON و XML JSON and XML

• نحوه استفاده از متد JSON How to use the JSON method

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

• سینتکس JSON Syntax of JSON

• شباهت ها و تفاوت های بین JSON و XML Similarities and differences between JSON and XML

• استفاده از XML گاهی راحت تر از JSON است XML is sometimes easier to use than JSON

• کلمه سریع Quick word

• خلاصه Summary

• آزمون JSON و XML JSON & XML Quiz

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

• معرفی بخش Section introduction

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

• شی XMLHttpRequest() یک تابع سازنده است The XMLHttpRequest() object is a constructor function

• تابع سازنده چیست؟ What is a constructor function?

• توابع سازنده در مقابل لفظ شی Constructor Functions vs Object Literals

• کلمه کلیدی NEW چیست؟ What is the NEW keyword?

• اگر از کلمه کلیدی NEW استفاده نکنید چه اتفاقی می افتد؟ What happens if you don't use the NEW keyword?

• معرفی ویژگی new.target Introduction to the new.target property

• استفاده از ویژگی new.target برای ایجاد خطای سفارشی Using the new.target property to throw a custom Error

• توابع سازنده کمی پیچیده تر هستند Constructor functions are a little more complex

• آزمون توابع سازنده Constructor Functions Quiz

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

• معرفی بخش Section introduction

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

• شی XMLHttpRequest() یک تابع سازنده است The XMLHttpRequest() object is a constructor function

• تابع سازنده چیست؟ What is a constructor function?

• توابع سازنده در مقابل لفظ شی Constructor Functions vs Object Literals

• کلمه کلیدی NEW چیست؟ What is the NEW keyword?

• اگر از کلمه کلیدی NEW استفاده نکنید چه اتفاقی می افتد؟ What happens if you don't use the NEW keyword?

• معرفی ویژگی new.target Introduction to the new.target property

• استفاده از ویژگی new.target برای ایجاد خطای سفارشی Using the new.target property to throw a custom Error

• توابع سازنده کمی پیچیده تر هستند Constructor functions are a little more complex

• آزمون توابع سازنده Constructor Functions Quiz

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

• معرفی بخش Section intro

• چرا در مورد شی XHR یاد بگیریم؟ Why learn about the XHR object?

• نحوه تنظیم درخواست AJAX How to set up an AJAX request

• ویژگی readyState چیست؟ What is the readyState property

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

• کنترل کننده رویداد onreadystatechange چیست؟ What is the onreadystatechange event handler?

• ویژگی answerText و خطر گوش ندادن به readyState 4 responseText property, and the danger of not listening for readyState of 4

• یک قدم به عقب برو Take a step back

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

• قیاس سریع - وضعیت آماده در مقابل وضعیت Quick Analogy - readyState vs status

• در حال بررسی کد وضعیت Checking for status code

• جایگزینی onreadystatechange با کنترل کننده رویداد onload Replacing onreadystatechange with the onload event handler

• ویژگی ResponseType ResponseType property

• رویداد onerror The onerror event

• رویداد onprogress (پیگیری پیشرفت دانلود) The onprogress event (tracking download progress)

• نظارت بر پیشرفت بارگذاری Monitoring upload progress

• چالش (گوش دادن به پیشرفت و بارگذاری رویدادها) - مقدمه Challenge (listening for progress and load events) - intro

• چالش (گوش دادن به پیشرفت و بارگذاری رویدادها) - تنظیم کد ما Challenge (listening for progress and load events) - setting up our code

• چالش (گوش دادن به پیشرفت و بارگذاری رویدادها) - اتمام چالش ما Challenge (listening for progress and load events) - finishing off our challenge

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

• ایجاد سرور PHP ما و تکمیل درخواست POST ما Creating our PHP server and finishing off our POST request

• آزمون اصلی AJAX - XMLHttpRequest(). Original AJAX - XMLHttpRequest() Quiz

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

• معرفی بخش Section intro

• چرا در مورد شی XHR یاد بگیریم؟ Why learn about the XHR object?

• نحوه تنظیم درخواست AJAX How to set up an AJAX request

• ویژگی readyState چیست؟ What is the readyState property

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

• کنترل کننده رویداد onreadystatechange چیست؟ What is the onreadystatechange event handler?

• ویژگی answerText و خطر گوش ندادن به readyState 4 responseText property, and the danger of not listening for readyState of 4

• یک قدم به عقب برو Take a step back

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

• قیاس سریع - وضعیت آماده در مقابل وضعیت Quick Analogy - readyState vs status

• در حال بررسی کد وضعیت Checking for status code

• جایگزینی onreadystatechange با کنترل کننده رویداد onload Replacing onreadystatechange with the onload event handler

• ویژگی ResponseType ResponseType property

• رویداد onerror The onerror event

• رویداد onprogress (پیگیری پیشرفت دانلود) The onprogress event (tracking download progress)

• نظارت بر پیشرفت بارگذاری Monitoring upload progress

• چالش (گوش دادن به پیشرفت و بارگذاری رویدادها) - مقدمه Challenge (listening for progress and load events) - intro

• چالش (گوش دادن به پیشرفت و بارگذاری رویدادها) - تنظیم کد ما Challenge (listening for progress and load events) - setting up our code

• چالش (گوش دادن به پیشرفت و بارگذاری رویدادها) - اتمام چالش ما Challenge (listening for progress and load events) - finishing off our challenge

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

• ایجاد سرور PHP ما و تکمیل درخواست POST ما Creating our PHP server and finishing off our POST request

• آزمون اصلی AJAX - XMLHttpRequest(). Original AJAX - XMLHttpRequest() Quiz

AJAX مدرن - واکشی مبانی Modern AJAX - Fetch Basics

• معرفی بخش Section introduction

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

• وعده ها چیست؟ What are promises?

• وعده مقادیر بازگشتی را می دهد Promises return values

• واکشی ناهمزمان است Fetch is asynchronous

• Promises - و استفاده از عبارات then(). Promises - and using the then() statements

• کشورهای قول Promise states

• Promises - و استفاده از عبارات catch(). Promises - and using the catch() statements

• کلمه سریع در مورد THEN و CATCH Quick word on THEN and CATCH

• Fetch از توابع پاسخ به تماس استفاده می کند Fetch uses callback functions

• واکشی - زیر کاپوت Fetch - under the hood

• حلقه رویداد چیست؟ چگونه آن را می بینم. What is the event loop? How I view it.

• Fetch یک Promise را برمی گرداند Fetch returns a Promise

• Fetch دارای نحوی مشابه با jQuery است Fetch has similar syntax to jQuery

• یک قدم به عقب برگردید - واکشی خلاصه Take a step back - Fetch summary

• شی Response چیست؟ What is the Response object?

• چگونه با Readable Streams کار می کنید؟ How do you work with Readable Streams?

• متد json() چیست؟ What is the json() method

• با استفاده از متد json() برای دسترسی به داده های JSON خود Using the json() method to access our JSON data

• واکشی داده های خارجی - مثال کامل Fetching external data - complete example

• مقدمه چالش - XHR در مقابل Fetch در مقابل Async Challenge intro - XHR vs Fetch vs Async

• چالش - ایجاد درخواست XHR ما Challenge - building our XHR request

• چالش - ایجاد درخواست واکشی ما Challenge - building our fetch request

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

• Fetch API - Intro Quiz Fetch API - Intro Quiz

AJAX مدرن - واکشی مبانی Modern AJAX - Fetch Basics

• معرفی بخش Section introduction

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

• وعده ها چیست؟ What are promises?

• وعده مقادیر بازگشتی را می دهد Promises return values

• واکشی ناهمزمان است Fetch is asynchronous

• Promises - و استفاده از عبارات then(). Promises - and using the then() statements

• کشورهای قول Promise states

• Promises - و استفاده از عبارات catch(). Promises - and using the catch() statements

• کلمه سریع در مورد THEN و CATCH Quick word on THEN and CATCH

• Fetch از توابع پاسخ به تماس استفاده می کند Fetch uses callback functions

• واکشی - زیر کاپوت Fetch - under the hood

• حلقه رویداد چیست؟ چگونه آن را می بینم. What is the event loop? How I view it.

• Fetch یک Promise را برمی گرداند Fetch returns a Promise

• Fetch دارای نحوی مشابه با jQuery است Fetch has similar syntax to jQuery

• یک قدم به عقب برگردید - واکشی خلاصه Take a step back - Fetch summary

• شی Response چیست؟ What is the Response object?

• چگونه با Readable Streams کار می کنید؟ How do you work with Readable Streams?

• متد json() چیست؟ What is the json() method

• با استفاده از متد json() برای دسترسی به داده های JSON خود Using the json() method to access our JSON data

• واکشی داده های خارجی - مثال کامل Fetching external data - complete example

• مقدمه چالش - XHR در مقابل Fetch در مقابل Async Challenge intro - XHR vs Fetch vs Async

• چالش - ایجاد درخواست XHR ما Challenge - building our XHR request

• چالش - ایجاد درخواست واکشی ما Challenge - building our fetch request

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

• Fetch API - Intro Quiz Fetch API - Intro Quiz

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

• معرفی بخش Section introduction

• جریان ها پیشرفته هستند Streams are advanced

• استریم ها یک تکنیک پیشرفته هستند Streams are an advanced technique

• جریان ها چیست What are streams

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

• بیایید با استفاده از متد pipeThrough () پیشرفته تر شویم Let's get more advanced by using the pipeThrough() method

• استفاده از متد pipeThrough() برای خواندن تکه ها در زمان واقعی Using the pipeThrough() method to read chunks in real time

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

• خلاصه Summary

• آزمون جریان داده Data Streams Quiz

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

• معرفی بخش Section introduction

• جریان ها پیشرفته هستند Streams are advanced

• استریم ها یک تکنیک پیشرفته هستند Streams are an advanced technique

• جریان ها چیست What are streams

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

• بیایید با استفاده از متد pipeThrough () پیشرفته تر شویم Let's get more advanced by using the pipeThrough() method

• استفاده از متد pipeThrough() برای خواندن تکه ها در زمان واقعی Using the pipeThrough() method to read chunks in real time

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

• خلاصه Summary

• آزمون جریان داده Data Streams Quiz

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

• معرفی بخش Section introduction

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

• استفاده از متد json() و text() برای دسترسی به داده های ما Using the json() and text() method to access our data

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

• برای تعریف گزینه های واکشی ما، رابط و رابط سرصفحه را درخواست کنید Request Interface and Headers Interface to define our fetch options

• معرفی چالش - ساخت 2 درخواست واکشی Challenge Intro - building 2 fetch requests

• چالش - راه اندازی HTML ما Challenge - setting up our HTML

• چالش - استفاده از fetch() برای بازیابی آدرس IP ما Challenge - using fetch() to retrieve our IP address

• چالش - استفاده از fetch() برای بازیابی تصویر ما Challenge - using fetch() to retrieve our image

• شیء URL Interface چیست؟ What is the URL Interface object

• چالش - رسیدگی به خطا Challenge - error handling

• خطا در رسیدگی به واکشی Error handling with fetch

• استفاده از ویژگی OK برای پرتاب خطاها Using the OK property to throw errors

• چالش - بهبود کد ما برای ترکیب مدیریت خطا Challenge - improving our code to incorporate error handling

• درخواست واکشی POST POST fetch request

• Fetch API - آزمون پیشرفته Fetch API - Advanced Quiz

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

• معرفی بخش Section introduction

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

• استفاده از متد json() و text() برای دسترسی به داده های ما Using the json() and text() method to access our data

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

• برای تعریف گزینه های واکشی ما، رابط و رابط سرصفحه را درخواست کنید Request Interface and Headers Interface to define our fetch options

• معرفی چالش - ساخت 2 درخواست واکشی Challenge Intro - building 2 fetch requests

• چالش - راه اندازی HTML ما Challenge - setting up our HTML

• چالش - استفاده از fetch() برای بازیابی آدرس IP ما Challenge - using fetch() to retrieve our IP address

• چالش - استفاده از fetch() برای بازیابی تصویر ما Challenge - using fetch() to retrieve our image

• شیء URL Interface چیست؟ What is the URL Interface object

• چالش - رسیدگی به خطا Challenge - error handling

• خطا در رسیدگی به واکشی Error handling with fetch

• استفاده از ویژگی OK برای پرتاب خطاها Using the OK property to throw errors

• چالش - بهبود کد ما برای ترکیب مدیریت خطا Challenge - improving our code to incorporate error handling

• درخواست واکشی POST POST fetch request

• Fetch API - آزمون پیشرفته Fetch API - Advanced Quiz

Async/Await - بهبود کد fetch() ما Async/Await - improving our fetch() code

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

• لذت بردن - وظایف میکرو در مقابل ماکرو با نگاه کردن به کد توضیح داده شده است Having fun - micro vs macro tasks explained by looking at code

• ایجاد قول خودمان برای اجرای کد خارج از موضوع اصلی Creating our own promise to execute code off the main thread

• موضوع اصلی چیست؟ What is the main thread?

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

• مثال Async - یک وعده را برمی گرداند Async example - it returns a promise

• منتظر - مقدمه Await - intro

• Async و Await (نمونه پیشرفته) Async and Await (advanced example)

• Async/Await - نمونه نهایی Async/Await - final example

• مقدمه چالش - کد ما را با استفاده از Async/Await بهبود دهید Challenge intro - improve our code by using Async/Await

• راه حل چالش - بازسازی تماس واکشی تصویر ما (با استفاده از async/wait) Challenge solution - refactoring our Image fetch call (using async/await)

• راه حل چالش - بازسازی تماس واکشی IP ما (با استفاده از async/wait) Challenge solution - refactoring our IP fetch call (using async/await)

• راه حل چالش - مدیریت خطا با بلوک TRY و CATCH Challenge solution - error handling with a TRY and CATCH block

• آزمون Async/Await Async/Await Quiz

Async/Await - بهبود کد fetch() ما Async/Await - improving our fetch() code

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

• لذت بردن - وظایف میکرو در مقابل ماکرو با نگاه کردن به کد توضیح داده شده است Having fun - micro vs macro tasks explained by looking at code

• ایجاد قول خودمان برای اجرای کد خارج از موضوع اصلی Creating our own promise to execute code off the main thread

• موضوع اصلی چیست؟ What is the main thread?

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

• مثال Async - یک وعده را برمی گرداند Async example - it returns a promise

• منتظر - مقدمه Await - intro

• Async و Await (نمونه پیشرفته) Async and Await (advanced example)

• Async/Await - نمونه نهایی Async/Await - final example

• مقدمه چالش - کد ما را با استفاده از Async/Await بهبود دهید Challenge intro - improve our code by using Async/Await

• راه حل چالش - بازسازی تماس واکشی تصویر ما (با استفاده از async/wait) Challenge solution - refactoring our Image fetch call (using async/await)

• راه حل چالش - بازسازی تماس واکشی IP ما (با استفاده از async/wait) Challenge solution - refactoring our IP fetch call (using async/await)

• راه حل چالش - مدیریت خطا با بلوک TRY و CATCH Challenge solution - error handling with a TRY and CATCH block

• آزمون Async/Await Async/Await Quiz

Outro Outro

• Outro Outro

Outro Outro

• Outro Outro