XML (eXtensible Markup Language)
- 데이터를 저장하고 전송하는 데 사용되는 태그 기반의 마크업 언어
- HTML과 비슷한 구조를 가지고 있지만, XML은 데이터를 표현하는 데 중점을 둔 언어
- 예전에는 XML이 AJAX 요청에서 많이 사용되었지만, 요즘은 JSON이 더 선호되는 경향이 있다
- jQuery는 XML 데이터도 쉽게 파싱하여 처리 가능
XML 주요 특징
- 확장성
- XML은 사용자가 원하는 태그를 직접 정의 가능
- 즉, 특정 용도에 맞는 태그를 자유롭게 설계할 수 있어 매우 유연하다
- 구조화된 데이터 표현
- XML은 계층 구조로 데이터를 표현
- 부모-자식 관계로 데이터를 구조화하여 정보 간의 관계를 명확히 표현 가능
- 플랫폼 독립성
- XML은 특정 플랫폼에 종속되지 않고, 텍스트 기반의 형식
- 다양한 시스템과 애플리케이션 간에 호환성을 보장
- 인간 및 기계 읽기 가능
- XML은 사람이 읽기 쉬운 형식으로 데이터를 구조화 가능
- 컴퓨터도 쉽게 파싱 가능
⚒️ 예제
// WEB\jQuery Data\Ajax\02_xml |
||
exam01.html | xml01.xml | $.ajax() 함수를 이용한 XML 데이터 읽기 (1) |
exam02.html | xml02.xml | $.ajax() 함수를 이용한 XML 데이터 읽기 (2) |
$.ajax() / $.get(), $.post() / ajax.fail() , ajax.always()
$.ajax()
$.ajax({
url: "XML파일의 URL",
type: "get / post",
data: "파라미터 문자열 key=value&key=value",
dataType: "xml",
success: function(data) {
... 통신이 성공한 경우 실행되는 함수 ...
},
error: function(err){}
});
$.ajax({
url: 'URL',
type: 'POST',
data: 서버로 보내는 데이터,
datatype: 'text' / 'xml' / 'json' 서버로부터 받는 데이터 타입
})
.done(function(data, textStatus, xhr) { });
.fail(function(xhr, textStatus, errorThrown) { });
.always(function(data|xhr, textStatus, xhr|errorThrown) { });
.then(function(data, textStatus, xhr|errorThrown) { });
※ https://string.tistory.com/128 참조
$.get() / $.post()
$.get("url", {파라미터 json}, function(data) {
... XML 데이터의 처리 ...
}, ["xml"]);
예) var ajax = $.get("url", {파라미터 json}, function(data) {...XML 데이터의 처리...}, ["xml"]);
ajax.fail() / ajax.always()
ajax.fail(function() {
// 404, 500 에러 등이 발생한 경우 실행될 내용
});
ajax.always(function() {
// 통신 성공, 실패 여부에 상관없이 무조건 마지막에 호출됨
});
⚒️ 예제
// WEB\jQuery Data\Ajax\02_xml |
||
exam03.html | checkId.jsp checkId_JSTL.jsp |
아이디 중복검사 |
trimDirectiveWhitespaces 속성
jsp 에서 서블릿이나 EL을 이용할 경우 로딩된 페이지에서 소스보기를 해 보면 공백으로 표기가 된다
trimDirectiveWhitespaces 속성을 true로 할 경우 해당 공백을 모두 제거해 준다
$(this).serialize()
- 데이터를 보내기 위해 폼 요소 집합을 문자열로 인코딩
- 표준 URL-encoded 표기법으로 텍스트 문자열을 만든다
- 폼 요소 집합을 표현하는 jQuery 객체 이용
$('form').submit( function() {
alert($(this).serialize());
return false;
});
표준형태의 쿼리스트링을 만든다 => a=1&b=2&c=3&d=4-->
참고 : [jQuery] Ajax의 Success와 Done의 차이
⚒️ 예제
// WEB\jQuery Data\Ajax\02_xml |
||
exam04.html | login.jsp login_JSTL.jsp |
로그인, 비밀번호 검증 |
data-*
1. 개념
- data- 로 시작하는 속성 : Custom Data Attributes 라고 html5에서 새롭게 추가된 속성
- 특별한 기능보다는 html5 element의 데이터를 의미 있게 표현할 수 있는 속성
- html5에서 추가된 태그로는 콘텐츠의 아주 디테일한 의미까지 정의하기 힘들다
- CSS 입장에서는 id와 class 외에 속성값으로 접근하는 수단이 늘어난 것
- jQuery에서도 .data()를 이용해 접근 가능
2. 예
<li class="user" data-name="홍길동" data-city="Seoul" data-car="sm6">
<strong>홍길동:</strong> <span>안녕하세요</span>
</li>
- CSS에서 사용
<style type="text/css">
[data-name] { color: red; }
</style>
- jQuery에서 .data()를 이용해 접근
// 데이터를 가져올 때,
$(".user").data("name") -- 홍길동
// 데이터를 설정할 때,
$(".user").data("name", "고길동");
CDATA Section
<![CDATA[…..]]>
CDATA Section 영역 안에서는 특수문자 사용이 자유로움
한글을 포함한 문자열 데이터에 사용 가능
⚒️ 예제
// WEB\jQuery Data\Ajax\02_xml |
||
exam05.html | comment_list.xml comment_write.jsp comment_write_JSTL.jsp comment_delete.jsp |
jQuery Comment |
data vs ${data}
data | $(data) |
AJAX 요청으로부터 반환된 데이터 | jQuery 함수 $()를 사용하여 데이터를 jQuery 객체로 변환하는 것 |
|
|
'WEB > jQuery_Ajax' 카테고리의 다른 글
json (0) | 2024.09.11 |
---|---|
Ajax (0) | 2024.09.11 |