xhr.js

xhr.js

xhr.js는 XMLHttpRequest를 사용하여 AJAX/HTTP 편안한 요청을 만드는 라이브러리(< 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() : URL, 헤더, 본문, 이벤트와 같은 xhr 인스턴스를 재설정합니다.

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() : 응답 텍스트의 blob 객체를 가져옵니다.

TODO

• 인증 요청
• postman과 같은 http 테스트 크롬 플러그인.

특허

MIT