'Windows/jquery'에 해당되는 글 22건

  1. 2009.04.22 JQuery Core
  2. 2009.04.22 jquery Ajax 활용

JQuery Core

Windows/jquery 2009. 4. 22. 13:35

JQuery 객체 만들기

1 $( html )

    html을 JQuery Object로 만든다.
    예)
        $("<div><i>안녕하세요</i></div>").appendTo("body");

2 $(elems)
    자바스크립트 엘리먼트나 엘리먼트 배열을 JQuery 오브젝트로 만든다.

    예)
    $(document.body).html("<p>으흐흐.</p>");
    $(document.form1).html("<p>으흐흐.</p>");

3 $( expr, context )

    표현식과 context를 이용하여 JQuery객체를 만든다.
   
4 $( fn )

    $(document).ready()의 짧은 표현이며, 일반 자바스크립트의 document.onload=function(){..}와 대응된다.

    예)
        $(function(){
            //여기에 코딩을하면된다.
            //..
            //
        });

6 eq(pos)
    선택된 JQuery오브젝트를 pos번째 JQuery Object만으로 선택.

9 gt(pos)
    선택된 JQuery 오브젝트중  pos보다 나중에있는 오브젝트들을 선택.

12 lt(pos)
    선택된 JQuery 오브젝트중  pos보다 앞에있는 오브젝트들을 선택.


10 index(subject)
    subject의 위치.

11 length
    선택된 요소의 갯수.

5 each(fn)
    선택된 모든 JQuery Object에대해 fn을 실행.


13 size()
    선택된 요소의 갯수.


7 get()
    선택된 JQuery오브젝트를 일반 HTML Element로 반환.

8 get(num)
    선택된 JQuery 오브젝트중  num번째 오브젝트를 일반 HTML Element로 반환.
    이것은 $("div").get(num) 은 $("div")[num]은 같다.


14 $.fn.extend( prop )
간단하게 플러그인을 만든다.

15 $.noConflict()
'$'가 다른 라이브러리등과 충돌하지 않게 함.

Posted by 아로스
,

jquery Ajax 활용

Windows/jquery 2009. 4. 22. 10:19 
Ajax에 대한 설명은 저번 장에서 설명을 하였기에 넘어가겠다.
지금까지 jQuery에 대해 알아보았지만 단순하고 반복적인 코드를 간략하게 사용하게 해준다.
특히 이번에 볼 Ajax에서는 그것이 더욱 뚜렷하게 보일 것이다.
우선 우리가 사용하였던 Ajax 코드를 살펴보자.      
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}else{
throw new Error();
} 

xhr. onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300){
document.getElementById('someContainer').innerHTML = xhr.responseText;
}
}
} 

xhr.open('GET', 'test.jsp');
xhr.send('');


 

위의 코드는 크로스 브라우저를 위한 XHR 객체 생성과 응답처리가 정상적으로 처리되었을 때 'someContainer'에
처리 결과를 붙이게 된다. 이렇듯 매번 Ajax를 사용하기 위해서는 위의 반복적인 처리를 해줘야 한다.
아래의 코드는 jQuery를 이용한 예이다.

 
$('#someContainer').load('test.jsp');


한 눈에 보아도 많은 코드 양의 차이가 보인다. 이렇듯 간단히 활용할 수 있는 부분에 대해 상세히 알아보자.

간단한 jQuery 구문은 load()를 사용하여 쉽게 서버 측 자원에서 콘텐츠를 가져온다. load() 커맨드는 jQuery가 제공하는
가장 기본적인 Ajax 커맨드이면서 매우 유용하다.
  • load(url, parameters, callback) - URL과 선택적인 매개변수로 Ajax 요청을 전송한다. 콜백 함수는 요청이 완료되면 호출된다.
  • 매개변수 - url: (String)요청이 전송되는 서버 측 자원의 URL
                         parameters: (Object)이 매개변수를 명시하면 요청은 POST 메소드를 사용하고, 생략하면 GET 메소드를 사용한다.
                         callback: (Function)응답 결과 데이터가 일치하는 엘리먼트로 로드된 이후에 호출되는 콜백함수
  • 반환값 - 확장 집합 
