آموزش *جدید* AJAX فراتر از اصول

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

خلاصه AJAX AJAX recap

• معرفی Introduction

• آیا می توانید از این بخش رد شوید؟ Can you skip this section?

• نمای کلی AJAX Overview of AJAX

• AJAX چیست و از کجا آمده است؟ What is AJAX and where did it come from?

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

• درخواست سنتی در مقابل درخواست AJAX Traditional request vs AJAX request

• چگونه درخواست AJAX را بنویسید؟ How do you write an AJAX request?

• خلاصه AJAX AJAX recap

پروژه کوتاه Mini-Recap Project

• مقدمه - قرار است چه چیزی بسازیم Introduction - what are we going to build

• راه اندازی HTML Setting up the HTML

• نوشتن CSS Writing the CSS

• XHR AJAX - واکشی متن از سرور ما XHR AJAX - fetching text from our server

• XHR AJAX - بازسازی کد و افزودن HTML به DOM XHR AJAX - refactoring code and adding HTML to the DOM

• XHR AJAX - واکشی JSON از سرور ما XHR AJAX - fetching JSON from our server

• ویژگی answerType The responseType property

• API شخص ثالث Third party API

• XHR AJAX - واکشی JSON از یک API شخص ثالث XHR AJAX - fetching JSON from a third party API

• واکشی AJAX - بازیابی متن از سرور خودمان Fetch AJAX - retrieving text from our own server

• واکشی AJAX - بازیابی JSON از سرور و API شخص ثالث Fetch AJAX - retrieving JSON from our server and third party API

• آزمون اصول AJAX AJAX fundamentals quiz

پروژه Mini-Recap پیشرفته (PHP و Node.js) Advanced Mini-Recap Project (PHP and Node.js)

• معرفی بخش Section intro

• قراره چی بسازیم What are we going to build

• HTML ما را بنویسید Write our HTML

• تنظیم درخواست AJAX ما Setting up our AJAX request

• پارامترهای URL و پرس و جو URL and query parameters

• کلمه سریع Quick word

• نوشتن کد سمت سرور PHP ما Writing our PHP server side code

• نحوه دسترسی به داده های XML بازگردانده شده توسط سرور How to access XML data returned by the server

• بازیابی داده ها از سرور PHP و درج آن در DOM Retrieving data from the PHP server, and inserting it into the DOM

• اتمام مثال سرور PHP ما Finishing off our PHP server example

• راه اندازی Node و ارسال پاسخ Setting up Node and sending a response

• ماژول های گره Node Modules

• خواندن پاسخ متن Node Reading a Node text response

• تفاوت بین xhr.response و xhr.responseText Difference between xhr.response and xhr.responseText

• تکمیل مثال Node ما Completing our Node example

• سمت سرور AJAX Server side AJAX

احراز هویت پایه HTTP با استفاده از AJAX HTTP Basic Authentication using AJAX

• مقدمه ای بر احراز هویت Introduction to authentication

• کلمه سریع در مورد احراز هویت Quick word on authentication

• HTTP Auth اولیه در عمل Basic HTTP Auth in action

• HTTP Basic Auth HTTP Basic Auth

• احراز هویت اولیه چگونه کار می کند و چرا در این دوره در مورد آن صحبت می کنیم How Basic Authentication works and why are we discussing it in this course

• رمزگذاری Base64 در مقابل رمزگذاری Base64 encoding vs encryption

• احراز هویت اولیه در مقایسه با درخواست های HTTP سنتی Basic Authentication compared to traditional HTTP requests

• آپاچی چیست؟ What is Apache

• تعادل درست را ایجاد کنید Strike the right balance

• نحوه راه اندازی سرور آپاچی How to start an Apache server

• راه اندازی سرور آپاچی و فایل htaccess Setting up our Apache server and .htaccess file

• هدف فایل htaccess Purpose of the .htaccess file

• افزودن احراز هویت اولیه در آپاچی Adding Basic Authentication in Apache

• فایل htaccess عملکرد خروج ندارد The .htaccess file does not have logout functionality

• کاربرد فایل htpasswd چیست؟ What is the use of the .htpasswd file?

• قراره چی بسازیم؟ What are we going to build?

