jQuery API: Forms, Ajax

JAVASCRIPT/함수 2014. 8. 19. 00:29

728x90

http://jquery.com/

Forms
Ajax

Forms

● 메소드

blur() : blur 이벤트를 실행한다. blur 이벤트는 요소가 마우스등의 pointing, device나 탭 키등에서 포커스를 잃은 때 발생

blur(fn) : blur 이벤트를 설정 한다.

change() : change 이벤트를 실행한다. 포커스를 잃은 상태의 input 요소가 포커스를 얻고, 값의 변경을 완료했을 때에 실행된다.

change(fn) : change 이벤트를 설정 한다.

focus() : focus 이벤트를 실행한다. focus 이벤트는 마우스등의 pointing, device 나 탭 키로 요소가 포커스를 받았을 때에 실행 한다.

focus(fn) : focus 이벤트를 설정 한다.

// 엔터치면 다음으로 이동
$(function(){
   $('input').not($(':button')).keypress(function (evt) {
        if (evt.keyCode == 13) {
            var fields = $(this).parents('form:eq(0),body').find('button,input,select');
            var index = fields.index(this);
            if ( index > -1 && ( index + 1 ) < fields.length ) {
                fields.eq( index + 1 ).focus();
            }
            return false;
        }
     });
});

$.param(obj) : form 요소나 오브젝트의 값을 serialize 한다.

select() : select이벤트를 실행한다. select 이벤트는 텍스트 에리어의 문자열을 선택 상태로 하거나 선택 범위를 변경했을 때에 실행 한다.

select(fn) : select 이벤트를 설정 한다.

serialize() : 입력된 모든Element(을)를 문자열의 데이터에 serialize 한다.

$.ajax({
    type: "POST",
    url: "/sample/testAjax.do",
    data: $('#testForm').serialize(),  // 폼데이터 직렬화
    contentType: "application/x-www-form-urlencoded; charset=utf-8",
    dataType: "json",   // 데이터타입을 JSON형식으로 지정
    success: function(data) { // data : 백엔드에서 requestBody 형식으로 보낸 데이터를 받는다.
        if(data.code == '0') {
            alert("code:"+ data.code + "\n" + "msg:" + data.msg);
        } else {
            alert("code:" + data.code);
        }   
    },
    error: function(jqXHR, textStatus, errorThrown) {
        //에러코드
    }
});

serializeArray()^[각주:1] : serialize메소드와 같이Form(이)나 Element(을)를 serialize 하지만, JSON형식의 데이터 구조로 반환값을 돌려준다.

submit() : submit 이벤트를 실행한다.

submit(fn) : submit 이벤트를 설정 한다.

val() : 모든 요소의 value 속성을 리턴한다.

val(val) : 모든 요소의value 속성에 값을 지정한다.

Ajax

● Ajax 개요

AJAX는 XML에 기반 한 종합 기술로 비동기 자바스크립트 XML(Asynchronous JavaScript + XML)을 줄인 말로 자바 스크립트로 HTTP 요청을 보내서 XML 응답을 받아서 사용하는 기술이다.

즉, AJAX는 하나의 독립된 기술이 아닌 화면은 표준 HTML+CSS로 작성하고, 화면에 대한 조작과 상호작용은 문서 개체 모델(Document Object Model)로, 데이터 교환은 XML 형식으로, 데이터 변환과 검색에는 XML 기술인 XSL과 XPath를, 비동기 통신에는 웹 브라우저에 내장된 XMLHttpRequest 개체를 사용하고, 이 모든 것을 하나로 묶는 언어로 자바스크립트를 사용하는 것을 AJAX라 한다.

JavaScript에서 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('container').innerHTML = xhr.responseText;
   }
 }
}
xhr.open('GET', 'test.jsp');
xhr.send('');  

jQuery를 이용한 예로 변경 하면 다음의 한줄로 가능 하다.

1	`$('#container').load('test.jsp');`

~~세상 참 좋아졌어 으응~~

● .ajax(url [,settings]), .ajax(settings)

: 요청의 생성 방법과 통보 받을 콜백을 제어하고자 전달된 options을 사용하여 Ajax 요청을 전송한다.

settings

- url : String, 요청 URL type String 사용할 HTTP 메서드, 일반적으로 POST나 GET을 사용한다.

- data : Object, 요청에 전달되는 프로퍼티를 가진 객체

- dataType

: String, 응답의 결과로 반환되는 데이터의 종류를 식별하는 키워드. 필요하다면 이 값을 통해 데이터를 콜백 함수로 전달하기 전에 어떤 종류의 후처리가 발생할지 결정한다.

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

"html" : 응답 텍스트는 처리 과정 없이 콜백함수로 전달된다. 반환된 HTML 코드에 있는 모든 <script>블록이 평가된다.

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

"jsonp" : 원격 스크립트를 허용한다는 점을 제외하고는 json과 유사하다. 원격 서버가 이와 같은 방식을 지원한다고 가정한다.

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

"text" : 응답 텍스트는 일반 텍스트이다.

