AJAX (Asynchronous Javascript And XML)
->비동기식 자바스크립트와 xml의 약자
->자바스크립트를 통해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 기능.
동기방식과 비동기 방식
동기방식은 서버에서 요청을 보냈을 떄 응답이 돌아와야 다음 동작을 수행 할 수 있다.
A작업이 모두 끝날떄까지 B작업은 대기해야 한다.
비동기 방식은 반대로 서버에서 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다.
A작업이 시작하면 동시에 B작업이 시작한다.
A작업은 결과가 나오는 대로 출력된다.
AJAX는 네트워크 기술을 이용하여 클라이언트에서 서버로 데이터를 요청하고, 결과를 돌려받을 수 있다.
기본적인 HTTP프로토콜은 클라이언트에서 요청을 하고 , 서버에서 응답을 받으면 이어졌던 연결이 끊긴다.
이런 경우, 화면의 내용을 다시 갱신하기 위해서 다시 요청을 하고, 응답을 하며 페이지 전체를 갱신한다.
AJAX는 HTML페이지 전체가 아닌 일부분만 갱신하도록 XMlHttpRequest객체를 통해 서버에 요청한다,.
이 경우 JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 시간을 절약 할 수 있다.
서버에서 web front로 데이터 전송
$.ajax({
url:"/score/ajax/result",
type:"POST",
success:function(data){
if(data){
console.log(data)
}
else{
console.log("실패")
}
}
});
->이런식으로 web front에서 서버의 데이터를 가져올 수 있음.
Openweather api 가져오기
<script>
var myurl = 'https://api.openweathermap.org/data/2.5/weather?q=paju&appid=175e2c5c6daaf016d61ec9858ceeb991&units=metric';
$.ajax({
dataType:'JSON',
type:"GET",
success:function(resp){
console.log(resp);
}
})
</script>
console.log으로 찍어보니 잘 가져온 것 같다.