Ajax 상세 설명 (핸드폰 jq 와 axios 부분 구현)

의미: async javascript and xml js xmlAjax 원생 JS 조작

// 、  Ajax  
let xhr = new XMLHttpRequest();//IE  ActiveObject  
// 、    :             
//1.HTTP METHOD:GET/POST/PUT/DELETE/HEAD/OPTIONS/TRACE/CONNECT/
//2.url:    
//3.async：  Ajax     ，     
//4.user-name/user-pass      ，    
xhr.open(method, url, async, [user-name], [user-pass])
// 、    ：       readystatechange  (Ajax      )，                       
xhr.onreadystatechange = () => {
	if(xhr.readyState === 4 && xhr.status === 200){
		console.log(xhr.responseText);
	}
};
// 、  Ajax  ：     ，  Ajax    ，  Ajax    ，        ，   Ajax        
xhr.send([      ])

HTTP 요청 방식:
GET 는 서버 에서 데 이 터 를 가 져 옵 니 다 POST: 서버 에 데 이 터 를 전송 합 니 다 DELETE: 서버 쪽 의 일부 콘 텐 츠 삭제 PUT: 서버 에 일부 콘 텐 츠 를 저장 합 니 다 HEAD: 서버 가 되 돌아 오 는 응답 헤더 정보 만 가 져 오 려 면 주체 의 콘 텐 츠 에 응답 하지 마 십시오 OPTIONS: 일반적으로 서버 에 탐지 요청 을 보 냅 니 다. 정 보 를 되 돌려 주면,현재 클 라 이언 트 와 서버 측 이 연결 되 어 있 음 을 설명 합 니 다. 다른 요청 TRACE: axios 라 는 Ajax 라 이브 러 리 가 cross domain 을 기반 으로 크로스 도 메 인 요청 을 할 때 OPTIONS 를 먼저 보 내 탐지 시 도 를 합 니 다.서버 에 연결 할 수 있다 면 다른 요청 을 계속 보 낼 수 있 습 니 다.
GET 와 POST 의 차이 점: [서버 에 정 보 를 전달 하 는 방식 이 다 름] GET 는 url 문자열 을 통 해 참 조 를 전달 하고 POST 는 요청 주 체 를 통 해 전달 합 니 다.

[GET]
xhr.open('GET', '/tmp/list?xxx=xxx&xxx=xxx')

[POST]
xhr.send('xxx=xxx')
(   url-encode  )

[GET 가 안전 하지 않 은 POST 는 상대 적 으로 안전 합 니 다] GET 는 '물음표 전달' 을 바탕 으로 정 보 를 서버 에 전달 하 는 것 이기 때문에 hack 에 의 해 url 납 치 를 하기 쉽 고 post 는 요청 주 체 를 바탕 으로 전달 합 니 다.
[GET 는 제어 할 수 없 는 캐 시 를 만 들 수 있 습 니 다. POST 는 할 수 없습니다] 제어 할 수 없습니다. 브 라 우 저의 자체 기억 으로 JS 를 통 해 제어 할 수 없습니다. 솔 루 션

xhr.open('GET', `/temp/list?lx=1000&_=${Math.random()}`);

다른 차이 점:

GET 는 브 라 우 저 에서 되 돌 릴 때 무해 하 며 POST 는 다시 요청 을 제출 합 니 다

GET 요청 은 수 동 설정

을 제외 하고 브 라 우 저 에 의 해 자동 으로 캐 시 됩 니 다.

GET 요청 인 자 는 브 라 우 저 기록 에 완전 하 게 남아 있 으 며 POST 는 그렇지 않 습 니 다

GET 요청 은 url 인 코딩 만 할 수 있 고 POST 는 다양한 인 코딩 방식

