مقدمه
گزینه های زیادی به روش های مختلف برای فراخوانی Ajax در جاوا اسکریپت وجود دارد که می تواند تجربیات کاربر را به شدت بهبود بخشد، مانند ارسال داده ها به سرور، بررسی نام کاربری، ایجاد فرم تکمیل خودکار، رای دادن و رتبه بندی، ایجاد اتاق های گفتگو و غیره.
این مقاله اطلاعات مربوط به آخرین لیست گزینه های مختلف برای برقراری تماس های AJAX را پوشش می دهد. برای ساده نگه داشتن آن، بیایید روی آنچه هستند تمرکز کنیم، برخی از جوانب مثبت و منفی هر گزینه وجود دارد.
1. XHR
XMLHttpRequest یک شی (یک جزء بومی در اکثر مرورگرهای دیگر، یک شی اکتیو ایکس در مایکروسافت اینترنت اکسپلورر) است که به یک صفحه وب اجازه می‌دهد تا سرور درخواست کند و بدون بارگیری مجدد کل صفحه، پاسخ دریافت کند. کاربر در همان صفحه‌ای که صفحه بارگیری مجدد نشده است ادامه می‌دهد و مهمتر از آن، پردازش را نمی‌بیند یا متوجه نمی‌شود – یعنی حداقل به‌طور پیش‌فرض، بارگذاری صفحه جدیدی را نمی‌بیند.
استفاده از شی XMLHttpRequest این امکان را برای توسعه‌دهنده فراهم می‌کند تا صفحه‌ای را که قبلاً در مرورگر بارگذاری شده است با داده‌های سرور تغییر دهد، بدون اینکه نیازی به درخواست مجدد صفحه کامل از سرور باشد.
انجام درخواست GET با استفاده از XHR
const Http = new XMLHttpRequest();
const url='http://yourdomain.com/';
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText)
}انجام درخواست ارسال با استفاده از XHR
var xhr = new XMLHttpRequest();
xhr.open("POST", '/submit', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// Request finished. Do processing here.
}
}
xhr.send("name=Ketan&id=1");2. واکشی API
Fetch API انتخاب جدیدی برای XMLHttpRequest برای دریافت منابع از سرور است. برخلاف XMLHttpRequest، مجموعه ای از ویژگی های قدرتمندتر و نام معنادارتری دارد. Fetch همچنین به دلیل نحو و ساختار آن انعطاف پذیر و آسان برای استفاده است. با این حال، چیزی که آن را از سایر کتابخانه های AJAX HTTP متمایز می کند این است که توسط تمام مرورگرهای وب مدرن پشتیبانی می شود. Fetch از یک رویکرد درخواست-پاسخ پیروی می کند که در آن Fetch یک درخواست می کند و قولی را برمی گرداند که به شی Response حل می شود.
مزایای استفاده از Fetch API
- این انعطاف پذیر و آسان برای استفاده است
- جهنم برگشت به تماس توسط Promises اجتناب می شود
- توسط تمام مرورگرهای مدرن پشتیبانی می شود
- از رویکرد درخواست-پاسخ پیروی می کند
معایب استفاده از Fetch API
- به طور پیش فرض کوکی ها را ارسال نمی کند
- CORS به طور پیش فرض غیرفعال است
انجام درخواست GET در Fetch API
fetch('https://www.yourdomain.com', {
method: 'get'
})
.then(response => response.json())
.then(jsonData => console.log(jsonData))
.catch(err => {
//error block
}انجام درخواست POST در Fetch API
var url = 'https://www.yourdomain.com/updateProfile';
var data = {username: 'courseya'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));3. جی کوئری
jQuery یک زبان برنامه نویسی سمت کلاینت است که می توانید از آن برای ایجاد برنامه های کاربردی وب جالب و شگفت انگیز استفاده کنید. این برنامه رایگان، در عین حال قدرتمند، نسبتاً آسان برای راه اندازی و یادگیری است، و دارای چندین افزونه و افزونه برای انجام هر کاری است که می توانید تصور کنید یا فکر کنید. می‌توانید سریع شروع کنید و بعداً وقتی واقعاً در آن مهارت پیدا کردید، از آن پیشی نخواهید گرفت.
مزایای استفاده از Jquery
- بزرگترین مزیت jQuery سادگی آن است.
- همچنین فوق العاده انعطاف پذیر است زیرا jQuery به کاربران اجازه می دهد تا افزونه ها را اضافه کنند.
- همچنین راه حلی بسیار سریع برای مشکلات شماست. در حالی که ممکن است راه‌حل‌های «بهتر» وجود داشته باشد، جی کوئری و توسعه‌دهنده‌اش کار تیمی می‌کنند تا مطمئن شوند که می‌توانید jQuery را سریع و مؤثر پیاده‌سازی کنید، که باعث صرفه‌جویی در هزینه می‌شود.
- نرم افزار منبع باز به معنای رشد سریع و آزادی توسعه دهندگان برای ارائه بهترین خدمات ممکن بدون تشریفات اداری است.
معایب استفاده از جی کوئری
- همچنین، به‌روزرسانی‌های مکرر به این معناست که اعضای انجمن نیز بعید به نظر می‌رسد که راه‌حل‌هایی ارائه دهند.
- همچنین انواع مختلفی از jQuery در حال حاضر موجود است و برخی از آنها نسبت به بقیه سازگاری کمتری دارند.
- گاهی اوقات جی کوئری در برخی موارد در مقایسه با CSS کندتر است. در آن زمان سادگی آن به یک نفرین تبدیل می شود، زیرا برای تعاملات سمت مشتری نیست.
انجام درخواست GET در جی کوئری
$.ajax({
url: '/users',
type: "GET",
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});انجام درخواست POST در Jquery
$.ajax({
url: '/users',
type: "POST",
data: {
name: "Ipseeta",
id: 1
},
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});4. Axios
Axios یکی از بسیاری از سرویس گیرندگان HTTP مبتنی بر وعده است که هم در مرورگر و هم در محیط node.js کار می کند. اساساً یک API واحد برای مقابله با XMLHttpRequest و رابط HTTP گره ارائه می دهد. جدای از آن، درخواست ها را با استفاده از یک polyfill برای دستور ES6 new’s syntax متصل می کند.
مزایای استفاده از Axios
- پشتیبانی خارج از جعبه Promise
- پشتیبانی از سمت مشتری برای محافظت در برابر XSRF
- می‌تواند درخواست‌ها یا پاسخ‌ها را قبل از انجام آنها ثبت کند.
- تبدیل خودکار برای داده های JSON
- از Promise API پشتیبانی می کند
- می تواند یک درخواست را تنظیم یا لغو کند
- می تواند زمان پاسخ را تنظیم کند
- هم روی Nodejs و هم بر روی مرورگر کار می کند
انجام درخواست GET در Axios
axios.get('/get-user', {
params: {
ID: 1
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});انجام درخواست POST در Axios
axios.post('/user', {
name: 'Sanjeev',
id: 1
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});5. درخواست
کتابخانه Request یکی از ساده ترین راه ها برای برقراری تماس های HTTP است. ساختار و نحو بسیار شبیه به نحوه رسیدگی به درخواست ها در Node.js است. در حال حاضر، این پروژه دارای 18 هزار ستاره در GitHub است و به دلیل اینکه یکی از کتابخانه های HTTP محبوب موجود است، شایسته ذکر است.
Syntax
var request = require('request');
request('http://www.yourdomain.com', function (error, response, body) {
console.log('error:', error);
console.log('statusCode:', response && response.statusCode);
console.log('body:', body);
});6. SuperAgent
SuperAgent یک کتابخانه سبک وزن و پیشرفته AJAX است که بیشتر بر خوانایی و انعطاف‌پذیری تمرکز دارد. SuperAgent بر خلاف سایر کتابخانه های موجود، از منحنی یادگیری ملایمی برخوردار است. SuperAgent یک شی درخواست دارد که متدهایی مانند GET، POST، PUT، DELETE و HEAD را می پذیرد.
مزایای SuperAgent
- این دارای یک محیط و اکوسیستم مبتنی بر پلاگین است که در آن می‌توان افزونه‌ها را برای عملکردهای اضافی یا اضافی ساخته و توسعه داد.
- به راحتی قابل تنظیم
- رابط کاربری خوب برای درخواست HTTP.
- چندین عملکرد زنجیره ای برای ارسال درخواست ها.
- باید از پیشرفت آپلود و دانلود پشتیبانی کند.
- دارای پشتیبانی از رمزگذاری انتقال تکه تکه شده است.
- تماس های به سبک قدیمی پشتیبانی می شوند
- پلاگین های متعددی برای بسیاری از ویژگی های رایج موجود است
انجام درخواست get
request
.get('/user')
.query({ id: 1 })
.then(res => {
});انجام درخواست post
request.post('/user')
.set('Content-Type', 'application/json')
.send('{"name":"Ipseeta","id":1}')
.then(callback)
.catch(errorCallback)نتیجه
انتخاب به پروژه شما، مقیاس آن، و مخاطب هدف و پذیرفته شده آن بستگی دارد یا متفاوت است. هیچ انتخابی نه درست است و نه نادرست. اگر کتابخانه اشتباهی را برای الزامات اشتباه انتخاب کنید، ممکن است به این سوال پاسخ داده شود. ابزار مناسب برای کار را انتخاب کنید.