- contentType

: String, 기본값은 서버에 데이터를 보낼 때 사용되는 content-type이며 기본값은 'application/x-www-form-urlencoded'. 서버로 데이터를 보낼 때는 언제나 UTF-8 charset를 사용한다. 따라서 서버 사이드 프로그램 시 그에 맞는 디코딩이 필요하다.

- timeout : Number, Ajax 요청의 제한 시간을 밀리초 단위로 설정한다. 제한 시간 안에 요청이 완료되지 않으면 요청을 취소하거나, error 콜백이 정의되어 있다면 호출된다.

- global : Boolean, true나 false에 따라 전역 함수를 활성화하거나 비활성화한다. 전역 함수는 엘리먼트에 덧붙일 수 있으며 Ajax 호출 동안 다양한 위치나 조건에서 실행된다. contentType String 요청에 명시되는 콘덴츠 타입. 생략하면 'application/x-www-form-urlencoded'가 기본으로 설정된다.

- success : Function, 응답이 성공 상태 코드를 반환하면 호출되는 함수. 응답 본문은 이 함수의 첫 번째 매개변수로 전달되며, dataType 프로퍼티에 명시한 형태로 구성된다. 두번째 매개변수는 상태 값을 나타내는 문자열이며 이번 경우에는 항상 'success'다

- error : Function 응답이 에러 상태 코드를 반환하면 호출되는 함수. 매개변수가 세 개 전달되는데, 각각 XHR 인스턴스, 상태 값이 항상 'error'인 메시지 문자열, 선택사항으로 XHR 인스턴스가 반환한 예외 객체이다.

- complete : Function 요청이 완료되면 호출되는 함수. 매개변수 두 개가 전달되는데, 각각 XHR 인스턴스와 'success'혹은 'error'를 나타내는 상태 메시지 문자열이다. success나 error 콜백을 명시했다면, 이 함수는 해당 콜백이 호출된 후에 실행된다.

- beforeSend : Function, 요청이 전송되기에 앞서 먼저 호출되는 함수. 이 함수는 XHR 인스턴스를 전달 받으며, 사용자 정의 헤더를 설정하거나 요청 전에 필요한 연산을 수행하는 데 사용할 수 있다.

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

- processData : Boolean, false로 설정되면, URL 인코딩된 형태로 처리되어 전달된 데이터를 금지한다. 기본 값은 데이터가 'application/x-www-form-urlencoded' 타입의 요청에 사용하는 형태의 URL로 인코딩된다.

- ifModified : Boolean, true일 때 Last-Modified 헤더를 확인하여 마지막 요청 이후에 응답 콘텐츠가 변경되지 않았다면 요청이 성공한다. 만일 생략하면 헤더를 확인하지 않는다.

이 외의 항목은 아래 링크 참조.

참고사이트

http://api.jquery.com/jQuery.ajax/

http://www.websamo.com/bbs/board.php?bo_table=jquery_api&wr_id=192&sfl=wr_subject&stx=ajax&sop=and

var num1 = $('#num1').val();
var num2 = $('#num2').val();
var o = $('#oper').val();
var url = 'test4_ok.jsp';
var params = 'num1=' + num1 + '&num2=' + num2 + '&oper=' + o;
 
$.ajax({
    type: "post",
    url: url,
    data: params,
    contentType: "application/json; charset=utf-8", // 전송 데이터 타입
    dataType: "json", // 응답 데이터 타입
    beforeSend: showRequest, //ajax로 전송 전 호출할 함수
    success: function(data){
        $('#result').html(data);
    },
    error: function(e){
        alert(e.responseText);
    } 
});

ajax 실패 시 에러 메세지를 좀 더 자세히 확인하려면:

error: function(jqXHR, textStatus, errorThrown) {
    var errorMsg = 'status(code) : ' + jqXHR.status + '\n';
    errorMsg += 'statusText : ' + jqXHR.statusText + '\n';
    errorMsg += 'responseText : ' + jqXHR.responseText + '\n';
    errorMsg += 'textStatus : ' + textStatus + '\n';
    errorMsg += 'errorThrown : ' + errorThrown;
    alert(errorMsg);
}

● load(url, data, callback )

: HTML(을)를 읽어들여, DOM에 삽입 한다.

$('#success').load('demo.jsp', function(response, status, xhr) {
     if (status == 'error') {
         alert(xhr.status + ' ' + xhr.statusText);
     }
});
  
$('#success').load('demo.jsp', { "choices[]": ["han", "lee"] } );
  
$('#success').load('demo.jsp', {limit: 25}, function(){
      alert('Test~!');
});

● .get( url, data, callback,dataType )

: 매개변수로 명시된 URL을 사용하여 서버에 대한 GET 요청을 전송한다.

url : String, 연결하는 서버 측 URL

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

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

dataType : xml, json, script, text, html

//get 방식(responseText)
$.get(url, { num1: num1, num2: num2, oper: o }, function(data){
    $('#result').html(data);
});

● .getJSON( url, data, callback )

