Language/Javascript

ajax

TechNote.kr 2015. 11. 2. 22:57
728x90

Ajax


 화면의 reload없이 내가 원하는 Data를 실시간으로 server로 전송할 수 있는 방법.....

 화면이 reload될 때마다 생기는 잠시간의 화면 갱신 시간은 사용자로 하여금 사용에 거슬림(?)을 줄수 있는 요소 중 하나이다.

 이를 해결할 수 있는 방법이 ajax다.

 사실 ajax에 대해 그동안 정확히는 알지 못하고, 화면을 부분적으로 갱신(?)하거나 화면 갱신 없이 원하는 data를 server로 부터 받아 오는 방법으로만 막연히 이해하고 있었다. 



 Question

 Answer

 ajax는 새로운 언어인가?

 새로운 언어라기 보다 기존의 javascript, XML등의 기술들을 엮어 놓은 기법.

 Server 기술인가 Client 기술인가?

 javascript로 이루어진 client 기술.

 알고 있어야 하는 base 기술은 무엇인가?

 browser에서 구현되다 보니, 기본적으로 html, css, javascript를 이해하고 있어야 하고, 

 여기에 추가로 jquery를 알고 있으면 좋다.



나름의 답을 찾긴했지만 학습 시작시에는 위와 같은 의문을 가지고 ajax에 대해 학습을 시작하였다 .


Ajax (asynchronous javascript and XML) : 

         비동기적으로 데이터를 교환하기 위한 기법으로 Javascipt, XML을 기반으로 하는 기법.


ajax를 구현하는 방법


XMLHttpRequest object

 

jQuery


jquery 에서 구현하는 대표적인 3가지 방법

.get : HTTP GET 방식

jQuery.get( url [, data ] [, success ] [, dataType ] )
url
Type: String
A string containing the URL to which the request is sent.
data
Type: PlainObject or String
A plain object or string that is sent to the server with the request.
success
Type: Function( PlainObject data, String textStatus, jqXHR jqXHR )
A callback function that is executed if the request succeeds. Required if dataType is provided, but you can use null or jQuery.noop as a placeholder.
dataType
Type: String
The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).


.post : HTTP POST 방식

jQuery.post( url [, data ] [, success ] [, dataType ] )
url
Type: String
A string containing the URL to which the request is sent.
data
Type: PlainObject or String
A plain object or string that is sent to the server with the request.
success
Type: Function( Object data, String textStatus, jqXHR jqXHR )
A callback function that is executed if the request succeeds. Required if dataType is provided, but can be null in that case.
dataType
Type: String
The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).


.ajax : 위 두 방식을 사용할 수 있는 통합적인 방식

.get 

 .post




AngularJS
-. 아직 AngularJS에 대한 이해가 없어 간략한 사용법만 언급해 놓았다.


Reference


https://en.wikipedia.org/wiki/Ajax_(programming)

https://api.jquery.com/jQuery.get/

https://api.jquery.com/jQuery.post/

728x90

'Language > Javascript' 카테고리의 다른 글

javascript is eating the world.  (0) 2015.12.23
ajax POST debugging 방법  (0) 2015.12.12
ajax를 이용한 async post data 저장  (0) 2015.11.16
Slickgrid grid options  (0) 2015.11.16
Slickgrid example1-simple.html 분석  (0) 2015.11.16
Closure - 클로저  (0) 2015.10.25
Grid - Slickgrid  (0) 2015.10.24
Slickgrid 와 django의 연동  (0) 2015.10.16