fetch 와 XMLHttpRequest방식

XMLHttpRequest방식 

 

let sendAjax = (url , data) => { 

// alert(data); 

let email = {'email' : data} 

email = JSON.stringify(email) 

var xhr = new XMLHttpRequest(); 

xhr.open('POST' , url) 

xhr.setRequestHeader('Content-Type' , 'application/json') 

xhr.send(email) 

xhr.addEventListener('load' , () => { 

console.log(xhr.responseText) 

let result = JSON.parse(xhr.responseText) 

document.querySelector(".result").innerHTML = result.result ; 

}) 

} 

 

 

Fetch방식  

 

let fetchTest = (url , data) => { 

alert(data) 

let send = {'email' : data} 

send = JSON.stringify(send) 

console.log(send) 

fetch(url , { 

method : 'POST', 

body : send, 

headers : new Headers( {'Content-Type' : 'application/json' }), 

}).then( (res) => { 

if(res.status == 200 || res.status == 201){ 

res.json().then(json => { 

console.log(json) 

let result = json 

document.querySelector(".result").innerHTML = result.result ; 

}) 

}else{ 

console.error(res.statusText) 

} 

}).catch(err => console.error(err)) 

}