Ajax
Stands for Asynchronous JavaScript And XML
To briefly say, Ajax use XMLHttpRequest Object to correspond with server.
Asyncrhonous? == receive data without reloading pages
Main Features of Ajax
- Request to server without reloading.
- Get data from server and perform.
1. Make XMLHttpRequest Object.
2. Make callback function.
3. Update HTML page
4. send the request
Get 요청 : 특정 페이지 / 자료 읽기
Post 요청 : 서버로 중요 정보 전달
Example Code of GET request
<button onClick={()=>{axios.get('URL')}}> 더보기 </button>
.then() - When Ajax request is succeeded
.catch() - When Ajax request is failed
<button onClick={()=>{
axios.get('URL')}}>
더보기</button>
.then((result)=>{})
.catch(()=>{})
important
in .then(result), result represents all the received data.
Example of POST request
<button onClick={()=>{
axios.post('서버 URL', {id: 'iamchho', pw:123456})
}}> 더보기 </button>
If you want to get data right after loading component
useEffect(()=>{
axios.get('서버URL')
.then()
.catch()
}. [])
When you add [ ] , functions inside will only run at the first rendering.