• ساخت HTML Building the HTML

• روش preventDefault The preventDefault method

• با استفاده از کلمه کلیدی window.event Using the window.event keyword

• ارسال اطلاعات کاربری با AJAX، با کدگذاری سفارشی base64 Sending user credentials with AJAX, with custom base64 encoding

• نحوه جلوگیری از پاپ آپ مرورگر How to prevent the browser popup

• استفاده از XHR برای احراز هویت اولیه Using XHR for Basic Authentication

• ایجاد یک پیغام خطای سفارشی در آپاچی Creating a custom error message in Apache

• در حال به روز رسانی کد ما به API مدرن Fetch Updating our code to the modern Fetch API

• مثال بعدی استفاده از Node است Next example is using Node

• مثال گره - چه چیزی می خواهیم بسازیم؟ Node example - what are we going to build?

• سرور نود چیست؟ What is a node server

• نحوه نصب Node How to install Node

• نحوه نصب Express How to install Express

• سرور Node خود را راه اندازی می کنیم Setting up our Node server

• نحوه راه اندازی سرور در Node.js How to set up a server in Node.js

• Node کجا به دنبال ماژول ها می گردد؟ Where does Node look for modules?

• بررسی اینکه آیا هدر مجوز وجود دارد یا خیر Checking whether the Authorization header exists

• استخراج اعتبار کاربر با استفاده از Buffer Extract user credentials using Buffer

• هیچ زبان سمت سرور کامل نیست No server side language is perfect

• اتمام مثال Node ما Finishing off our Node example

• تابع ()next یک هدف دوگانه دارد The next() function has a dual purpose

• تابع next() میان افزار را متوقف می کند The next() function stops middleware

• اطلاعات بیشتر در مورد تابع () next More about the next() function

• خطایی پیدا کرد Spotted an error

• احراز هویت پایه - خلاصه بخش Basic Authentication - Section Summary

• بخش بیرونی Section outro

• آزمون احراز هویت Authentication Quiz

اشتراک منبع متقابل (CORS) و سیاست منشاء واحد (SOP) Cross-Origin-Resource-Sharing (CORS) and Single-Origin-Policy (SOP)

• معرفی CORS Intro to CORS

• مقدمه ای بر سیاست همان منبع (SOP) Intro to Same-Origin-Policy (SOP)

• دو نوع درخواست CORS - Simple + Preflight Two types of CORS requests - Simple + Preflight

• روش HEAD چیست What is the HEAD method

• درخواست CORS ساده Simple CORS request

• پیشگفتار در مورد هدف درخواست قبل از پرواز Foreword on the purpose of a preflight request

• کلمه سریع Quick word

• درخواست پیش از پرواز CORS CORS preflight request

• CORS در عمل CORS in action

• تنظیم صحنه برای مثال CORS Setting the scene for a CORS example

• راه اندازی HTML ما Setting up our HTML

• انجام یک درخواست SIMPLE CORS Performing a SIMPLE CORS request

• هدر Access-Control-Allow-Origin وجود ندارد Missing the Access-Control-Allow-Origin header

• حملات CSRF CSRF attacks

• نحوه فعال کردن CORS در یک درخواست SIMPLE How to enable CORS on a SIMPLE request

• افزودن Access-Control-Allow-Origin به سرور ما Adding the Access-Control-Allow-Origin on our server

• چگونه یک درخواست PREFLIGHT CORS را شروع کنیم How to initiate a PREFLIGHT CORS request

• ارسال درخواست PREFLIGHT CORS با تنظیم هدر Content-Type سفارشی Sending a PREFLIGHT CORS request by setting custom Content-Type header

• تنظیم Access-Control-Allow-Headers روی سرور Setting the Access-Control-Allow-Headers on the server

• افزودن احراز هویت اولیه Adding Basic Authentication

• خلاصه CORS CORS Summary

• Outro Outro

• آزمون CORS CORS Quiz

پروژه پایانی دوره - وظیفه 1 - سرور و مسیرها Course Final Project - Task 1 - Server and Routes

• معرفی بخش Section intro

• تعریف نقاط پایانی RESTful API Defining RESTful API endpoints

• ابتدا کد سمت سرور و سپس فقط AJAX می سازیم First we will build server-side code and then only AJAX

