مقدمة
هناك العديد من الخيارات لطرق مختلفة لاستدعاء Ajax في JavaScript والتي يمكن أن تحسن بشكل كبير تجارب المستخدم، مثل إرسال البيانات إلى الخادم، والتحقق من أسماء المستخدمين، وإنشاء نماذج الإكمال التلقائي، والتصويت والتقييمات، وإنشاء غرف الدردشة، وما إلى ذلك.
تتناول هذه المقالة معلومات حول أحدث قائمة بالخيارات المختلفة لإجراء استدعاءات AJAX. ولتبسيط الأمر، دعونا نركز على ماهية هذه الخيارات، مع العلم أن لكل خيار مزايا وعيوب.
1. XHR
XMLHttpRequest هو كائن (مكوّن أصلي في معظم المتصفحات الأخرى، وكائن ActiveX في متصفح Microsoft Internet Explorer) يسمح لصفحة الويب بإرسال طلب إلى الخادم واستلام رد دون إعادة تحميل الصفحة بالكامل. يستمر المستخدم في تصفح نفس الصفحة كما لو لم يتم إعادة تحميلها، والأهم من ذلك، أنه لا يرى أو يلاحظ عملية المعالجة - أي أنه، على الأقل افتراضيًا، لا يرى تحميل صفحة جديدة.
يسمح استخدام كائن 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. جلب واجهة برمجة التطبيقات
تُعدّ واجهة برمجة تطبيقات Fetch بديلاً جديداً لـ XMLHttpRequest لاسترجاع الموارد من الخادم. وعلى عكس XMLHttpRequest، تتميز Fetch بمجموعة ميزات أقوى وأسماء أكثر دلالة. كما أنها مرنة وسهلة الاستخدام بفضل تركيبها وبنيتها. لكن ما يُميّزها عن مكتبات AJAX HTTP الأخرى هو دعمها من قِبل جميع متصفحات الويب الحديثة. تتبع Fetch نهج الطلب والاستجابة، حيث تُرسل طلباً وتُعيد وعداً يُحلّ إلى كائن استجابة.
فوائد استخدام واجهة برمجة تطبيقات Fetch
- إنه مرن وسهل الاستخدام.
- يتم تجنب مشكلة معاودة الاتصال عن طريق الوعود
- مدعوم من قبل جميع المتصفحات الحديثة
- يتبع أسلوب الطلب والاستجابة
عيوب استخدام واجهة برمجة تطبيقات Fetch
- لا يتم إرسال ملفات تعريف الارتباط بشكل افتراضي.
- يتم تعطيل CORS بشكل افتراضي.
إجراء طلب GET في واجهة برمجة تطبيقات Fetch
fetch('https://www.yourdomain.com', {
method: 'get'
})
.then(response => response.json())
.then(jsonData => console.log(jsonData))
.catch(err => {
//error block
}إرسال طلب POST في واجهة برمجة تطبيقات Fetch
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 ومطوريها يعملون كفريق واحد لضمان تطبيق jQuery بسرعة وفعالية، مما يوفر لك المال.
- يعني البرمجيات مفتوحة المصدر نموًا سريعًا وحرية للمطورين لتقديم أفضل خدمة ممكنة دون بيروقراطية.
عيوب استخدام jQuery
- كما أن التحديثات المتكررة تعني أنه من غير المرجح أن يقدم أعضاء المجتمع حلولاً.
- تتوفر الآن العديد من الإصدارات المختلفة من jQuery، وبعضها أقل توافقًا من غيرها.
- في بعض الحالات، يكون jQuery أبطأ من CSS. وعندها تصبح بساطته عيباً لأنه غير مصمم للتفاعلات من جانب العميل.
إجراء طلب GET في jQuery
$.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 أحد عملاء HTTP العديدة القائمة على الوعود، والتي تعمل في كلٍّ من المتصفح وبيئة Node.js. وهو يوفر واجهة برمجة تطبيقات واحدة للتعامل مع XMLHttpRequest وواجهة HTTP الخاصة بـ Node.js. إضافةً إلى ذلك، يربط الطلبات باستخدام مكتبة polyfill لصيغة ES6 الجديدة.
فوائد استخدام أكسيوس
- وعد بدعم فوري
- دعم من جانب العميل للحماية من هجمات XSRF
- يمكن تسجيل الطلبات أو الردود قبل تنفيذها.
- تحويل تلقائي لبيانات JSON
- يدعم واجهة برمجة تطبيقات Promise
- يمكن تعديل الطلب أو إلغاؤه
- يمكن تعديل وقت الاستجابة
- يعمل على كل من Node.js والمتصفح
إجراء طلب 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 المتاحة.
بناء الجملة
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 مكتبة AJAX خفيفة الوزن ومتقدمة، تركز بشكل أساسي على سهولة القراءة والمرونة. على عكس المكتبات الأخرى المتاحة، تتميز SuperAgent بسهولة تعلمها. تحتوي SuperAgent على كائن طلب يقبل طرقًا مثل GET وPOST وPUT وDELETE وHEAD.
مزايا سوبر إيجنت
- يحتوي على بيئة ونظام بيئي قائم على الإضافات حيث يمكن بناء وتطوير الإضافات لوظائف إضافية أو إضافية.
- قابل للتعديل بسهولة
- واجهة رائعة لطلبات HTTP.
- وظائف ربط متعددة لإرسال الطلبات.
- ينبغي أن يدعم البرنامج تقدم عمليات التحميل والتنزيل.
- يدعم تشفير النقل المجزأ.
- يتم دعم المكالمات القديمة.
- تتوفر العديد من الإضافات للعديد من الميزات الشائعة.
أرسل طلب GET
request
.get('/user')
.query({ id: 1 })
.then(res => {
});أرسل طلب نشر
request.post('/user')
.set('Content-Type', 'application/json')
.send('{"name":"Ipseeta","id":1}')
.then(callback)
.catch(errorCallback)نتيجة
يعتمد الاختيار على مشروعك وحجمه والجمهور المستهدف ومدى انتشاره. لا يوجد خيار صحيح أو خاطئ. قد لا يُجاب على هذا السؤال إذا اخترت المكتبة الخاطئة للمتطلبات الخاطئة. اختر الأداة المناسبة للمهمة.
