xhr.js

xhr.js

xhr.js عبارة عن مكتبة (<2 كيلو بايت) لتقديم طلبات AJAX/HTTP المريحة باستخدام XMLHttpRequest . لديها واجهة برمجة تطبيقات مماثلة Python-requests .

الاستخدام

1. قم بتثبيت xhr.js

npm install xhr.js

2. استيراد xhr.js

يتم دعم استيراد UMD، ثم احصل على الكائن العام: XHR .

 import XHR from 'xhr.js' ;

// or

var XHR = require ( "xhr.js" ) ;

أو الارتباط script في ملفات html:

 < script src = "dist/xhr.min.js" > </ script >

3. استخدم فئة XHR

 var xhr = XHR ( async ) ; // default is async. you can set sync use  XHR(false)
xhr . on ( 'success' , function ( result ) {
	console . log ( 'status:' , result . status ) ;
	console . log ( 'statusText:' , result . statusText ) ;
	console . log ( 'url:' , result . url ) ;
	console . log ( 'responseType:' , result . responseType ) ;
	console . log ( 'text:' , result . text ) ;
	console . log ( 'headers:' , result . headers ) ;

	console . log ( 'ok:' , result . ok ( ) ) ; // get the json result.
	console . log ( 'json:' , result . json ( ) ) ; // get the json result.
	console . log ( 'xml:' , result . xml ( ) ) ;
	console . log ( 'blob:' , result . blob ( ) ) ;
} ) ;

xhr . get ( 'package.json' , { 'a' : 'b' } ) ;

عرض post آخر:

 var xhr = XHR ( ) ;
xhr . post ( '/post_url' , { 'a' : 'b' } , function ( r ) {
	r = r . json ( ) ; // get the json result.
	// write your code
} ) ;

تحميل الملف باستخدام كائن FormData :

 var fd = new FormData ( document . querySelector ( '#submit_form' ) ) ;

var xhr = new XHR ( ) ;
xhr . post ( '/submit/new' , fd , function ( r ) {
    // request success
    r = r . json ( ) ;
    console . log ( r ) ;
} ) ;

واجهة برمجة التطبيقات التفصيلية

1. واجهة برمجة تطبيقات XHR

واجهة برمجة التطبيقات لمثيل xhr.

1. xhr.request(method, url, body, onsuccess, onfail) : اطلب عنوان url مع الطريقة.
2. xhr.on(event_key, event_func) : ربط نتيجة الطلب (جاهز، خطأ، نجاح، فشل)، مع مثيل النتيجة عند إدخالها.
3. xhr.get(url, params, onsuccess, onfail) : الحصول على الطلب.
4. xhr.post(url, params, onsuccess, onfail) : طلب النشر.
5. xhr.setRequestHeader(header_name, header_value) : إلحاق رأس.
6. xhr.setAsync(aysnc) : تعيين الطلب غير المتزامن/المزامنة.
7. xhr.url() : الحصول على عنوان URL للطلب.
8. xhr.body() : الحصول على نص الطلب.
9. xhr.abort() : إحباط الطلب.
10. xhr.reset() : إعادة تعيين مثيل xhr، مثل عنوان url، والرؤوس، والنص، والأحداث.

2. مفتاح حدث XHR

مفاتيح evnet مخصصة لواجهة برمجة التطبيقات (API) on .

1. ready : عندما يكون xhr جاهزًا.
2. success : عندما status_code is 200 .
3. fail : عندما status_code is not 200 .

3. واجهة برمجة التطبيقات للاستجابة

واجهة برمجة التطبيقات مخصصة result معلمة وظيفة رد الاتصال.

1. result.text : الحصول على نص الاستجابة بالكامل؛
2. result.status : رمز استجابة الخادم؛
3. result.statusText : نص رمز استجابة الخادم، على سبيل المثال ok (رمز الحالة هو 200 ).
4. result.responseType : نوع الاستجابة؛
5. result.headers : الحصول على كافة كائنات رؤوس الاستجابة؛
6. result.ok() : الطلب مقبول؛
7. result.json() : الحصول على كائن json في نص الاستجابة؛
8. result.xml() : الحصول على كائن xml لنص الاستجابة؛
9. result.blob() : الحصول على كائن blob في نص الاستجابة؛

المهام

• مصادقة الطلب
• مكون إضافي لاختبار http chrome، مثل ساعي البريد.

رخصة

معهد ماساتشوستس للتكنولوجيا