: 매개변수로 명시된 URL을 사용하여 서버에 대한 GET 요청을 전송한다. 결과는 JSON 형식의 데이터를 리턴 받는다.

$.getJSON('testJSON.js', function (data) {
    $('#pnlDisplay').empty(); //패널(div)의 내용 초기화
    var table = '<table border='1'><tr><td>인덱스</td><td>번호</td><td>이름</td></tr>';
    //data를 탐색:each()메서드를 사용해서 데이터가 있는 만큼 반복
    $.each(data, function (index, entity) {
        table += '<tr>';
        table += '<td>' + index + '</td>';
        table += '<td>' + entity['Num'] + '</td>';
        if (entity['Name']) { //특정필드를 비교할때 이러한 표현법
            table += '<td>' + entity['Name'] + '</td>';
        }
        table += '</tr>';
    });
    table += '</table>';
    $('#pnlDisplay').append(table); //패널에 추가하기
});

● .getScript( url, callback )

: 매개변수로 명시된 URL을 사용하여 서버에 대한 GET 요청을 전송한다. 결과는 JavaScript 파일 형식의 데이터를 리턴 받는다.

$('#btn').click(function () {
    //에러 코드가 실행되는 시점에 js파일의 기능 실행됨
    $.getScript('testScript.js');
});

● .post( url, data, callback, dataType )

: 매개변수로 명시된 URL을 사용하여 서버에 대한 POST 요청을 전송한다.

url : String, POST 메소드로 연결하는 서버 측 URL

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

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

dataType : xml, json, script, text, html

$.post(url, { num1: num1, num2: num2, oper: o }, function(data){
    $('#result').html(data);
});

● CALL CHANINING

.ajax(), .get(), .getJSON(), .post() 사용 시 적용되며 .done()은 .success()와 같다.

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post( "example.php", function() {
    alert( "success" );
}).done(function() {
    alert( "second success" );
}).fail(function() {
    alert( "error" );
}).always(function() {
    alert( "finished" );
});
  
// Perform other work here ...
  
// Set another completion function for the request above
jqxhr.always(function() {
    alert( "second finished" );
});

● Ajax Events

ajaxComplete( callback ) : AJAX request의 송신 완료시에 실행되는 함수를 지정한다.

ajaxError( callback ) : AJAX request의 송신 실패시에 실행되는 함수를 지정한다.

ajaxSend( callback ) : AJAX request의 송신전에 실행되는 함수를 지정한다.

ajaxStart( callback ) : AJAX request의 송신 개시에 active request가 없는 경우에 실행되는 함수를 지정한다.

ajaxStop( callback ) : AJAX request의 송신 종료시에, 실행되는 함수를 지정한다.

ajaxSuccess( callback ) : AJAX request의 송신이 성공시에 실행되는 함수를 지정한다.

$(document).ajaxStart(function() {
    console.log('ajax stated');
}).ajaxComplete(function(){
    console.log('ajax complete');
});

※ 1.9.x 이후 버전에서는 ajax event 트리거를 document에만 바인드할 수 있다.^[각주:2]

http://jquery.com/upgrade-guide/1.9/#ajax-events-should-be-attached-to-document

● Ajax Mics

.ajaxSetup( options )

: AJAX통신 전체로 공유할 수 있는 설정을 결정한다.

: $.ajaxSetup( { name:value, name:value, ... } )

// 요청에 대해 로컬의 응답제한시간(timeout)을 밀리초로 나타냄
jQuery.ajaxSetup({ timeout: (5 * 1000) });
 
// 
$('button').click( function() {
   $.ajaxSetup({
       url: "demo_ajax_load.txt",  // 요청을 보낼 URL을 나타냄. 기본값은 현재페이지
       success:function(result) {  // 요청이 성공했을 때 수행되는 함수
           $('div').html(result);
       }
   });
 
   $.ajax();
});

serialize( ) : 입력된 모든Element(을)를 문자열의 데이터에 시리얼라이즈 한다.

serializeArray( ) : serialize 메소드와 같이Form(이)나 Element(을)를 시리얼라이즈 하지만, JSON형식의 데이터 구조로 반환값을 돌려준다.

● AjaxForm

data 속성을 생략하고 폼태그의 값을 포스트방식으로 전송한다.

필수라이브러리 - jquery.form.js

링크 - http://malsup.com/jquery/form/#download

function sendIt() {
    $('#bbsForm').ajaxForm({
        url: "<%=cp%>/abbsFile/created.action",
        success: function(data, status) {
            $('#bbsLayout').html(data);
        },
        error: function(e) {
            alert(e.responseText);
        }
    });
     
    $('#bbsForm').submit();
}

728x90

저작자표시

'JAVASCRIPT > 함수' 카테고리의 다른 글

javascript substring, substr 함수를 알아보자 (0)	2015.10.21
onKeyPress와 엔터키이벤트사용 (0)	2015.03.18
JSON.parse 함수(JavaScript) (0)	2014.09.05

nineDeveloper

안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!

160x600