캠핑과 개발

타입1.

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

기본형을 보시면 ajax() 라는 메서드안에 속성 3개를 가진 객체를 생성한후 인자로 때려넣고 있군요.
동적으로 js파일을 로드해서 실행시키는 기능을합니다. 기능이 재밌어 보이긴하는데, 실제로 별로 안쓸것같네요 -_-;


타입2.

 $.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});
some.php 에 POST 타입으로 name 과 location 을 parameter 로 넘기고있네요. success 프라퍼티는 서버에서 http response 를 받은후에 수행될 콜백함수를 지정합니다. "데이타가 저장되었어염" 라고 알려주네요.
갠적으로 이 타입을 가장많이 사용하고있습니다. 실무에서도 가장많이 사용되죠.

타입3.
$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});
cache 라는 프라퍼티가 추가되었군요. test.html 을 가장 최근에 수정된 페이지로 받겠다는거죠.
"캐쉬를 사용하지 않겠다" 이겁니다. html 을 받은후에 results라는 아이디를 가진 엘리먼트의 자식노드로써 추가하고있네요. 쌩 dom api 로 쓰면 이렇겠죠. document.getElementById("results").innerHTML = html;
음 근데 이거랑은 좀 차이점이있어요. append 는 "result 엘리먼트의 자식이 존재할경우, 가장 마지막 자식으로 붙인다" 라는 규칙을 가지고있거든요. 반면에 innerHTML 으로넣으면 자식이 존재하든안하든 덮어써버리는거죠. 기존의 html 엘리먼트는 사라지고 새로운 엘리먼트로 교체되는 개념입니다.

타입4.
 var html = $.ajax({
  url: "some.php",
  async: false
}).responseText;
async(비동기) 라는 프라퍼티가 추가되었군요. false를 때려넣었으니까 "동기"로 요청한다는말이네요.
뭔말이냐면, some.php로 request를 날린후에 response가 오기전까지는 브라우저를 블락킹 시켜버립니다.
유저의 어떠한 인터렉션도 허용되지않죠. 보시면 콜백함수를 때려넣는 success라는 프라퍼티도없네요
그럼 어떻게 응답데이타를 받나염? 바로 저렇게요. var html = $.ajax().responseText;
어차피 서버로부터 response 가 오기전까지는 스크립트수행이 블락되어있으니까 저 코드가 가능한겁니다.
웹플밍을 하다보면 이 타입을 "써야만" 할때가 종종있더군요.

타입 5.
 var xmlDocument = [create xml document];
$.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
});


[출처] http://boast.tistory.com

ajax 쌩으로 쓸려면 코드도 길어지고 xmlhttp 객체 메모리관리도 해야하고 이것저것 귀찮죠
jquery 에서는 상당히 심플한 인터페이스를 제공합니다.. 플젝하다가 갖다썼는데 상당히 만족스럽네요
여러가지 ajax 타입을 소개할까합니다. 재밌는것도 몇개있네요.

타입1.

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

기본형을 보시면 ajax() 라는 메서드안에 속성 3개를 가진 객체를 생성한후 인자로 때려넣고 있군요.
동적으로 js파일을 로드해서 실행시키는 기능을합니다. 기능이 재밌어 보이긴하는데, 실제로 별로 안쓸것같네요 -_-;


타입2.

 $.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});
some.php 에 POST 타입으로 name 과 location 을 parameter 로 넘기고있네요. success 프라퍼티는 서버에서 http response 를 받은후에 수행될 콜백함수를 지정합니다. "데이타가 저장되었어염" 라고 알려주네요.
갠적으로 이 타입을 가장많이 사용하고있습니다. 실무에서도 가장많이 사용되죠.

타입3.
$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});
cache 라는 프라퍼티가 추가되었군요. test.html 을 가장 최근에 수정된 페이지로 받겠다는거죠.
"캐쉬를 사용하지 않겠다" 이겁니다. html 을 받은후에 results라는 아이디를 가진 엘리먼트의 자식노드로써 추가하고있네요. 쌩 dom api 로 쓰면 이렇겠죠. document.getElementById("results").innerHTML = html;
음 근데 이거랑은 좀 차이점이있어요. append 는 "result 엘리먼트의 자식이 존재할경우, 가장 마지막 자식으로 붙인다" 라는 규칙을 가지고있거든요. 반면에 innerHTML 으로넣으면 자식이 존재하든안하든 덮어써버리는거죠. 기존의 html 엘리먼트는 사라지고 새로운 엘리먼트로 교체되는 개념입니다.

타입4.
 var html = $.ajax({
  url: "some.php",
  async: false
}).responseText;
async(비동기) 라는 프라퍼티가 추가되었군요. false를 때려넣었으니까 "동기"로 요청한다는말이네요.
뭔말이냐면, some.php로 request를 날린후에 response가 오기전까지는 브라우저를 블락킹 시켜버립니다.
유저의 어떠한 인터렉션도 허용되지않죠. 보시면 콜백함수를 때려넣는 success라는 프라퍼티도없네요
그럼 어떻게 응답데이타를 받나염? 바로 저렇게요. var html = $.ajax().responseText;
어차피 서버로부터 response 가 오기전까지는 스크립트수행이 블락되어있으니까 저 코드가 가능한겁니다.
웹플밍을 하다보면 이 타입을 "써야만" 할때가 종종있더군요.

타입 5.
 var xmlDocument = [create xml document];
$.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
});


출처 : http://boast.tistory.com/entry/JQuery-Ajax-사용하기

 



