0715 Ajax 기반의 single page application model

     client side                                                     server side

 

web browser(web client)      →                              web server(program)

                                   request  

                                  get 가져옴

                                  post 생성                                                                    WAS

                                  put 수정                                                  back-end web application

                                  delet 삭제                       ←   response                            ↓        

      Front-end                                                  (HTML,CSS,Javascript)             Database 

    web application                                          front-end web application

HTML,CSS,Javascript

 

 

 

 

request ← (URL) ←url은 길이제한이 있어요

protocol://IP:port/was의어떤program을 호출할지

  (HTTP)                                                                                     rest                                                    

                                                                          program을 실행시키기 위한request는

                                                                        일반적으로 program에 전달한 data를 포함

 

 

 

     Ajax(Javascript를 이용한 Request)

javascript 통신방식 ← jQuery를 이용해서 쉽고

                            직관적으로 사용해 보아요 !!

 

 

 

request를 보내는 방법

1.browser 주소창에 URL 입력후 엔터(GET방식)

2.tag를 이용하면 hyperlink를 생성 할 수 있는 link를 클릭해서 request를 보내는방식(GET)

3.

 

response

● Round Trip : HTML,CSS,Javascript 결과로 전달

●SPA : data만 결과로 Client에게 도달

●Back-end Web application이 결과로 return하는 data는 특정형식을 가지고 있어요.

1. CSV (comma-separated values) ex)홍길동,20,서울,김길동,30,제주

장점: Simple, Redundant 한 data가 작아요,다른방식에 비해 data size가 작아요(대용량data표현)

단점: Data의 계층구조를 표현하기 힘들어요. 유지보수성이 없어요

2.Xml (eXtensible Markup Language) tag언어,문법지켜가며 써야해요.(1990후반 2000초반)

ex)<name>홍길동</name><age>20</age><address>서울</address>

장점 : data의 구조를 잘 표현, 유지보수가 좋아요, 직관적인 data표현

단점 : 데이터 크기가 커져요.

3.JSON(JavaScript Object Notation)

ex) {name:홍길동,age:20,address:서울}

현재 가장 많이 사용되는 data 표현 형식

 

 

get방식 : data 전달시 URL에 data를 포함 시켜서 전달.(simple,많은양data 못보내요,보안성

Query string( ? 시작 key와 value 쌍으로 구성 a = 100 & b= 200) 으로 전달

ex)https://logins.daum.net/accounts/signinform.do?url=https%3A%2F%2Fwww.daum.net%2F

 

logins.daum.net

?부터 get 방식

 

 

post방식 : data전달시 request header에 포함시켜서 전달.(많은양의 data전달,보안성이그나마있어요)