[교육내용] JQuery Ajax 정리

(1) 게시물 작성 이전에 본 안내를 반드시 확인해주세요 저작권을 침해하는 게시물이나 미풍양속에서 벗어나는 게시물은 [임의 삭제] 될 수 있음을 양지해 주시길 바랍니다. 게시물 작성시 상단의 [KH정보교육원] 로고를 삭제하지 마시고 반드시 남겨두신 후에 작성완료해 주시길 바랍니다. (2) 파일을 업로드한 회원들과 검색하는 회원들이 쉽게 찾을 수 있도록 [글제목/하단의 태그]에 동일한 단어를 작성해주세요. (3) 게시물을 작성하신 후에는 본 안내 박스를 삭제처리 하셔도 무방합니다. 감사합니다.

JQuery에서 Ajax

1. $.load()

$.load 는 jQuery 가 지원하는 가장 간단한 커맨드로 특정 페이지를 읽은 결과로 HTML을 얻도록 만들어 주는 역할

- $.load(url,parameters,callback)

예) $("#element).load("test.jsp");

(element 라는 객체에 test.jsp 의 호출 결과를 가져오는 것으로, 한 줄로 Ajax의 기능이 구현 됨)

url:연결하는 서버 측 URL

parameters: 이름과 값의 쌍으로 프로퍼티를 지닌 객체, 미리 구성 및 인코딩 된 쿼리 문자열(Object)

callback: 요청이 완료되면 호출되는 함수(Function)

2. $.get() || $.post()

-$.get(url,parameters,callback)

예) $(function(){

$("#btn1").click(function(){

var name=$("#name").val();

var age=$("#age").val();

var url="test3_ok.jsp";

get방식

$.get(url,{name:name,age:age,nickName:'헐'},function(arg){

$("#result").html(arg);

});

post방식

-$.post(url,parameters,callback)

$.post(url,{name:name,age:age,nickName:'헐'},function(arg){

$("#result").html(arg);

});

3. $.ajax()

- $.ajax(options)

예) $(function(){

$("#btn1").click(function(){

var name=$("#name").val();

var age=$("#age").val();

var url="test4_ok.jsp";

var params="name="+name+"&age="+age+"&nickName=수요일";

$.ajax({

type:"POST",

url:url,

data:params,

success:function(args){

$("#result").html(args);

},

beforeSend:showRequest,

error:function(e){

alert(e.responseText);

}

});

});

$("#btn2").click(function(){

$("#result").empty();

});

});

예) $.ajax({

type:"POST",

url:"test4_ok.jsp",

data:"name="+name+"&age="+age+"&nickName=수요일";

success: function(msg){

alert("data:"+msg);

}

});

* $.ajax(options) *

- options 에 대한 상세 내용

1. url: 요청 URL(String)

2. type: 사용할 HTTP 메서드, 일반적으로 POST 나 GET 을 사용(String)

3. data: 요청에 전달되는 프로퍼티를 가진 객체(Object)

4. dataType: 응답의 결과로 반환되는 데이터의 종류를 식별하는 키워드. 필요시 이 값을 통해 데이터를

콜백 함수로 전달하기 전에 어떤 종류의 후처리가 발생할지 결정한다

-xml : 응답 텍스트는 XML 문서로 파싱되며, 콜백에 결과로 생성된 XML DOM 을 전달

-html : 응답 텍스트는 처리 과정 없이 콜백 함수로 전달.

반환된 HTML 코드에 잇는 모든 <script>블록이 평가된다

-json : 응답 텍스트는 JSON 문자열로 평가되며, 생성된 객체는 콜백에 전달된다.

-jsonp : 원격 스크립트를 허용한다는 점을 제외하고는 json 과 유사.

-script : 응답 텍스트는 콜백에 전달. 응답은 모든 콜백의 호출보다 먼자 자바스크립트 구문으로 처리

-text : 응답 텍스트는 일반 텍스트

5. timeout: Ajax 요청의 제한 시간을 밀리초 단위로 설정. 제한 시간 안에 요청이 완료되지 않으면 요청을 취소하거나,

error 콜백이 정의되어 있다면 호출된다(Number)

6. global: true 나 false 에 따라 전역 함수를 활성화 하거나 비 활성화 한다.

전역 함수는 엘리먼트에 덧붙일 수 있으며 Ajax 호출 동안 다양한 위치나 조건에서 실행된다(Boolean)

7. contentType: 요청에 명시되는 콘텐츠 타입. application/x-www-form-urlencoded 가 기본으로 설정(String)

8. success: 응답이 성공 상태 코드를 반환하면 호출되는 함수. 응답 본문은 이 함수의 첫 번째 매개변수로 전달되며,

dataType 프로퍼티에 명시한 형태로 구성. 두번째 매개변수는 상태값을 나타내는 문자열이며,

이 경우에는 항상 success다(Function)

9. error: 응답이 에러 상태 코드를 반환하면 호출되는 함수. 매개변수가 세 개 전달 되는데, 각각 XHR 인스턴스,

상태값이 항상 'error' 인 메시지 문자열, 선택사항으로 XHR 인스턴스가 반환한 예외 객체이다(Function)

10. complete: 요청이 완료되면 호출되는 함수. 매개변수 두 개가 전달되는데, 각각 XHR 인스턴스와 success 혹은 error을

나타내는 상태 메시지 문자열이다. success 나 error 콜백을 명시했다면,

이 함수는 해당 콜백이 호출된 후에 실행된다(Function)

11. beforeSend: 요청이 전송되기에 앞서 먼저 호출되는 함수. 이 함수는 XHR 인스턴스를 전달 받으며, 사용자 정의 헤더를

설정하거나 요청 전에 필요한 연산을 수행하는 데 사용할 수 있다(Function)

12. async: false 이면 요청이 동기 호출로 전송된다. 기본은 비동기 요청(Boolean)

13. processData: false로 설정되면, URL 인코딩 된 형태로 처리되어 전달 된 데이터를 금지한다. 기본 값은 데이터가

application/x-www-form-urlencoded 타입의 요청에 사용하는 형태의 URL로 인코딩 된다(Boolean)

14. ifModified: true 일 때 Last-Modified 헤더를 확인하여 마지막 요청 이후에 응답 콘텐츠가 변경되지 않았다면

요청이 성공한다. 만일 생략하면 헤더를 확인하지 않는다(Boolean)

[출처] JQuery Ajax 정리 (IT전문가 취업의 지름길 (사)KH정보교육원) |작성자 서정호