load() 커맨드로 데이터를 가져온 후 HTML 엘리먼트 콘텐츠로 설정하지 않고, 서버에서 가져온 데이터를 직접 다루기로
결정했다면 $.get()함수를 사용한다.
  • $.get(url, parameters, callback) - 매개변수로 명시된 URL을 사용하여 서버에 대한 GET 요청을 전송한다.
  • 매개변수 - url: (String)GET 메소드로 연결하는 서버 측 URL
                         parameters: (Object)이름과 값의 쌍으로 프로퍼티를 지닌 객체, 미리 구성 및 인코딩된 쿼리 문자열
                         callback: (Function)요청이 완료되면 호출되는 함수
  • 반환값 - 확장 집합 
$.get()함수의 간단한 예제를 살펴보자.(예제보기)

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>$.get() Example</title> 
<script type="text/javascript" src="script/jquery-1.2.1.js"></script> 
<script type="text/javascript">
$(function(){
$('#testButton').click(function(){
$.get(
'reflectData.jsp',
{a:1, b:2, c:3},
function(data) { alert(data); }
);
});
});
</script>
</head>
<body>
<button type="button" id="testButton">Click me!</button>
</body>
</html>


GET 메서드를 요구하는 경우를 알아보았는데 POST메소드를 요구하는 경우의 문법은 아래와 같다.
  • $.post(url, parameters, callback) - 매개변수로 명시된 URL을 사용하여 서버에 대한 POST 요청을 전송한다.
  • 매개변수 - url: (String)POST 메소드로 연결하는 서버 측 URL
                         parameters: (Object)이름과 값의 쌍으로 프로퍼티를 지닌 객체, 미리 구성 및 인코딩된 쿼리 문자열
                         callback: (Function)요청이 완료되면 호출되는 함수
  • 반환값 - 확장 집합 
이처럼 jQuery가 제공하는 load() 커맨드와 GET이나 POST 메소드를 사용하는 다양한 Ajax 함수를 사용하여,
요청을 전송하는 방법과 요청 완료를 통보 받는 방법을 제어할 수 있다. 그러나 Ajax 요청을 전반적으로 제어해야
할 필요가 있을 때 jQuery는 다른 방법을 제시한다.



Ajax 요청 직접 제어하기

jQuery는 $.ajax()라는 일반적인 함수를 이용해 Ajax 요청을 기본적인 부분부터 직접 설정하고 제어한다.
사실 깊숙이 들여다보면 Ajax 요청의 생성과 관련된 jQuery의 모든 함수와 커맨드는 결국 이 함수를 사용하여 요청을 전송한다.
  • $.ajax(options) - 요청의 생성방법과 통보 받을 콜백을 제어하고자 전달된 options을 사용하여 Ajax 요청을 전송한다.
  • 매개변수 - options: (Object)요청에 대한 매개변수를 정의하는 프로퍼티를 소유한 객체 인스턴스. 세부 사항은 아래 표를 참조하자.
  • 반환값 - XHR 인스턴스 