• اسنیک پیک Sneak Peak

• استفاده از NPM برای نصب چارچوب Express Using NPM to install the Express framework

• NPM و Node Modules چیست؟ What is NPM and Node Modules

• مشاهده کد منبع Express در پوشه node_modules Viewing the Express source code inside the node_modules folder

• سرور Node خود را راه اندازی می کنیم Setting up our Node server

• تفاوت بین res.send() و res.end() Difference between res.send() vs res.end()

• تعیین مسیرها در سرور ما Defining routes on our server

• تعریف مسیرهای ما در یک فایل جداگانه Defining our routes in a separate file

• صادرات مسیرهای ما از طریق دستور module.exports Exporting our routes via the module.exports command

• ماژول های جاوا اسکریپت (ماژول های ES) در مقابل ماژول های گره (CommonJS) JavaScript Modules (ES Modules) vs Node Modules (CommonJS)

• آزمایش شی روتر ما Testing our Router object

• ایجاد مسیر GET Creating the GET route

• در حال نصب Nodemon Installing Nodemon

• معرفی پستچی Postman introduction

• ایجاد مسیر POST Creating a POST route

• Express.json() در مقابل Express.urlencoded() Express.json() vs Express.urlencoded()

• ایجاد یک تابع ID منحصر به فرد Creating a unique ID function

• ایجاد مسیر PUT - قسمت 1 (با استفاده از روش Find) Creating a PUT route - Part 1 (using the find method)

• متد Array.find() چیست What is the Array.find() method

• ایجاد مسیر PUT - قسمت 2 (با استفاده از روش اسپلایس) Creating a PUT route - Part 2 (using the splice method)

• متد Array.splice() چیست؟ What is the Array.splice() method

• تست مسیرهای ما در پستچی Testing our routes in Postman

• ایجاد مسیر DELETE Creating a DELETE route

• آفرین Well done

• سرور بیرونی Server outro

• آزمون سرور Server quiz

پروژه نهایی دوره - وظیفه 2 - XMLHttpRequest (AJAX API) Course Final Project - Task 2 - XMLHttpRequest (AJAX API)

• معرفی بخش Section intro

• قراره با هم چی بسازیم؟ What are we going to build together?

• به یاد داشته باشید، این آخرین هدف ما نخواهد بود Remember, this is not going to be our final frontend

• نمای کلی HTML و فایل HTML and file overview

• درخواست XHR AJAX GET XHR AJAX GET request

• رفع CORS با نوشتن یک تابع میان‌افزار سفارشی Fixing CORS by writing a custom middleware function

• رفع CORS با نصب ماژول "cors" با NPM Fixing CORS by installing the "cors" module with NPM

• افزودن متن پویا به درخواست GET Adding dynamic text to the GET request

• ایجاد یک کتابخانه/ماژول AJAX Creating an AJAX library / module

• تبدیل درخواست GET ما به یک ماژول Converting our GET request into a module

• مروری بر درخواست GET ما Overview of our GET request

• درخواست XHR AJAX POST XHR AJAX POST request

• بهبود درخواست GET ما (تبدیل تماس AJAX ما به یک تماس همزمان) Improving our GET request (turning our AJAX call into a synchronous one)

• تکمیل درخواست POST با شروع درخواست در فایل app.js Completing the POST request by initiating the request in the app.js file

• به روز رسانی متن پاراگراف POST به صورت پویا Updating the POST paragraph text dynamically

• اضافه کردن برخی از رسیدگی به خطا Adding some error handling

• تکمیل درخواست PUT XHR Completing the PUT XHR request

• تکمیل درخواست DELETE XHR Completing the DELETE XHR request

• خلاصه Summary

• XHR بیرونی XHR outro

• ماژول ها و XHR Modules and XHR

پروژه نهایی دوره - وظیفه 2 - واکشی (AJAX API) Course Final Project - Task 2 - Fetch (AJAX API)

• معرفی بخش Section intro

• دریافت درخواست واکشی - راه اندازی GET fetch request - setup

• با استفاده از یک تابع تماس برای نوشتن درخواست واکشی GET ما Using a callback function to write our GET fetch request

