jQuery 연구 노트 - Ajax 작업(1) - Data Loading_jquery

HTML 로드

우리는 일반적으로 HTML 조각을 로드하고 이를 지정된 위치에 삽입하기 위해 HTML 로드 방법을 사용합니다.

<div></div>
<button>load</button>

동일한 디렉토리에 있는 test.html 파일의 내용은 다음과 같습니다.

<span>test</span>

load 메소드를 사용하여 HTML을 로드하고 이를 버튼의 클릭 이벤트에 바인딩할 수 있습니다.

 $('button').click(function() {
  $('div').load('test.html');
 });

버튼을 클릭한 후:

JSON 로드

JSON은 Javascript Object Notation, 문자 그대로 Javascript Object Notation으로 번역되므로 데이터를 쉽게 표현하고 전송할 수 있도록 키와 값을 큰따옴표로 묶어야 하며 함수는 불법적인 JSON 값이라고 규정하고 있습니다.

{
  "name": "stephenlee", 
  "sex": "male"
}

위의 JSON 데이터를 test.json 파일에 저장하세요. getJSON 메소드를 사용하여 JSON 데이터를 로드하고 이를 버튼의 클릭 이벤트에 바인딩할 수도 있습니다.

 $('button').click(function() {
  $.getJSON('test.json');
 });

getJSON 메소드는 jQuery의 전역 객체로 정의되어 있으므로 이 메소드를 호출하려면 $를 사용해야 합니다. 여기서 $는 $()가 참조하는 개별 jQuery 객체가 아니라 전역 jQuery 객체를 나타냅니다. 따라서 getJSON 함수를 전역 함수라고도 합니다.
그러나 위의 코드는 JSON 데이터만 가져오지만 아무런 효과도 볼 수 없습니다. 여기서는 getJSON 메서드의 두 번째 매개변수를 콜백 함수로 사용하여 효과를 테스트할 수 있습니다.

 $('button').click(function() {
  $.getJSON('test.json', function(data) {
   console.log(data);
   $.each(data, function(index, content) {
    console.log(content);
   })
  });
 });

버튼을 클릭한 후 콘솔의 출력을 살펴보겠습니다.

여기서 각 함수의 첫 번째 매개변수는 배열이나 객체를 받을 수 있고, 두 번째 매개변수는 값 콜백 함수로, 각 루프의 배열이나 객체의 현재 인덱스와 값을 매개변수로 받습니다.

JS 로딩

페이지가 처음 로드될 때 모든 JS 파일을 로드하지 않고 요청에 따라 동적으로 로드하려는 경우가 있습니다. 현재 디렉터리에 간단한 경고와 함께 JS 파일이 있다고 가정합니다.

$(function() {
 alert('test');//
})

전역 함수 getScript를 사용하여 파일을 로드하고 버튼 클릭 이벤트에 바인딩할 수 있습니다.

 $('button').click(function() {
  $.getScript('test.js');
 });

버튼을 클릭하면 test.js 파일이 로드되고 알림이 성공적으로 실행됩니다.

XML 로드

XML 문서의 역할은 데이터 저장과도 관련되어 있기 때문에 XML의 로드 작업은 JSON과 유사합니다. 콘텐츠가 있는 동일한 디렉터리에 text.xml 파일을 만듭니다.

<person>
<name>stephenlee</name>
<sex>male</sex>
</person>

get 메소드를 직접 사용하여 XML 문서를 로드할 수 있습니다. 기본 메소드로 보이는 이유는 AJAX - Asynchronous JavaScript And XML의 전체 이름에서 알 수 있습니다.
또한 버튼 클릭 이벤트에 바인딩합니다:

 $('button').click(function() {
  $.get('test.xml', function(data) {
    console.log(data);
  });
 });

콘솔을 보면 결과는 다음과 같습니다.

여기서 주의할 점은 XML 문서의 형식이 올바르지 않으면 오류가 보고되지 않더라도 콜백 기능이 실행되지 않는다는 점입니다.