jQuery - Ajax 공통 메소드

AJAX 에서 공통으로 사용할 수 있는 메소드는 다음 표와 같습니다.

메소드	설 명
$.parseJSON()	주어진 JSON 문자열을 자바스크립트 객체로 변환 버전 1.4.1 부터
$.parseXML()	주어진 문자열을 XML 로 파싱 버전 1,5 부터
$.parseHTML()	주어진 문자열을 DOM 노드의 배열로 파싱 버전 1.8 부터
$().param()	serializeArray() 를 쿼리 문자열로 변환
.serialize()	폼 데이터를 URL 인코딩된 텍스트 문자열로 만듬
.serializeArray()	폼 데이터를 객체 배열로 만듬

$.parse*()

$.parseJSON() 은 JSON 문자열을 javascript 객체로 변환하고, $.parseXML() 은 문자열을 XML 로 파싱합니다. 그리고 $.parseHTML() 은 문자열을 DOM 노드의 배열로 파싱합니다.

아래는 $.parseJSON() 에 대한 예제입니다.

<script>
$(function(){
  var jsonp = '[{"name":"하보니"}, {"name":"habony"}]';
  var sName = '';
  var obj = $.parseJSON(jsonp);
  $.each(obj, function () {
    sName += this['name'] + "<br/>";
  });

  $('#user').html(sName);
});
</script>

<div id="user"></div>
<!-- 
결과:

 하보니
 habony
//-->

$.parseXML() 에 대한 예제입니다.

<script>
$(function(){
  var str = "<xml version='1.0'><name>하보니</name></xml>";
  var xmlDoc = $.parseXML(str);
  var $xml = $(xmlDoc);
  var $Name = $xml.find('name');

  $('#user').html($Name);
});
</script>

<div id="user"></div>
<!-- 
결과:

 하보니
//-->

아래는 .parseHTML() 에 대한 예제입니다.

<script>
$(function(){
  var str = "안녕 <b>하보니</b> 반가워"
  var sName = '';
  var sHTML = $.parseHTML(str);
  $.each(sHTML, function (i, el) {
      sName += el.nodeName + "<br/>";
  });
  $('#user').html(sName);
});
</script>

<div id="user"></div>
<!-- 
결과:

 #text
 B
 #text
//-->

.serialize() 와 .serializeArray()

serialize() 는 폼 데이터를 "user=habony&pass=1234" 와 같은 URL 인코딩된 텍스트 문자열로 만듭니다.

<script>
$(function(){
 $('#frm').submit(function(){
  console.log($(this).serialize());
  /* 결과: user=habony&pass=123456890 */

  return false;
 });

});
</script>

<form id="frm">
  <input type="text" name="user" value="habony">
  <input type="password" name="pass" value="1234567890">
  <input type="submit" name="전송">
</form>

serializeArray() 는 폼 데이터를 name 과 value 형식의 객체 배열로 만들어 반환하며, name 에는 요소의 이름을 저장하고, value 에는 요소의 값을 저장합니다.

[
  {
    name: "user",
    value: "habony"
  },
  {
    name: "pass",
    value: "1234567890"
  }
]

아래는 serializeArray() 와 $.param() 에 대한 예제입니다.

<script>
$(function(){
 $('#frm').submit(function(){

  // serializeArray() 예제
  var param = $(this).serializeArray();

  console.log(param);
  /* 
  결과:
  [
    {name: "user", value: "habony"},
    {name: "pass", value: "1234567890"}
  ]
  */


  // $.param(obj) 예제
  console.log($.param(param));
  /* 결과: user=habony&pass=1234567890 */

  return false;
 });

});
</script>

<form id="frm">
  <input type="text" name="user" value="habony">
  <input type="password" name="pass" value="1234567890">
  <input type="submit" name="전송">
</form>