[jQuery] jQuery & Ajax

jQuery 

jQuery(제이쿼리)는 브라우저 호환성이 있는 HTML 속 자바스크립트 라이브러리이며 클라이언트 사이드 스크립트 언어를 단순화 할 수 있도록 설계되었다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.

 jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서v2의 듀얼 라이선스를 가진 자유 오픈 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.

Ajax

Ajax(Asynchronous JavaScript and XML)는 대화식 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

  - 표현 정보를 위한 HTML (또는 XHTML) 과 CSS

  - 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트

  - 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다).

DHTML이나 LAMP와 같이 Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어이다. 실제로 AFLAX와 같이 사실상 Ajax에 바탕을 두고 있는 유사/복합 기술들이 속속 나타나고 있다. 

 

 Ajax 애플리케이션은 실행을 위한 플랫폼으로 위에서 열거한 기술들을 지원하는 웹 브라우저를 이용한다. 이것을 지원하는 브라우저로는 모질라 파이어폭스, 인터넷 익스플로러, 오페라, 사파리, 구글 크롬 등이 있다. 단, 오페라는 현재 XSL 포맷팅 객체와 XSLT 변환을 지원하지 않는다.

*여기까지가 위키에 나와있는 설명입니다.

Head First에서는 Ajax를 "사용자를 방해하지 않고 브라우저와 웹서버가 정해진 형식대로 데이터를 주고받을 때 사용한다"라고 정의 내렸네요. 다음으로 

"웹페이지나 애플리케이션에서 정말로 필요한 데이터, 서버에서 받아와야 하는 데이터만 요청한다. 따라서 데이터 이용량은 줄어들고, 작은 부분만 업데이트하고, 페이지 새로고침을 기다리는 시간도 줄어든다"

그럼 어떻게 쓰는지 알아봐야죠 기본틀을??

$.ajax({
    url: "my_page.html", // Ajax 를 통해 가져오려는 URL
    success: function(data) { // 
 
    }
});

기본은 이렇습니다. 추가적으로 봐야할 요소가 더 있습니다 그리고..

Name	Value/Description
async	A Boolean value indicating whether the request should be handled asynchronous or not. Default is true
beforeSend(xhr)	A function to run before the request is sent
cache	A Boolean value indicating whether the browser should cache the requested pages. Default is true
complete(xhr,status)	A function to run when the request is finished (after success and error functions)
contentType	The content type used when sending data to the server. Default is: "application/x-www-form-urlencoded"
context	Specifies the "this" value for all AJAX related callback functions
data	Specifies data to be sent to the server
dataFilter(data,type)	A function used to handle the raw response data of the XMLHttpRequest
dataType	The data type expected of the server response.
error(xhr,status,error)	A function to run if the request fails.
global	A Boolean value specifying whether or not to trigger global AJAX event handles for the request. Default is true
ifModified	A Boolean value specifying whether a request is only successful if the response has changed since the last request. Default is: false.
jsonp	A string overriding the callback function in a jsonp request
jsonpCallback	Specifies a name for the callback function in a jsonp request
password	Specifies a password to be used in an HTTP access authentication request.
processData	A Boolean value specifying whether or not data sent with the request should be transformed into a query string. Default is true
scriptCharset	Specifies the charset for the request
success(result,status,xhr)	A function to be run when the request succeeds
timeout	The local timeout (in milliseconds) for the request
traditional	A Boolean value specifying whether or not to use the traditional style of param serialization
type	Specifies the type of request. (GET or POST)
url	Specifies the URL to send the request to. Default is the current page
username	Specifies a username to be used in an HTTP access authentication request
xhr	A function used for creating the XMLHttpRequest object

*출처 : http://www.w3schools.com/jquery

보시면 굉장히 많습니다... 그러나 가장 많이 쓰이는게 url, dataType, success, async,... 등등 있습니다.

그러나 한번 알아두시면 정말 좋은 기능을 익히시는 겁니다...

새로고침 or F5 없이 갱신을 해야 할 경우(작은 부분의), 정말 유용하죠.

이상 jQuery와 Ajax에 대한 간략한 소개를 마치겠습니다.