• بعداً درخواست GET را بهبود خواهم داد Later I will improve the GET request

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

• درخواست واکشی قرار دهید PUT fetch request

• درخواست واکشی را حذف کنید DELETE fetch request

• خلاصه - درخواست های AJAX ما با RESTful سازگار است Summary - our AJAX requests are RESTful compliant

• واکشی outro Fetch outro

• واکشی API Fetch API

پروژه نهایی دوره - وظیفه 2 - Axios (AJAX API) Course Final Project - Task 2 - Axios (AJAX API)

• معرفی بخش Section intro

• چالش اصلی - مقدمه ای برای آنچه که می خواهیم با Axios بسازیم Basic challenge - intro to what we are going to build with Axios

• نصب AXIOS Installing AXIOS

• واکشی داده های متنی با AXIOS Fetching text data with AXIOS

• واکشی داده‌های JSON با AXIOS Fetching JSON data with AXIOS

• چرا از Axios استفاده کنیم؟ Why use Axios?

• راه اندازی فایل های پروژه دوره اصلی ما برای Axios Setting up our main course project files for Axios

• دریافت درخواست با استفاده از Axios GET request using Axios

• بررسی شی پاسخ Axios Inspecting the Axios response object

• درخواست POST با استفاده از Axios POST request using Axios

• درخواست PUT با استفاده از Axios PUT request using Axios

• درخواست را با استفاده از Axios حذف کنید DELETE request using Axios

• Axios outro Axios outro

• Axios Axios

پروژه نهایی دوره - وظیفه 3 - پایانه نهایی + AJAX API + مسیرهای سرور Course Final Project - Task 3 - Final Frontend + AJAX APIs + Server Routes

• معرفی بخش Section intro

• شما کار سختی را انجام دادید You've done the hard slog

• قراره چی بسازیم What are we going to build

• HTML - نوار ناوبری و دکمه افزودن سگ HTML - navbar and Add Dog button

• موجودیت های HTML چیست؟ What are HTML Entities

• HTML - اضافه کردن Dog Modal HTML - Add Dog Modal

• HTML - به روز رسانی Dog Modal HTML - Update Dog Modal

• ما به ویژگی های نام نیازی نداریم We don't need the name attributes

• CSS - سرفصل ها و دکمه ها CSS - headings and buttons

• CSS - اضافه کردن مدال سگ CSS - Add Dog modal

• CSS - به روز رسانی مدال سگ CSS - Update Dog modal

• استفاده از جاوا اسکریپت برای بستن مدال ما Using JavaScript to close our modals

• CSS - جداول CSS - tables

• تمام HTML و CSS انجام شده است All the HTML and CSS is done

• درخواست AJAX GET - یک درخواست GET در رویداد DOMContentLoaded انجام دهید AJAX GET request - perform a GET request on the DOMContentLoaded event

• استفاده از جاوا اسکریپت برای اضافه کردن دکمه به روز رسانی و حذف به جدول ما Using JavaScript to add an update and delete button to our table

• درخواست POST POST request

• پاک کردن داده‌های فرم زمانی که کاربر روی «submit» ضربه می‌زند Clearing form data when a user hits 'submit'

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

• با استفاده از متد reset() برای پاک کردن مقادیر فرم Using the reset() method to clear form values

• پر کردن مدال به روز رسانی - قسمت 1 - عبور از DOM برای یافتن شناسه Populating the update modal - Part 1 - Traversing the DOM to find the ID

• یک قدم به عقب برگردید: عبور از DOM Take a step back: traversing the DOM

• پر کردن مدال به روز رسانی - قسمت 2 - استفاده از متد find() برای دریافت سگ ما Populating the update modal - Part 2 - Using the find() method to GET our dog

• پر کردن مدال به روز رسانی - قسمت 3 - پایان Populating the update modal - Part 3 - Finishing

• بهبود کد ما - ویژگی های غیرفعال و classList Improving our code - disabled & classList properties

• درخواست PUT - به روز رسانی یک سگ PUT request - updating a dog

• درخواست حذف - حذف یک سگ DELETE request - removing a dog

• خلاصه - شما راه درازی را پیموده اید Recap - you've come a long way

Outro Outro

• Outro Outro