이름타입설명
urlString요청 URL
typeString사용할 HTTP 메서드, 일반적으로 POST나 GET을 사용한다.
dataObject요청에 전달되는 프로퍼티를 가진 객체
dataTypeString응답의 결과로 반환되는 데이터의 종류를 식별하는 키워드. 필요하다면 이 값을 통해 데이터를 콜백 함수로 전달하기 전에 어떤 종류의 후처리가 발생할지 결정한다. 
  • xml - 응답 텍스트는 XML 문서로 파싱되며, 콜백에 결과로 생성된 XML DOM을 전달한다. 
  • html - 응답 텍스트는 처리 과정 없이 콜백함수로 전달된다. 반환된 HTML 코드에 있는 모든 <script>블록이 평가된다. 
  • json - 응답 텍스트는 JSON 문자열로 평가되며, 생성된 객체는 콜백에 전달된다. 
  • jsonp - 원격 스크립트를 허용한다는 점을 제외하고는 json과 유사하다. 원격 서버가 이와 같은 방식을 지원한다고 가정한다. 
  • script - 응답 텍스트는 콜백에 전달된다. 응답은 모든 콜백의 호출보다 먼저 자바스크립트 구문으로 처리된다. 
  • text - 응답 텍스트는 일반 텍스트이다.
timeoutNumberAjax 요청의 제한 시간을 밀리초 단위로 설정한다. 제한 시간 안에 요청이 완료되지 않으면 요청을 취소하거나, error 콜백이 정의되어 있다면 호출된다.
globalBooleantrue나 false에 따라 전역 함수를 활성화하거나 비활성화한다. 전역 함수는 엘리먼트에 덧붙일 수 있으며 Ajax 호출 동안 다양한 위치나 조건에서 실행된다.
contentTypeString요청에 명시되는 콘덴츠 타입. 생략하면 'application/x-www-form-urlencoded'가 기본으로 설정된다.
successFunction응답이 성공 상태 코드를 반환하면 호출되는 함수. 응답 본문은 이 함수의 첫 번째 매개변수로 전달되며, dataType 프로퍼티에 명시한 형태로 구성된다. 두번째 매개변수는 상태 값을 나타내는 문자열이며 이번 경우에는 항상 'success'다
errorFunction응답이 에러 상태 코드를 반환하면 호출되는 함수. 매개변수가 세 개 전달되는데, 각각 XHR 인스턴스, 상태 값이 항상 'error'인 메시지 문자열, 선택사항으로 XHR 인스턴스가 반환한 예외 객체이다.
completeFunction요청이 완료되면 호출되는 함수. 매개변수 두 개가 전달되는데, 각각 XHR 인스턴스와 'success'혹은 'error'를 나타내는 상태 메시지 문자열이다. success나 error 콜백을 명시했다면, 이 함수는 해당 콜백이 호출된 후에 실행된다.
beforeSendFunction요청이 전송되기에 앞서 먼저 호출되는 함수. 이 함수는 XHR 인스턴스를 전달 받으며, 사용자 정의 헤더를 설정하거나 요청 전에 필요한 연산을 수행하는 데 사용할 수 있다.
asyncBooleanfalse이면 요청이 동기 호출로 전송된다. 기본은 비동기 요청이다.
processDataBooleanfalse로 설정되면, URL 인코딩된 형태로 처리되어 전달된 데이터를 금지한다. 기본 값은 데이터가 'application/x-www-form-urlencoded'타입의 요청에 사용하는 형태의 URL로 인코딩된다.
ifModifiedBooleantrue일 때 Last-Modified 헤더를 확인하여 마지막 요청 이후에 응답 콘텐츠가 변경되지 않았다면 요청이 성공한다. 만일 생략하면 헤더를 확인하지 않는다.


이러한 다양한 옵션들이 존재한다. 그렇다면 이를 활용하는 예제를 살펴보자.

 
$.ajax({
type: "POST",
url: "test.jsp",
data: "name=Park&location=S2C",
success: function(msg){
alert( "Data : " + msg );
}
});



위의 예에서는 옵션을 4가지 사용하였다. POST 타입으로 해당 URL에 'name'과 'location'을 전송한다.
그리고 전송과 응답이 성공적으로 처리되었을시 경고창이 뜨게 된다. 매우 심플하면서도 실무에서도 많이 쓰이는 타입의 유형이다.
Posted by 아로스
,
123
아로스

달력

«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

태그목록

링크

티스토리툴바