을 지원 합 니 다.
Ajax 상태 ready – state
0 = > UNSENT 가 xhr 를 만 들 기 시 작 했 는데 아직 1 을 보 내지 않 았 습 니 다 = > OPENED 가 open 이 동작 을 실 행 했 습 니 다 2 = > HEADERS RESERVED 가 Ajax 를 보 냈 습 니 다. 응답 헤드 는 클 라 이언 트 에 의 해 받 아들 여 졌 습 니 다 3 = > LOADING 응답 주체 내용 은 4 = > DONE 응답 주체 가 클 라 이언 트 에 의 해 받 아들 여 졌 습 니 다.
HTTP 네트워크 상태 코드 상태
상태 코드 에 따라 현재 상호작용 의 결과 와 원인 1XX 를 분명하게 나 타 낼 수 있 습 니 다. 지시 정보 - 요청 이 수락 되 었 음 을 나타 내 고 2XX 를 계속 처리 합 니 다. 성공 - 요청 이 3XX 를 성공 적 으로 받 았 음 을 나타 냅 니 다. 성공 하지만 4XX 로 재 설정 되 었 습 니 다. 클 라 이언 트 오류 5XX: 서버 오류
200 OK: 클 라 이언 트 요청 성공 206 Partial Content: 클 라 이언 트 가 Range 헤드 가 있 는 GET 요청 을 보 냈 습 니 다. 서버 가 완 료 했 습 니 다.
301 Moved Permamently: 새로운 url 302 Found 로 영구적 으로 전 환 됨: 새로운 url 로 임시 전 환 됩 니 다. 서버 가 최대 병발 수 에 도달 하면 304 Not Modified 를 처리 합 니 다. 서버 는 고객 에 게 원래 의 캐 시 를 계속 사용 할 수 있다 고 알려 줍 니 다. 예 를 들 어 CSS / JS / HTML / IMG, Ctrl + F5 304 캐 시 는 유효 하지 않 습 니 다.
400 Bad Request: 클 라 이언 트 에 문법 오류 가 있 습 니 다. 서버 에서 401 Unauthorized: 권한 이 부여 되 지 않 은 요청 403 Forbidden: 요청 한 페이지 에 대한 접근 이 금지 되 었 습 니 다 404 Not Found: 요청 자원 에 413 Request Entity Too Large 가 존재 하지 않 습 니 다. 서버 와 상호작용 하 는 콘 텐 츠 자원 이 최대 크기 를 초과 합 니 다.
500 Interval Server Error 서버 오류, 원래 캐 시 503 Service 사용 가능
XHR 의 속성 과 방법 에 대하 여
xhr. response 응답 주체 내용 xhr. responseText 응답 내용 은 문자열 (JSON 또는 XML 문서) xhr. responseXML 응답 내용 은 xml 입 니 다.
xhr. status 에서 돌아 오 는 HTTP 상태 코드 xhr. status Text 상태 코드 에 대한 설명
xhr. timeout 설정 요청 시간 초과

xhr.timeout = 1000
xhr.ontimeout = () => {
	console.log(‘    ’)
}

xhr. with Credentials 크로스 도 메 인 허용 여부 (false)
xhr. abort () Ajax 요청 강제 중단

xhr.abort();
xhr.onabort = () => {}

xhr. getAllResponseHeaders () 는 모든 응답 헤더 정 보 를 가 져 옵 니 다 xhr. getResponseHeader ([key]) 예 를 들 어 xhr. getResponseHeader ('date') 는 응답 헤더 에 있 는 서버 시간 xhr. open () 을 가 져 오 는 것 입 니 다. url 요청 xhr. overrideMimeType () 을 열 어 MIME 형식 xhr. send () 를 다시 쓰 고 Ajax 요청 xhr. setRequestHeader () 를 보 내 사용자 정의 요청 헤더 정 보 를 설정 합 니 다 (중국어 가 나타 나 지 않 음)오픈 후 설정 해 야 합 니 다

xhr.onreadystatechange = () => {
	if(!/^(2|3)\d{2}$/.test(xhr.status))return;//            
	if(xhr.readyState === 2){
		let time = xhr.getResponseHeader('date');
	}
	if(xhr.readyState === 4 && xhr.status === 200){
		JSON.parse(xhr.responseText);
	}
}

비동기 와 동기 의 차이
비동기:

let xhr = new XMLHttpRequest();
xhr.open('GET', 'xxx', true);
xhr.onreadystatechange = () => {
	if(xhr.readyState === 2) {
		console.log(1);
	}
	if(xhr.readyState === 4) {
		console.log(2)
	} 
}
xhr.send(); 
console.log(3)
//3 1 2 

동기 화:

let xhr = new XMLHttpRequest();
xhr.open('GET', 'xxx', false);
xhr.onreadystatechange = () => {
	if(xhr.readyState === 2) {
		console.log(1);
	}
	if(xhr.readyState === 4) {
		console.log(2)
	} 
}
xhr.send(); //    ，    Ajax        （readyState  4），      
console.log(3)
//2 3     ？
//       ，            4     Ajax    ，       。
//  ，  readyState  4      。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'xxx', false);
xhr.send(); //    ，    Ajax        （readyState  4），      
//       4
xhr.onreadystatechange = () => {
	if(xhr.readyState === 2) {
		console.log(1);
	}
	if(xhr.readyState === 4) {
		console.log(2)
	} 
}

console.log(3)
//3
//      Ajax

jQuery 중 Ajax

/**
 * DATA：
 *	   GET            
 *	   POST              
 *	data              (      )：
 *		     ，jq        xxx=xxx    (x-www-form-urlencoded)
 * DATA-TYPE:             TEXT/JSON/JSONP/HTML/XML/SCRIPT(                        ，
 *	   DATA-TYPE='json'，jq             JSON      =>             ，        )
 * ASYNC:      
 * CACHE:      ,   FALSE，  get  ，JQ     url        
 * SUCCESS:    ， Ajax      ，JQ                  (    )    
 * ERROR:             
 */
$.ajax({
	url: 'xxx',
	method: 'GET',
	data: null,
	dataType: 'json',
	async: true,
	cache: true,
	success:　(result, textStatus, xhr) => {},
	error: () => {}
})

원생 JS 패키지 ajax

