XMLHTTPrequest هي واجهة متصفح تمكن JavaScript من إجراء اتصالات HTTP (S).
في البداية ، قدمت Microsoft هذه الواجهة في IE 5. نظرًا لأنها مفيدة للغاية ، فقد تم تقليد المتصفحات الأخرى ونشرها ، لذلك ولدت عمليات Ajax.
ومع ذلك ، لم يتم توحيد هذه الواجهة ، وتنفيذ كل متصفح يختلف إلى حد ما. بعد تشكيل مفهوم HTML 5 ، بدأت W3C في التفكير في توحيد هذه الواجهة. في فبراير 2008 ، تم اقتراح مسودة XMLHTTPrequest المستوى 2.
يقترح هذا الإصدار الجديد من XMLHTTPrequest العديد من الميزات الجديدة المفيدة التي ستعزز ابتكار الإنترنت بشكل كبير. يقدم هذا المقال هذا الإصدار الجديد بالتفصيل.
1. الإصدار القديم من كائن XMLHTTPREQUEST
قبل تقديم الإصدار الجديد ، دعنا نراجع استخدام الإصدار القديم.
أولاً ، قم بإنشاء مثيل جديد لـ XMLHTTPrequest.
var xhr = new xmlhttprequest () ؛
ثم ، يتم إصدار طلب HTTP للمضيف البعيد.
نسخة الكود كما يلي:
XHR.Open ('get' ، 'example.php') ؛
xhr.send () ؛
ثم ، انتظر حتى يستجيب المضيف البعيد. في هذا الوقت ، تحتاج إلى مراقبة تغييرات حالة كائن XMLHTTPrequest وتحديد وظيفة رد الاتصال.
XHR.OnReadyStateChange = function () {if (xhr.readyState == 4 && xhr.status == 200) {Alert (xhr.responsetext) ؛ } آخر {Alert (xhr.Statustext) ؛ }} ؛يحتوي الرمز أعلاه على الخصائص الرئيسية للإصدار القديم من كائن XMLHTTPrequest:
نسخة الكود كما يلي:
* XHR.ReadyState: حالة كائن XMLHTTPREQUEST ، يساوي 4 يعني أن البيانات قد تم استلامها.
* XHR.Status: رمز الحالة الذي يتم إرجاعه بواسطة الخادم ، يساوي 200 يعني أن كل شيء طبيعي.
* XHR.Responsetext: البيانات النصية التي يتم إرجاعها بواسطة الخادم
* XHR.Responsexml: بيانات تنسيق XML التي تم إرجاعها بواسطة الخادم
* XHR.Statustext: نص الحالة الذي تم إرجاعه بواسطة الخادم.
2. عيوب الإصدار القديم
النسخة القديمة من كائن XMLHTTPrequest لها العيوب التالية:
* يتم دعم نقل البيانات النصية فقط ولا يمكن استخدامه لقراءة الملفات الثنائية وتحميلها.
* عند نقل البيانات واستلامها ، لا توجد معلومات عن تقدم ، لذلك يمكنك فقط المطالبة بما إذا كان قد اكتمل.
* بسبب "سياسة الأصل نفسها" ، يمكنك فقط طلب البيانات من الخوادم بنفس اسم المجال.
3. وظائف الإصدار الجديد
قام الإصدار الجديد من كائن XMLHTTPrequest بإجراء تحسينات كبيرة على أوجه القصور في الإصدار القديم.
نسخة الكود كما يلي:
* يمكنك تعيين المهلة الزمنية لطلبات HTTP.
* يمكن استخدام كائنات FormData لإدارة بيانات النماذج.
* يمكن تحميل الملفات.
* يمكنك طلب البيانات تحت أسماء مجال مختلفة (طلب النطاق المتقاطع).
* يمكنك الحصول على بيانات ثنائية على جانب الخادم.
* يمكنك الحصول على معلومات التقدم الخاصة بنقل البيانات.
بعد ذلك ، سأقدم هذه الميزات الجديدة واحدة تلو الأخرى.
4. الحد الزمني لطلبات HTTP
في بعض الأحيان ، تستغرق عمليات Ajax وقتًا ، ومن المستحيل التنبؤ بمقدار الوقت الذي سيستغرقه. إذا كانت سرعة الإنترنت بطيئة للغاية ، فقد يضطر المستخدمون إلى الانتظار لفترة طويلة.
أضاف الإصدار الجديد من كائن XMLHTTPRequest سمة مهلة ، والتي يمكن أن تحدد المهلة الزمنية لطلبات HTTP.
XHR.Timeout = 3000 ؛
يحدد البيان أعلاه الحد الأقصى لوقت الانتظار إلى 3000 ميلي ثانية. بعد هذا الحد الزمني ، سيتم إيقاف طلب HTTP تلقائيًا. هناك أيضًا حدث مهلة يحدد وظيفة رد الاتصال.
نسخة الكود كما يلي:
xhr.ontimeout = function (event) {
تنبيه ("طلب مهلة!") ؛
}
حاليًا ، يدعم Opera و Firefox و IE 10 هذه الخاصية. هذه الخاصية من IE 8 و IE 9 تنتمي إلى كائن XdomainRequest ، في حين أن Chrome و Safari لا يدعمانها.
5. كائن formdata
غالبًا ما تستخدم عمليات AJAX لتمرير بيانات النماذج. لتسهيل معالجة النماذج ، أضافت HTML 5 كائن FormData إلى النماذج السخرية.
أولاً ، إنشاء كائن FormData جديد.
var formData = new FormData () ؛
ثم ، أضف عنصر نموذج إليه.
formdata.append ('username' ، 'Zhang San') ؛
formdata.append ('id' ، 123456) ؛
أخيرًا ، نقل كائن formdata هذا مباشرة. هذا هو بالضبط نفس إرسال نموذج ويب.
XHR.Send (formData) ؛
يمكن أيضًا استخدام كائن FormData للحصول على قيمة نموذج الويب.
نسخة الكود كما يلي:
var form = document.getElementById ('myform') ؛
var formData = new formData (form) ؛
formdata.append ('secret' ، '123456') ؛ // إضافة عنصر نموذج
XHR.Open ('post' ، form.action) ؛
XHR.Send (formData) ؛
6. تحميل الملفات
لا يمكن للإصدار الجديد من كائن XMLHTTPrequest إرسال معلومات نصية فحسب ، ولكن أيضًا تحميل الملفات.
على افتراض أن الملفات هي عنصر نموذج (إدخال [type = "file"]) من "تحديد الملف" ، نقوم بتحميله في كائن formData.
نسخة الكود كما يلي:
var formData = new FormData () ؛
لـ (var i = 0 ؛ i <files.length ؛ i ++) {
formData.append ('files []' ، files [i]) ؛
}
ثم ، أرسل هذا الكائن formdata.
XHR.Send (formData) ؛
7. مشاركة موارد المجال المتقاطع (CORS)
يمكن للإصدار الجديد من كائن XMLHTTPrequest إصدار طلبات HTTP إلى الخوادم بأسماء مجال مختلفة. وهذا ما يسمى "مشاركة الموارد عبر الأصل" (CORS).
المتطلب السابق لاستخدام "مشاركة الموارد عبر المجال" هو أن المتصفح يجب أن يدعم هذه الوظيفة ، ويجب أن يوافق الخادم على هذا "المجال المتقاطع". إذا كان من الممكن استيفاء الشروط المذكورة أعلاه ، فسيتم كتابة الرمز تمامًا كما هو الحال في طلبات غير قانونية.
XHR.Open ('get' ، 'http: //other.server/and/tot/to/script') ؛
حاليًا ، بالإضافة إلى IE 8 و IE 9 ، تدعم المتصفحات الرئيسية CORs ، وستدعم IE 10 هذه الوظيفة أيضًا. لإعدادات من جانب الخادم ، يرجى الرجوع إلى "التحكم في الوصول إلى جانب الخادم".
8. استلام البيانات الثنائية (الطريقة أ: إعادة كتابة mimetype)
يمكن للإصدار القديم من كائن XMLHTTPrequest أن يسترجع البيانات النصية فقط من الخادم (وإلا فلن يبدأ اسمه بـ XML) ، بينما يمكن للإصدار الجديد استرداد البيانات الثنائية.
فيما يلي طريقتان مختلفتان. يتمثل النهج الأقدم في تجاوز نوع محاكاة البيانات ، وإخفاء البيانات الثنائية التي يتم إرجاعها بواسطة الخادم كبيانات نصية ، وأخبر المتصفح أن هذه مجموعة أحرف محددة من قبل المستخدم.
XHR.OverrideMiMetype ("Text/Plain ؛ Charset = X-User-defed") ؛
بعد ذلك ، استخدم خاصية ResponseText لتلقي البيانات الثنائية التي يتم إرجاعها بواسطة الخادم.
var binstr = XHR.Responsetext ؛
نظرًا لأن المتصفح يعاملها كبيانات نصية في هذا الوقت ، يجب استعادتها إلى البيانات الثنائية واحدة تلو الأخرى.
نسخة الكود كما يلي:
لـ (var i = 0 ، len = binstr.length ؛ i <len ؛ ++ i) {
var c = binstr.charcodeat (i) ؛
var byte = c & 0xff ؛
}
تعني عملية البتات "C & 0xFF" من السطر الأخير أنه من بين بايتات كل حرف ، يتم الاحتفاظ فقط بالبايت التالي وإلقاء البايت السابق. والسبب هو أنه عندما يفسر المتصفح الأحرف ، فإنه سيقوم تلقائيًا بتفسير الأحرف في قسم Unicode 0xF700-0XF7FF.
8. استلام البيانات الثنائية (الطريقة ب: خاصية ResponseType)
تتمثل الطريقة الأحدث لاسترداد البيانات الثنائية من الخادم في استخدام خاصية ResponseType المضافة حديثًا. إذا قام الخادم بإرجاع بيانات النص ، فإن قيمة هذه الخاصية هي "نص" ، وهي القيمة الافتراضية. تدعم المتصفحات الأحدث أيضًا قيمًا أخرى ، أي يمكنها تلقي البيانات بتنسيقات أخرى.
يمكنك ضبط ResponseType على blob ، مما يعني أن الخادم يرسل كائنًا ثنائيًا.
نسخة الكود كما يلي:
var xhr = new xmlhttprequest () ؛
XHR.Open ('get' ، '/path/to/image.png') ؛
XHR.ResponSetype = 'Blob' ؛
عند تلقي البيانات ، ما عليك سوى استخدام كائن Blob الذي يأتي مع متصفحك.
var blob = new Blob ([xhr.response] ، {type: 'Image/Png'}) ؛
لاحظ أنه هو قراءة XHR.Response ، وليس XHR.Responsetext.
يمكنك أيضًا تعيين ResponseType على ArrayBuffer وتثبيت البيانات الثنائية في صفيف.
نسخة الكود كما يلي:
var xhr = new xmlhttprequest () ؛
XHR.Open ('get' ، '/path/to/image.png') ؛
XHR.ResponSetype = "ArrayBuffer" ؛
عند تلقي البيانات ، تحتاج إلى اجتياز هذه الصفيف.
نسخة الكود كما يلي:
var arraybuffer = xhr.response ؛
if (arrayBuffer) {
var bytearray = new uint8array (ArrayBuffer) ؛
لـ (var i = 0 ؛ i <bytearray.byteLength ؛ i ++) {
// افعل شيئًا
}
}
للاطلاع على مناقشة أكثر تفصيلاً ، راجع إرسال وتلقي البيانات الثنائية.
9. معلومات التقدم
يحتوي الإصدار الجديد من كائن XMLHTTPrequest على حدث تقدم عند إرسال البيانات ، والذي يتم استخدامه لإرجاع معلومات التقدم.
وهي مقسمة إلى حالتين: التحميل والتنزيل. ينتمي حدث التقدم الذي تم تنزيله إلى كائن XMLHTTPREQUEST ، وحدث التقدم المحمّل ينتمي إلى كائن XMLHTTPREQUEST.UPLOAD.
دعنا أولاً نحدد وظيفة رد الاتصال لحدث التقدم.
نسخة الكود كما يلي:
xhr.onprogress = updateProgress ؛
xhr.upload.onprogress = updateProgress ؛
ثم ، في وظيفة رد الاتصال ، استخدم بعض خصائص هذا الحدث.
نسخة الكود كما يلي:
وظيفة updateProgress (حدث) {
if (event.length Computable) {
var ٪ ٪ = event.loaded / event.total ؛
}
}
في الكود أعلاه ، Event.total هو إجمالي البايتات التي تحتاج إلى نقلها ، والحدث. التحميل هو البايتات التي تم نقلها. إذا كان Event.Length Computable غير صحيح ، فإن Event.Total يساوي 0.
هناك خمسة أحداث أخرى تتعلق بحدث التقدم ، والذي يمكنه تحديد وظيفة رد الاتصال بشكل منفصل:
* حدث تحميل: الانتهاء من النقل بنجاح.
* الحدث الإجهاض: تم إلغاء ناقل الحركة من قبل المستخدم.
* حدث الخطأ: حدث خطأ أثناء الإرسال.
* حدث LoadStart: يبدأ النقل.
* حدث LoadEd: ينتهي الإرسال ، لكنني لا أعرف ما إذا كان ينجح أو يفشل.
10. مواد القراءة
1. مقدمة إلى XMLHTTPREQUEST المستوى 2: مقدمة شاملة لميزات جديدة.
2. حيل جديدة في XMLHTTPREQUEST 2: بعض مقدمات الاستخدام.
3. باستخدام XMLHTTPREQUEST: بعض الاستخدامات المتقدمة ، والتي تستهدف بشكل أساسي متصفحات Firefox.
4. التحكم في الوصول إلى HTTP: نظرة عامة على CORS.
5. التحكم في الوصول إلى DOM باستخدام مشاركة الموارد عبر الأصل: 9 أنواع من معلومات رأس HTTP من CORS
6. التحكم في الوصول إلى جانب الخادم: إعدادات CORS من جانب الخادم.
7. تمكين CORS: إعدادات CORS الخادم.