Ajax 상세 설명 (핸드폰 jq 와 axios 부분 구현)
63501 단어 전단 개발
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()}`);
다른 차이 점:
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)
좋은 웹페이지 즐겨찾기
