xhr.js

xhr.js

xhr.js 是一個使用XMLHttpRequest發出 AJAX/HTTP Restful 請求的函式庫（< 2Kb）。它具有與Python-requests類似的 API。

用法

1.安裝xhr.js

npm install xhr.js

2.導入xhr.js

支援 UMD 匯入，然後取得全域物件： XHR 。

 import XHR from 'xhr.js' ;

// or

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

或與 html 檔案中的script連結：

 < 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

xhr實例的API。

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、headers、body、events。

2.XHR事件鍵

evnet 金鑰適用on .

1. ready ：當xhr準備好時。
2. success ：當status_code is 200 。
3. fail ：當status_code is not 200 。

3. 響應介面

此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() ：取得回應文字的blob物件；

待辦事項

• 請求授權
• 一個 http 測試 chrome 插件，例如 postman。

執照

麻省理工學院