fieldValue(excludeUnsuccessful);
확장 집합 내의 전송할 수 있는 폼 컨트롤의 값을 배열 형태의 값으로 반환한다.
값이 없다면 빈 배열을 반환

excludeUnsuccessful: (Boolean) true이거나 생략하면, 확장 집합 내의 전송할수 없는 컨트롤은 무시된다

ex)
$('frm *').fieldValue();  //전송할수 있는 값들을 배열 형태로 반환
$('frm *').fieldValue(false); //전송할수 없는 값들까지 모두 배열 형태로 반환


fieldSerialize(), formSerialize()
확장 집합에서 값을 수집하여 올바르게 URL 인코딩된 이름/값 쌍으로 형식화된 쿼리 문자열로 반환한다.
formSeialize()메서드는 확장 집합 내의 폼을 받아서 폼에 있는 전송 가능한 자식 컨트롤의 모든 값들을 직렬화 한다. 하지만 fieldSerialize()메서드는 확장 집합 내의 모든 컨트롤을 직렬화 하며 이는 폼의 일부만 직렬화할 때 유용하다.

ex)
$('#frm').formSerialize(); //form 태그의 모든 값들을 직렬화하여 반환한다.
$('#frm input').fieldSerialize(); //form 태그의 input  type 의 모든 값들을 직렬화하여 반환한다.

clearForm();
확장 폼의 값들을 모두 지운다.
- 텍스트, 패스워드, 텍스트 영역 컨트롤의 값을 지운다.
-<select> 엘리먼트의 선택을 취소한다.
-체크박스와 라디오 버튼의 선택을 해제한다.

ex)
$('#frm').clearForm();

resetForm();
확장 폼의 값들을 초기값으로 재설정한다.
<selected, checked, value 값들은 초기 셋팅된 값으로 되돌려 놓는다.>

ex) $('#frm').resetForm();


ajaxSubmit(options);
대상폼에 있는 모든 전송 가능한 컨트롤의 이름과 값을 가져오며, 이 값을 Ajax 요청으로 전송한다.
이 메서드에 요청을 만드는데 필요한 정보를 제공하거나, 대상 폼의 설정 값에서 기본 값으로 이용 할 수 있다.
폼을 전송할 때 부도는 이벤트 결과로 스크립트를 사용하여 요청을 전송하려 할 때 쓰면 좋다.

options(매개변수)

url :
    (String) Ajax 요청이 전송될 URL, 생략하면 URL은 대상 폼의 action 속성값을 가져온다.
type :
    (String) GET, POST 값, 생략하면 폼의 method 속성값을 가져오며 속성값도 존재하지 않을 경우 GET로 설정된다.
dataType :
    (String) 응답으로 예상되는 데이터 타입으로 응답 본문이 후처리되는 방식을 결정, 값은 다음값중에서 선택되어
    진다.
        xml - XML 데이터로 취급, 모든 success 콜백은 responseXML 도큐멘트로 전달
        json - JSON 구조로 취급, JSON은 평가되고 결과가 sucess 콜백으로 전달
        script - 자바스크립트로 취급된다. 스크립트는 전역 콘텍스트로 평가된다.
    생략하면 target과 같은 또 다른 옵련이 명시되는 경우를 제외하고 데이터에 대한 후처리는 없다.
target : (String|Object|Element) 응답 본문을 콘텐츠로 전달 받은 DOM  엘리먼트를 하나 이상 명시해야 한다. 
    이것은 jQuery 셀럭터를 나타내는 문자열, 대상 엘리먼트를 포함하는 jQuery 확장 집합, 엘리먼트의 직접적인 참조일수 있다. 생략하면 응답 본문을 받는 엘리먼트는 없다.

beforeSubmit : (Function) Ajax 요청을 전송하기 전에 호출될 콜백 함수를 명시, 폼 데이터의 유효성 등의 함수를 사용할때 유용하다. 생략하면 전처리 콜백은 실행되지 않는다. 매개변수는 다음과 같은 것이 있다.
    - 요청에 매개변수로 전달된 데이터 값들의 배열, 객체는 배열,  name/value 를 가진다.
    - 커맨드가 적용된 jQuery의 일치된 집합
    - 커맨드에 전달된 options 객체

success :
(Function)이 명시되고 성공적인 상태의 응답이 반환된 후에 호출될 콜백 함수로 생략하면 호출되지 않는다. 그리고 세개의 매개변수를 받는다.
 - dataType 옵션에 따라 해석된 응답 본문
 - success를 포함한 문자열
 - 커맨트가 적용된 jQuery의 일치된 집합

clearForm : 
(Boolean)true로 지정하면 성공적으로 전송한 후 폼을 지운다.

resetForm : 
(Boolean)true로 지정하면 성공적으로 전송한 후 폼을 재 설정한다.

ex)
$('frm').ajaxSubmit();
$('frm').ajaxSubmit({target : 'target'});
$('frm').ajaxSubmit(function(response){
 //todo
});


ajaxForm(options);
대상 폼에 적용하여 폼 전송이 발생하면 전송은 ajaxSubmit() 커맨드에 의해 발생한 Ajax 요청으로 재지정된다. 메서드에 전달된 options 매개변수는 ajaxSubmit()호출 시 전달된다.

ex)
  $(function(){
      $("#submitBtn").click(function(){  
          $("#frm").ajaxForm({
               dataType:'html',
               beforeSubmit: frmCheck, //폼유효성 검사
               success:function(data, rst){   
                       $('#obj').innerHTML = data;
                   }
          });
     });
});
 






download : http://plugins.jquery.com/project/form