xhr.js
1.0.0
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 ) ;
} ) ;
xhr 인스턴스의 API입니다.
xhr.request(method, url, body, onsuccess, onfail)
: 메소드를 사용하여 URL을 요청합니다.xhr.on(event_key, event_func)
: 요청 결과(준비, 오류, 성공, 실패)를 결과 인스턴스와 함께 입력으로 바인딩합니다.xhr.get(url, params, onsuccess, onfail)
: 요청을 받습니다.xhr.post(url, params, onsuccess, onfail)
: 게시 요청입니다.xhr.setRequestHeader(header_name, header_value)
: 헤더를 추가합니다.xhr.setAsync(aysnc)
: 요청 비동기/동기화를 설정합니다.xhr.url()
: 요청 URL을 가져옵니다.xhr.body()
: 요청 본문을 가져옵니다.xhr.abort()
: 요청을 중단합니다.xhr.reset()
: URL, 헤더, 본문, 이벤트와 같은 xhr 인스턴스를 재설정합니다. evnet 키는 의 API on
입니다.
ready
: xhr
준비되면.success
: status_code is 200
일 때.fail
: status_code is not 200
경우. API는 요청 콜백 함수 매개변수 result
위한 것입니다.
result.text
: 모든 응답 텍스트를 가져옵니다.result.status
: 서버 응답 코드.result.statusText
: 서버 응답 코드 텍스트입니다. 예: ok
(상태 코드는 200
).result.responseType
: 응답 유형;result.headers
: 모든 응답 헤더 객체를 가져옵니다.result.ok()
: 요청이 정상인가요?result.json()
: 응답 텍스트의 json 객체를 가져옵니다.result.xml()
: 응답 텍스트의 xml 객체를 가져옵니다.result.blob()
: 응답 텍스트의 blob 객체를 가져옵니다.MIT