~ function (window) {
  function AJAX(options) {
    return new AJAX.prototype.init(options);
  }
  function init(options = {}){
    let {
      url,
      method = 'GET',
      data = null,
      dataType = 'JSON',
      async = true,
      cache = true,
      success,
      error
    } = options;
    //=>MOUNT           
    ['url', 'method', 'data', 'dataType', 'async', 'cache', 'success', 
    'error'].forEach(item => {
      this[item] = eval(item);
    });
  }
  
  AJAX.prototype = {
    constructor: AJAX,
    init,
    sendAjax(){
      this.handleCache();
      this.handleData();
      //send
      let {method, url, async, error, success} = this;
      //SEND    
      let xhr = new XMLHttpRequest();
      xhr.open(method, url, async);
      xhr.onreadystatechange = () => {
        if(xhr.readyState === 4){
          if(!/^(2|3)\d{2}$/.test(xhr.status)){
            error && error(xhr.statusText, xhr)
          }
          //  DATA-TYPE
          let result = this.handleDataType(xhr);
          success && success(result, xhr);
        }
      };
      xhr.send();
    },
    handleDataType(xhr) { 
      let dataType = this.dataType.toUpperCase(),
          result = xhr.responseText;
      switch (dataType) {
        case 'TEXT':
          break;
        case 'JSON':
          result = JSON.parse(result);
          break;
        case 'XML':
          result = xhr.responseXML;
          break;
      }  
      return result;    
    },
    handleCache() {
      let {url, method, cache} = this;
      if(/^GET$/i.test(method) && cache==false){
        url += `${this.check()}=${+(new Date())}`;
      }
    },
    handleData() {
      let {data, method} = this;
      if(!data) return;
      if(typeof data === 'object'){
        //       ，       x-www-form-urlencoeded  
        for(let key in data){
          if(data.hasOwnProperty(key)){
            str += `${key}=${data[key]}`;
          }
        }
        data=str.substring(0,str.length);
      }
      if(/^(GET|DELETE|HEAD|TRACE|OPTIONS)$/i.test(method)){
        this.url += `${this.check()}${data}`;
        this.data = null;
        return;
      }
      this.data = data; //POST    
    },
    check() {
      return this.url.indexOf('?')>-1?'&':'?';
    }
  }
  init.prototype = AJAX.prototype;

  window.ajax = AJAX;
}(window)

Promise 기반 원생 JS 로 axios

~ function (window) {
  //            
  let _default = {
    method: 'GET',
    url: '',
    baseURL: '',
    headers: {},
    dataType: 'JSON',
    data: null, //POST  
    params: null, //GET  
    cache: true
  };
  //  Promise      Ajax
  let ajaxPromise = function axios() {
    let {
      url,
      baseURL,
      data,
      dataType,
      headers,
      cache,
      params
    } = options;
    //=>             
    if(/^(GET|DELETE|HEAD|OPTIONS)$/.test(method)){
      //GET  
      if(params) {
        url += `${ajaxPromise.check(url)}${ajaxPromise.formatData(params)}`
      }
      if(cache === false){
        url += `${ajaxPromise.check(url)}_=${+(new Date())}`
      }
      data= null;//GET        
    }else{
      //POST  
      if(data){
        data = ajaxPromise.formatData(data);
      }
    }
    //=>  Promise  Ajax
    return new Promise((resolve, reject) => {
      let xhr = new XMLHttpRequest();
      xhr.open(method, `${baseURL}${url}`);
      if(headers != null && typeof headers === 'object'){
        for(let attr in headers){
          if(headers.hasOwnProperty(attr)){
            let val = headers[attr];
            if(/[\u4e00-\u9fa5]/.test(val)){
              val = encodeURIComponent(val);
            }
            xhr.setRequestHeader(attr, headers[attr]);
          }
        }
      }
      //=>  headers  ，         
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4){
          if(/^(2|3)\d{2}$/.test(xhr.status)){
            let result = xhr.responseText;
            dataType = dataType.toUpperCase();
            dataType === 'JSON'?result = JSON.parse(result):(dataType === 'XML'?result = xhr.responseXML : null);
            resolve(result, xhr);
            return;
          }
          reject(xhr.statusText, xhr);
        }
      }
      xhr.send(data);
    })
  }

  ajaxPromise.defaults = _default;

  ajaxPromise.formatData = function formatData(){
    let str = ``;
    for(let attr in obj) {
      if(obj.hasOwnProperty(attr)){
        str += `${attr}=${obj[attr]}&`;
      }
      return str.substring(0, str.length-1)
    }
  }

  ajaxPromise.check = function check(url){
    return url.indexOf('?')>-1?'&':'?';
  }

  //GET   
  ['get', 'delete', 'head', 'options'].forEach(item => {
    ajaxPromise[item] = (url, options = {}) => {
      options = {
        ..._default,
        ...options, 
        url, 
        method: item.toUpperCase()
      };
      return ajaxPromise(options);
    }
  })
  //POST  
  ['post', 'put', 'patch'].forEach(item => {
    ajaxPromise[item] = (url, data = {}, options = {}) => {
      options = {
        ..._default,
        ...options, 
        url, 
        method: item.toUpperCase(),
        data
      };
      return ajaxPromise(options);
    }
  })

  window.ajaxPromise = ajaxPromise;
}(window)