xhr.js

xhr.js

xhr.js เป็นไลบรารี (< 2Kb) เพื่อสร้างคำขอ AJAX/HTTP แบบสงบด้วย XMLHttpRequest มันมี API ที่คล้ายกันกับ 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 ) ;
} ) ;

รายละเอียด API

1. XHR API

API ของอินสแตนซ์ 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) : ตั้งค่าคำขอ async / sync
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. API การตอบสนอง

API ใช้สำหรับ 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() : รับวัตถุหยดของข้อความตอบกลับ

สิ่งที่ต้องทำ

• ขออนุมัติ
• ปลั๊กอิน Chrome ทดสอบ http เช่นบุรุษไปรษณีย์

ใบอนุญาต

เอ็มไอที