오늘의 튜토리얼에서는 Ajax 요청이 서버와 상호 작용할 때까지 기다리는 동안 jQuery – AJAX 로딩 효과를 만드는 방법을 보여 드리겠습니다. 시작해 봅시다. jQuery load() 메서드는 간단하지만 매우 강력한 AJAX 메서드입니다. jQuery의 Load() 메서드는 전체 페이지를 로드하지 않고 서버에서 데이터를 로드하고 선택한 요소로 반환하는 데 도움이 됩니다. 다음은 예제 파일의 내용입니다: « demo_test.txt »: 우리는 가져온 문서의 일부만 사용 하도록 위의 예제를 수정할 수 있습니다 #hint. no-10), DIV 상자 안에 삽입할 « test-content.html » 파일의 일부를 지정합니다. AJAX 요청이 진행 중일 때 페이지에 로딩 이미지 또는 문자 메시지를 표시하고 응답을 받은 후 숨길 수 있습니다. 다음 예제에서는 파일 « demo_test.txt »의 내용을 특정
참고: Ajax 요청은 보안상의 이유로 외부 또는 원격 서버가 아닌 Ajax 요청이 전송되는 페이지를 서버로 보내는 동일한 웹 서버에 있는 파일에만 수행할 수 있습니다. 이를 동일한 원본 정책이라고 합니다. 다음 예제에서는 load() 메서드가 완료된 후 경고 상자를 표시합니다. load() 메서드가 성공한 경우 « 외부 콘텐츠가 성공적으로 로드됨! »이 표시되고 실패하면 오류 메시지가 표시됩니다. 요청의 상태입니다. 아주 멋진! 그냥 관찰. 당신은 그 $ 를 언급하지 않았다 . 아약스는 JQuery 라이브러리에 따라 다릅니다. 좋은 튜토리얼, 이의 라이브 예를 보고 좋은 것입니다.
이제 브라우저에서 이를 확인하려는 경우 AJAX 요청이 처리되는 동안 좋은 로딩 효과가 표시됩니다. 위의 두 예에서 현재 문서에 « 결과 »의 ID가 있는 요소가 포함되어 있지 않으면 .load() 메서드가 실행되지 않습니다. 선택기와 일치하는 요소가 없는 경우(이 경우 문서에 id= »result »가 있는 요소가 포함되어 있지 않은 경우) – Ajax 요청이 전송되지 않습니다. 접미사 선택기 식없이 URL을 사용하여 .load()를 호출할 때 스크립트가 제거되기 전에 콘텐츠가 .html()으로 전달됩니다. 이렇게 하면 스크립트 블록이 삭제되기 전에 실행됩니다. 그러나 URL에 추가된 선택기 식으로 .load()를 호출하면 DOM이 업데이트되기 전에 스크립트가 제거되므로 실행되지 않습니다. 두 경우의 예는 아래에서 볼 수 있습니다: 이제 AJAX 요청서버와 상호 작용하는 까다로운 부분이 있습니다. $.ajax를 사용하여 우리는 JSON 파일인 sam의 로그인 사용자 이름을 가진 사용자를위한 Github API의 데이터와 상호 작용합니다. Ajax 요청을 구성하는 키/값 쌍 집합입니다. 모든 설정은 선택 사항입니다. 이 부분에서는 형식, 데이터 유형 및 정보를 검색할 URL을 사용합니다.
성공하면 setTimeOut 함수 다음에 검색된 데이터를 div에 배치합니다. 아래 코드를 확인하십시오. 로드 이미지를 표시하기 전에Send 를 완료하고 숨깁니다. 또한 jQuery load()를 사용하면 문서의 일부만 가져올 수 있습니다. 이것은 단순히 jQuery 선택기 뒤에 공간으로 URL 매개 변수를 추가하여 달성됩니다. 이 메서드를 실제 용도로 사용해 보겠습니다. 빈 HTML 파일 « test-content.html »을 만들고 웹 서버의 어딘가에 저장합니다. 이제 이 파일 의 내부에 다음 HTML 코드를 배치합니다: Github API에서 선택할 데이터를 결정하기 위해 로더를 확인합니다.