Ajax = (Asynchronous JavaScript And XML) 비동기 자바스크립트와 xml
Ajax는 서버로부터 데이터를 가져와 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법이다. 본래 Ajax는 비동기 요청을 보내는 데 필요한 기술, 즉 Asynchoronous Javascript And XML의 약자였으나 이후 브라우저 내에서 비동기 기능을 제공하는 모든 기법을 통칭하게 되었다.
서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다.
페이지 새로고침 없이 서버에 요청
서버로부터 데이터를 받고 작업을 수행
[내용출처 mozila developer network]
동기처리모델(synchronouse processing model)개념 요약
브라우저는 스크립트가 서버로부터 데이터를 수집하고 이를 처리한 후 페이지의 나머지 부분이 모두 로드될 때까지 대기한다.
비동기 처리모델 개념 요약
데이터가 로드되는 동안 사용자는 계속해서 페이지를 사용할 수 있다.
그러다가 서버가 데이터를 전달해주면 ,
Ajax이벤트가 발생하여 다른 스크립트가 서버로부터 전달된 새로운 데이터를 읽고 페이지의 일부를 수정하게 된다.
(Ajax -> 비동기 처리모델을 사용한다.)
출처 : 컴퓨터이야기(http://hieroglyph.tistory.com/13)
#cf) ajax 방식을 사용하게 되면 웹 서버에서 전적으로 처리되던 데이터 일부를 클라이언트에서도 처리할 수 있게 되므로, 어플리케이션의 응답 반응도가 좋아진다.
브라우저는 서버에 정보를 요청하고, (서버가 필요로 하는 정보도 전달할 수 있다)
브라우저는 Ajax 요청을 담당하는 XMLHttpRequest 객체를 구현하고 있다.
요청 전송 후 , callback이 있을 때까지, 사용자는 다른 동작을 할 수 있다.
#cf ) 기본 틀
$.ajax({
type: "POST",
url: "./savePost",
data: formData,
contentType: false,
processData: false,
success: function (response) {
if (response['msg'] == 'success') {
window.location.href = ("/board")
}
}
})
3가지 과정이 있다.
브라우저로 부터 온 request 를 받고 해당하는 정보를 response 한다. (JSON) 형식
파이썬 Flask 웹 프레임워크 사용했을 시
@app.route('/savePost',methods=["POST"])
def savePost():
# 요청에 맞는 처리 진행
return jsonify( {'msg': 'success'} )
1번 과정코드에서
success: function (response) {
if (response['msg'] == 'success') {
window.location.href = ("/board")
}
위 부분이 응답에 따른 처리를 하는 방식이다.
https://velog.io/@hjkdw95/AJAX%EC%9D%98-%EB%AA%A8%EB%93%A0-%EA%B2%83
https://visualize.tistory.com/402