[jquery] Ajax 이용하기 01

Ajax 이용하기 01

• get

*  링크통한 get 방식 요청

-  form action = "request1" 일 때, 링크 클릭시

=> url은 /form/test01 에서 localhost:3000/form/request1 으로 바뀐다.

-  form action = "/request2" 일 때, 링크 클릭시

=> url은 /form/test02 에서 localhost:3000/request2 로 바뀐다.

-  form action = "/request3?num=1&name=gura" 일 때, 링크 클릭시

=> url은 /form/test03 에서 localhost:3000/request3?num=1&name=gura 로 바뀐다.

* form 전송을 통한 get 방식 요청

- input창은 name을 통해 서버에 값을 전달할 수 있다.

- form action="/request4", input name="num", input name="name" 일 때 submit 이벤트 발생시

=> url은 "/form/test04" 에서 localhost:3000/form/request4?num=넣은값&name=넣은값

*html (클라이언트)

* app.js (서버)

** 출력 결과 **

- html화면

- request1 링크 클릭 시 (action="request1")

- request2 링크 클릭 시 (action="/request2")

- request3 링크 클릭 시 (action="/request3?num=1&name=kimgura")

- form 전송할 경우 (action="/request4" 과 input name으로 전송)

• post

* 링크에 나타나지 않는다.

* 상대 경로 요청

- action="action1" 으로 submit이벤트 발생시

=> url은 form/test01 에서 localhost:3000/form/action1

- action="action2" 으로 submit이벤트 발생시

=> url은 form/test01 에서 localhost:3000/action2

* html (클라이언트)

* app.js (서버)

** 출력 결과 **

- html 화면

- 상대경로 (action="action1")

- 절대경로 (action="/action1")

• ajax 이용하기

- 특정 시점에 페이지 전환 없이 서버에 요청하고 응답받을 수 있다.

- $.ajax( { } );  : function타입이고 데이터는 object형태로 전송

- url : 요청명 string타입 

- method : 요청방식 string타입

- data : 서버에 보낼 데이터 object타입으로

- success : 서버가 성공적으로 응답했을때 함수 호출됨

* html (클라이언트)

* app.js (server)

** 출력 결과 **

• req.body.msg, req.query.msg 차이

- body는 post방식일 때 server에서 request시 이용한다. (ex > req.body.msg )

- query는 get방식일 때 server에서 request시 이용한다. (ex > req.query.msg )

• client 와 server 비교

- res.end("post /ajax/test01 ok!"); 문자는 success:function(){}으로 전달된다.

- 응용: 주기적으로 요청 하는 법 ---> setInterval을 이용