از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
در چشم انداز کنونی توسعه وب، AJAX ستون فقرات برنامه های کاربردی وب مدرن است که به ما امکان می دهد بدون نیاز به نیاز به تبادل یکپارچه داده ها بین مشتری و سرور. page بارگذاری مجدد در حالی که کتابخانه‌هایی مانند jQuery انجام تماس‌های AJAX را ساده‌تر کرده‌اند، هنوز مهم است که بدانیم چگونه می‌توان بدون تکیه تماس‌های AJAX برقرار کرد. روی این کتابخانه ها
این بایت شما را راهنمایی می کند process برقراری تماس AJAX با استفاده از جاوا اسکریپت خالص.
آشنایی با AJAX
AJAX یک تکنیک توسعه وب است که به وب اجازه می دهد page برای برقراری ارتباط با یک سرور، به روز رسانی محتوای آن، و انجام این کار بدون ایجاد اختلال کامل page بارگذاری مجدد این کار با جاوا اسکریپت و XML انجام می شود (اگرچه این روزها از JSON بیشتر استفاده می شود) برای ارسال و دریافت داده ها.
جادوی واقعی زمانی اتفاق می افتد که جاوا اسکریپت و شی XMLHttpRequest برای مبادله داده ها به صورت ناهمزمان با یک سرور استفاده می شود. این جایی است که ‘A’ در AJAX از آن می آید – Asynchronous. این بدان معناست که امکان ارسال و بازیابی داده ها به یک سرور در پس زمینه وجود دارد که به کاربر اجازه می دهد با page به طور معمول در حالی که درخواست AJAX در حال پردازش است.
روش برقراری تماس AJAX بدون جی کوئری
برای برقراری تماس AJAX بدون jQuery، از XMLHttpRequest شیء، یک شیء داخلی مرورگر است که به ما امکان می دهد درخواست های HTTP را به منابع خارجی ارسال کنیم. این شیء کلیدی است که به AJAX قدرت می دهد، زیرا امکان تبادل ناهمزمان داده ها بین مشتری و سرور را فراهم می کند. بیایید کمی عمیق تر به چگونگی این شیرجه بزنیم XMLHttpRequest شی کار می کند
بررسی اجمالی
XMLHttpRequest یک شی مرورگر داخلی است که می تواند برای درخواست HTTP در جاوا اسکریپت برای تبادل داده بین مرورگر وب و سرور استفاده شود. با وجود نام، XMLHttpRequest می توان برای بازیابی استفاده کرد هر نوع داده، نه فقط XML. با کمال تعجب، XMLHttpRequest در ابتدا قرار بود از پروتکل هایی غیر از HTTP (شامل فایل و ftp) پشتیبانی کند، با این حال، اکثر مرورگرهای اصلی در واقع از آن پشتیبانی نمی کنند.
را XMLHttpRequest شی به این صورت کار می کند که ابتدا یک نمونه از شی ایجاد می کند، یک درخواست تنظیم می کند و سپس درخواست را ارسال می کند. پس از ارسال درخواست، تابعی برای مدیریت داده های پاسخ از سرور تعریف می شود.
در اینجا یک مرور کلی از آنچه که یک تماس AJAX با آن انجام می شود، آورده شده است XMLHttpRequest ممکن است به نظر برسد:
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200)
console.log(xhr.responseText);
}
xhr.send();
در بخش‌های بعدی، هر یک از این مراحل را بررسی می‌کنیم تا روش عملکرد آن‌ها را به تفصیل درک کنیم.
ایجاد یک نمونه از XMLHttpRequest
اولین قدم در برقراری تماس AJAX بدون جی کوئری، ایجاد یک نمونه از آن است XMLHttpRequest هدف – شی. این شی روش هایی را برای انتقال داده ها بین مشتری و سرور ارائه می دهد.
let xhr = new XMLHttpRequest();
تنظیم درخواست
هنگامی که ما یک نمونه از XMLHttpRequest، مرحله بعدی تنظیم درخواست ما است. این کار با استفاده از open() متد، که سه پارامتر را می گیرد: نوع درخواست (GET، POST، و غیره)، آدرس اینترنتی که درخواست به آن ارسال می شود، و اینکه آیا درخواست باید به صورت ناهمزمان انجام شود یا خیر.
xhr.open('GET', 'https://api.example.com/data', true);
در اینجا، ما یک درخواست GET برای “https://api.example.com/dataبه صورت ناهمزمان پارامتر سوم روی تنظیم شده است true تا درخواست ناهمزمان شود. اگر آن را تنظیم کنید false، درخواست همزمان خواهد بود و اجرای جاوا اسکریپت تا زمانی که سرور پاسخ دهد متوقف می شود.
رسیدگی به پاسخ
قبل از اینکه درخواست واقعا ارسال شود، باید بگوییم XMLHttpRequest روش رسیدگی به پاسخ سرور این کار با استفاده از onreadystatechange شنونده رویداد، که هر بار فعال می شود readyState دارایی از XMLHttpRequest شی تغییر می کند
را readyState دارایی دارای وضعیت XMLHttpRequest. چه زمانی readyState 4 است، یعنی درخواست کامل شده و پاسخ آماده است.
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
در این کد، ما در حال بررسی این هستیم که آیا readyState 4 است و status 200 است. اگر هر دو شرط درست باشد، متن پاسخ را وارد می کنیم console.
را status ویژگی شماره وضعیت یک درخواست را برمی گرداند. 200 به معنی “خوب” است. سایر کدهای وضعیت رایج عبارتند از 404 (“یافت نشد”) و 500 (“خطای سرور”).
ارسال درخواست
اکنون که درخواست ما کاملاً تنظیم شده است، در نهایت می توانیم با استفاده از آن ارسال کنیم send() روش:
xhr.send();
این خط کد درخواست را به سرور ارسال می کند. اگر درخواست POST می کنید، داده های خود را به عنوان پارامتر به آن ارسال می کنید send() روش.
مدیریت خطا در AJAX بدون jQuery
مانند هر کار برنامه نویسی (مخصوصاً درخواست های شبکه)، خطاها می توانند و رخ خواهند داد. شما باید این خطاها را مدیریت کنید تا از مشکلاتی با برنامه خود جلوگیری کنید و آن را کاربر پسند نگه دارید. در مورد AJAX، ما می توانیم با استفاده از خطاها را کنترل کنیم onerror مدیریت رویداد از XMLHttpRequest هدف – شی.
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.github.com/users/rasanegar', true);
xhr.onerror = function() {
console.log('Request Error...');
}
xhr.send();
در کد بالا، تابعی را به onerror کنترل کننده رویداد اگر در درخواست AJAX خطایی رخ دهد این تابع فراخوانی می شود. در این مورد، ما به سادگی یک پیام را وارد می کنیم console، اما در یک برنامه دنیای واقعی، می توانید آن را به چند روش مختلف مدیریت کنید:
- کاربر را از خطا مطلع کنید
- دوباره درخواست را امتحان کنید
- بی صدا شکست بخور
البته راه های بسیار دیگری نیز برای رسیدگی به این خطاها وجود دارد، اما مواردی که در بالا ذکر شد تنها چند مورد هستند.
توجه داشته باشید: را onerror کنترل کننده رویداد برای خطاهای HTTP مانند وضعیت 404 یا 500 فعال نمی شود. این فقط برای خطاهای سطح شبکه فعال می شود، مانند مسدود شدن درخواست توسط خط مشی CORS یا قطع شدن اتصال اینترنت توسط کاربر.
برای رسیدگی به خطاهای HTTP، می توانید کد وضعیت پاسخ را در قسمت بررسی کنید onload کنترل کننده رویداد، مانند:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.github.com/users/rasanegar', true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 400) {
// Success!
console.log(xhr.responseText);
} else {
// We reached our target server, but it returned an error
console.log('Server Error!');
}
};
xhr.onerror = function() {
// There was a connection error of some sort
console.log('Connection Error!');
};
xhr.send();
در این قطعه، ما بررسی می کنیم که آیا کد وضعیت پاسخ در محدوده 200-399 است که نشان دهنده پاسخ های HTTP موفق است. اگر در این محدوده نباشد، یک پیام خطای سرور ثبت می کنیم.
نتیجه
و بس! در این بایت ما با درک چیستی AJAX شروع کردیم، سپس به جزئیات در مورد آن پرداختیم XMLHttpRequest شی، و روش ایجاد یک نمونه از آن. ما همچنین راه اندازی، ارسال و رسیدگی به پاسخ درخواست AJAX را پوشش دادیم. و در نهایت، ما یاد گرفتیم که چگونه خطاهایی را که ممکن است در طول دوره رخ دهد، مدیریت کنیم process.
در حالی که کتابخانه‌هایی مانند jQuery می‌توانند تماس‌های AJAX را آسان‌تر کنند، مهم است بدانید که چگونه بدون اتکا این کار را انجام دهید. روی کتابخانه های خارجی این نه تنها به شما کمک می‌کند تا بفهمید کارها در زیر کاپوت چگونه کار می‌کنند، بلکه شما را با دانش برای رسیدگی به موقعیت‌هایی که استفاده از کتابخانه ممکن است بهترین گزینه نباشد، مجهز می‌کند.
منتشر شده در 1403-01-31 21:36:06
