AJAX와 jQuery. 동적 콘텐츠 업데이트. 기초 (2012년 1월 3일부터 변경)

이 기사에서는 AJAX와 jQuery가 무엇인지 설명하고 사용 방법의 예를 살펴봅니다.

AJAX는 백그라운드에서 서버와 통신하는 웹 애플리케이션을 구축하기 위한 도구입니다. 이 경우 사용자는 전체 페이지를 다시 로드하지 않고 동적 콘텐츠 업데이트가 포함된 애플리케이션을 받습니다.

jQuery - JavaScript-framework, 다음과 같은 Javascript의 일부 기능을 보다 편리하게 사용할 수 있게 해주는 라이브러리 시각 효과, 이벤트 처리, DOM 조작 및 AJAX 지원.

다운로드 최신 버전개발자 웹사이트 http://www.jquery.com/에서 jQuery 및 모든 기능에 대해 자세히 알아보십시오.

이 기사에서는 jQuery 라이브러리의 하나의 함수, 즉 $.ajax() 함수만 살펴볼 것입니다. 이 기능을 사용하면 페이지를 다시 로드하지 않고도 백그라운드에서 서버로 데이터를 보내고 서버로부터 응답을 받을 수 있습니다. 데이터 수신 또는 전송 설정은 $.ajax() 함수가 호출되는 매개변수에 따라 다릅니다. 주요 내용은 아래에서 논의될 것입니다. 매개변수에 대한 자세한 내용은 jQuery 매뉴얼을 참조하십시오.

예제로 넘어갑시다.

중요한!
예제가 올바르게 작동하려면 다음을 수행해야 합니다.
1. 모든 파일은 UTF-8 인코딩으로 작성되어야 합니다.
2. 스크립트는 브라우저에서 파일로 실행되지 않고 웹 서버에서 실행되어야 합니다.

예 1: 타이머의 동적 콘텐츠 업데이트

표시하는 간단한 프로그램을 만들어 보겠습니다. 현재 시간, 타이머에 의해 초당 한 번 업데이트됩니다. 이 프로그램의 기능은 다른 외부 파일에서 현재 시간에 대한 정보를 가져오는 것입니다.

index.html 파일의 내용입니다.

코드에는 몇 가지 기능이 있습니다. 설명하겠습니다.

1. 헤더에 jQuery 라이브러리가 포함되어 있습니다. HTML 파일, 이 줄은 이를 위해 작성되었습니다.

jquery.js 파일 자체는 예제 파일과 동일한 폴더에 있습니다.

2. 콘텐츠를 로드할 문서 본문에 컨테이너가 생성됩니다.

3. 얼핏 이상하게도 $(document).ready() 함수는 올바른 jQuery 작동, 게다가 그것에서 우리는 프로그램이 작동하기 위한 모든 준비를 수행할 수 있습니다. 우리의 경우 다른 파일에서 내용을 가져오는 메커니즘이 있는 show() 함수를 호출하고 show() 함수가 1초에 한 번 호출되도록 타이머를 설정합니다.

$(문서).ready(function()( show(); setInterval("show()",1000); ));

4. show() 함수는 특정 수의 매개변수를 사용하여 $.ajax() 함수를 호출하는 것으로 구성되며, 이를 통해 백그라운드에서 서버의 외부 파일에서 정보를 얻을 수 있습니다.

$.ajax(( url: "time.php", 캐시: false, 성공: function(html)( $("#content").html(html); ) ));

사용된 $.ajax() 함수의 매개변수를 고려하십시오.

Url: "time.php" 내용을 가져오기 위한 time.php 파일을 참조합니다. cache: false 쿼리 결과가 캐시되지 않습니다. 성공: function(html)( $("#content").html(html); ) 요청이 성공하면 콘텐츠를 매개변수로 수신하고 컨테이너를 작성하는 함수로 제어가 전달됩니다. 컨테이너에 쓰기는 다음 줄에서 발생합니다.
$("#내용").html(html);

time.php 파일의 내용입니다.

time.php 파일의 목적은 화면에 현재 시간을 표시하는 것입니다.

다운로드 소스 파일예(16.6kb):

예 2: 사용자 선택에 따른 동적 콘텐츠 업데이트

사용자가 선택한 콘텐츠를 동적으로 로드하는 프로그램입니다.

index.html 파일의 내용입니다.

어떤 페이지를 열겠습니까?

문서의 본문에는 사용자가 원하는 콘텐츠를 선택하는 두 개의 버튼이 있는 양식이 생성됩니다. 콘텐츠를 로드하기 위한 컨테이너입니다.

페이지 1 버튼 클릭 이벤트는 $("#btn1").click() 함수에 의해 처리되고 페이지 2 버튼 클릭 이벤트는 $("#btn2").click() 함수에 의해 처리됩니다.

콘텐츠 영역에 동적으로 로드되는 page1.html 및 page2.html 파일의 콘텐츠는 다음과 같습니다. 간단한 html 페이지또는 텍스트 파일내용으로.

샘플 소스 파일 다운로드(18.4kb):

예 3: 백그라운드에서 서버로 데이터 전송 및 콘텐츠 가져오기

입력한 사용자 이름을 서버로 보내는 예를 고려하십시오. 서버는 이름을 수신하면 인사말을 하고 입력된 이름의 문자 수를 계산합니다.

index.html 파일의 내용입니다.

당신의 이름을 입력:


문서 본문에 사용자 이름을 입력하는 양식이 생성되었습니다. 그리고 동적 콘텐츠를 로드하기 위한 컨테이너입니다.

양식 자체에는 일반적인 작업 및 메서드 필드가 없습니다. $("#myForm").submit() 함수는 "제출" 버튼을 클릭하기 위한 이벤트 핸들러 역할을 합니다. 이 기능을 고려해보자.

$("#myForm").submit(function()( $.ajax(( type: "POST", url: "greetings.php", 데이터: "username="+$("#username").val( ), 성공: function(html)( $("#content").html(html); ) )); 반환 거짓; ));

보시다시피, 주요 작업은 다시 $.ajax() 함수와 관련이 있습니다. 이번에 등장한다. 추가 옵션, 예 1과 2에서는 고려되지 않았습니다. 즉:

유형: "POST" 데이터 전송 유형. data: "username="+$("#username").val() 서버에 전달된 매개변수. 이 경우 사용자 이름 필드의 내용인 사용자 이름을 전달합니다. 일반적으로 매개변수는 다음과 같은 방식으로 작성됩니다. GET 메서드, 한 줄로 예를 들면 다음과 같습니다.
데이터: "username=Vasya&age=18&sex=남성"

끝에 다음 줄이 작성됩니다.

거짓을 반환합니다. 이는 양식이 실행된 파일로 데이터를 전송하지 않고 페이지가 다시 로드되지 않도록 하기 위해 수행됩니다.

Greetings.php 파일의 내용입니다.

".$_REQUEST["사용자 이름"]."!
"; echo "이름에 문자가 있습니다: ".strlen($_REQUEST["username"])."."; ?>

우리는 화면에 인사말을 표시하고 이름의 문자 수를 계산합니다.

샘플 소스 파일 다운로드(16.8kb):

결론적으로 동적으로 업데이트된 콘텐츠를 사용하여 페이지를 만드는 것의 명백한 이점 외에도 사이트를 개발할 때 고려해야 할 여러 가지 단점이 있습니다.

1. 동적 콘텐츠 업데이트가 있는 페이지에서 브라우저의 "뒤로" 버튼이 제대로 작동하지 않습니다.

2. 동적 콘텐츠 업데이트가 있는 페이지는 콘텐츠에 따라 URL을 변경하지 않으므로 북마크할 수 없습니다.

3. 동적 콘텐츠 업데이트가 있는 페이지는 인덱싱되지 않습니다. 검색 엔진, 왜냐하면 JavaScript 명령을 실행하지 않습니다.

이러한 단점은 프로그래밍 방식으로 제거할 수 있습니다. 이 문서에서는 이러한 방법을 다루지 않습니다.

안녕 모두. 오늘은 랜딩 페이지에서 지연 로딩 콘텐츠를 구성하는 방법에 대해 이야기하고자 합니다.

종종 "무한 스크롤"이라고도 합니다. 콘텐츠가 처음에 사이트에 없었을 때와 페이지가 스크롤될 때 부드럽게 로드될 때 비슷한 효과를 분명히 보았을 것입니다.

오래 전에 그들은 이러한 효과를 구현하는 방법에 대한 기사를 작성하라는 요청으로 "당신의 제안"섹션에 썼습니다.


그래서 구현을 시작하기로 했습니다. 아이디어를 제공해 주셔서 감사합니다. 시작하자...



대부분의 경우 jQuery 라이브러리를 포함하는 것으로 시작합니다.

그리고 이제 당신은 약간의 탈선이 필요하고 나는 당신에게 방법의 본질을 설명 할 것입니다. 이 모든 것은 사이트의 모든 요소(포트폴리오 또는 리뷰)를 로드하지 않고 필요에 따라 로드하기 위해 시작됩니다. 예를 들어 사용자가 "더보기" 버튼을 클릭하는 경우입니다. 따라서 페이지가 훨씬 빨리 로드됩니다. 이제 본질은 ajax 기술의 도움으로 원하는 요소(div)를 로드하고 타사 파일방문 페이지로 이동합니다. 이론적으로나 실제로나 모든 것이 매우 간단하며 곧 알게 될 것입니다.

이제 예를 들어 작업 사진으로 메인 블록을 만들어 보겠습니다. 아이콘을 그리고 버튼을 클릭할 때 로드한다고 가정합니다. 다음과 같은 구조를 만들었습니다.

포트폴리오

자세히보기...

보시다시피 모든 것이 간단합니다. 그러나 무엇에주의를 기울여야합니까? 그리고 스크립트에서 사용되는 id="smartPortfolio", id="moreButton" 및 id="loadingDiv"인 div에 주의를 기울여야 합니다. 이는 다른 페이지에서 콘텐츠를 로드하는 데 도움이 됩니다. SmartPortfolio는 당사 포트폴리오의 "컨테이너"입니다. MoreButton - 이 버튼을 클릭하면 포트폴리오의 다른 부분이 로드됩니다. LoadingDiv - 포트폴리오가 완전히 열렸을 때 또는 어떤 종류의 오류가 발생했을 때 텍스트가 표시될 영역입니다.

예를 들어, 일부 독자는 여전히 서버가 아닌 이 스크립트를 테스트하려고 시도하지만 단순히 브라우저에서 인덱스 파일을 엽니다. 이 경우 오류 메시지가 표시됩니다. 또한, 매우 느린 연결, 파일을 다운로드하는 데 시간이 걸릴 수 있으며, 사용자가 프로세스가 진행 중임을 이해할 수 있도록 데이터를 로드하거나 넣는 중이라는 메시지(사진, 진행률 표시기 또는 기타)를 입력할 수 있습니다.

내가 직접 스크립트를 작성하지 않았지만 사이트 중 하나에서 찾았습니다. 저자는 소스 코드에 나열되어 있습니다. 관심 있는 사람들을 위해 살펴보십시오. 너무 크지 않아서 다 드리지만 저와 같은 ID명과 파일경로를 사용하실 계획이라면 들여다보지도 않고 그냥 닫는 body 태그 앞에 넣어주기만 하면 됩니다. 바닥글) .

변경하려는 사람들을 위해 스크립트 자체가 있습니다.

var 지연 로드 = 지연 로드 || (); (function($, lazyload) ( "엄격한 사용"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", 컨테이너 = "#smartPortfolio"; lazyload.load = function() ( var url = "./페이지/" + 페이지 + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax(( url: url, 성공: function(response) ( if ( !response || response.trim() == "NONE") ( $(buttonId).fadeOut(); $(loadingId).text("포트폴리오가 완전히 로드되었습니다"); return; ) appendContests(response); ), error : function(response) ( $(loadingId).text("죄송합니다. 요청에 문제가 발생했습니다. 페이지를 새로고침하세요."); ) ); ); var appendContests = function(response) ( var id = $ (buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1; ); ))(jQuery, lazyload) ;

이제 정보를 로드할 파일에 대해 이야기할 가치가 있습니다. 스크립트는 이러한 파일이 2.html…5.html 등의 이름을 가진 파일이라고 가정합니다. 그것은 우리의 정보를 포함합니다. 예를 들어, 내 2.html 파일이 먼저 로드되고 다음 내용이 있습니다.

내 사이트 구조에서 클릭 시 후속 로드를 위해 정보를 가져오는 페이지는 페이지 폴더에 있습니다. 파일이 세 개 있는데 그 중 두 개는 꽉 찼고 마지막 파일은 비어 있습니다. 스크립트의 논리를 가정합니다.

스크립트의 경로는 다음과 같이 지정됩니다.

변수 URL = "./페이지/" + 페이지 + ".html";

다른 경로를 사용하려는 경우 스크립트에서 이를 대체해야 합니다. 또한 다른 ID를 사용한 경우 스크립트에서 재정의해야 합니다. 바로 여기에:

ButtonId = "#moreButton", loadingId = "#loadingDiv", 컨테이너 = "#smartPortfolio";

그리고 내가 말했듯이 닫는 body 태그 앞에 스크립트 자체를 포함합니다.

에 이렇게 방문 페이지지연 로딩을 구현할 수 있습니다. 블로그에서 기사를 읽고 싶은 주제를 더 보내십시오. 가능한 한 계획된 자료가 아닌 "당신의 제안"섹션에서 귀하가 요청한 자료를 게시하려고 노력할 것입니다. 오늘은 여기까지입니다. 안녕히 계세요!

코드를 게시한지 오래되었습니다. 오늘 저는 상황을 수정하고 귀하의 사이트에 꼭 필요한 유용한 jQuery 스니펫을 제공할 것입니다.


나는 이론으로 들어가지 않을 것이다. 모든 jQuery 문서는 라이브러리의 공식 웹사이트에 있다. jQuery가 무엇인지 상기시켜 드리겠습니다.

제이쿼리는 자바스크립트 라이브러리에 초점을 맞추고 자바스크립트 상호작용그리고 HTML. jQuery 라이브러리를 사용하면 모든 DOM 요소에 쉽게 액세스하고, DOM 요소의 속성 및 콘텐츠에 액세스하고, 조작할 수 있습니다. jQuery 라이브러리는 AJAX 작업을 위한 편리한 API도 제공합니다.

그럼 가자!

1. 페이지 상단으로 부드럽게 스크롤

그것 없이는 어떤 웹사이트도 완성되지 않습니다. 단 4줄의 코드로 방문자는 한 번의 클릭으로 전체 페이지를 부드럽게 스크롤할 수 있습니다.

$("a").click(function() ( $("html, body").animate(( scrollTop: 0 ), "slow"); return false; ));

2. 중복 테이블 헤더

표의 인식과 가독성을 향상시키기 위해 표 아래에 표제를 복제할 수 있습니다. 사소해 보이지만 한 화면에 다 들어가지 못하는 복잡하고 큰 테이블에서 매우 편리합니다.

$tfoot = $(" "); $($("머리").clone(true, true).children().get().reverse()).each(function()( $tfoot.append($(this)); ) ); $tfoot.insertAfter("테이블 헤드");

3. 외부 데이터 불러오기

에서 제이쿼리웹 페이지에 외부 콘텐츠를 업로드하는 것은 매우 쉽습니다. 아래 예와 같이 DIV 블록에 직접 표시할 수 있습니다.

$("#content").load("somefile.html", function(response, status, xhr) ( // 오류 처리 if(status == "error") ( $("#content").html(" 오류가 발생했습니다: " + xhr.status + " " + xhr.statusText); ) ));

4. 동일한 열 높이

블록의 높이를 정렬하는 것으로 알려져 있습니다. 표준 수단 HTML과 CSS는 그렇게 쉬운 일이 아닙니다. 아래 코드 몇 줄만 있으면 모든 블록의 높이를 더 큰 블록의 높이와 같게 만들 수 있습니다.

최대 높이 = 0; $("div.col").each(function()( if($(this).height() > maxheight) ( maxheight = $(this).height(); ) )); $("div.col").높이(최대 높이);

5. 표 모양 얼룩말

아시다시피 다색 행 교체를 수행하면 테이블의 인식과 가독성이 눈에 띄게 높아집니다. 이것은 jQuery로 구현하기가 매우 쉽습니다.

$(문서).ready(함수()( $("테이블 tr:even").addClass("줄무늬"); ));

6. 부분 페이지 새로고침

jQuery를 사용하면 블록(부분) 페이지 새로 고침을 구현하는 것이 매우 쉽습니다. 예를 들어 아래 코드를 사용하면 10초마다 #refresh 블록을 자동으로 업데이트할 수 있습니다.

SetInterval(함수()( $("#새로고침").load(위치.href+" #새로고침>*",""); ), 10000); // 대기 시간 밀리초

7. 이미지 사전 로드

이 코드를 사용하면 페이지를 보는 동안 로드하지 않고 배경에서 이미지를 로드할 수 있습니다. 7행에 미리 로드해야 하는 이미지를 나열하면 됩니다.

$.preloadImages = function() ( for(var i = 0; i ").attr("src", 인수[i]); ) ) $(문서).ready(function() ( $.preloadImages("hoverimage1.jpg","hoverimage2.jpg"); ));

8. 새 창/탭에서 외부 링크 열기

이 스니펫은 페이지의 모든 외부 링크가 새 브라우저 창에서 열리도록 합니다. 스크립트는 사이트의 현재 도메인을 대략적으로 판별하고 링크의 주소와 일치하지 않는 경우 작동합니다.

$("a").each(function() ( var a = new RegExp("/" + window.location.host + "/"); if(!a.test(this.href)) ( $(이 ).click(function(event) ( event.preventDefault(); event.stopPropagation(); window.open(this.href, "_blank"); )); ) ));

9. 전체 브라우저 창에서 차단

이 스크립트는 브라우저 화면을 채우도록 블록을 늘리는 데 도움이 됩니다. 모달 창 및 대화 상자에 적합합니다.

var winWidth = $(창).너비(); var winHeight = $(창).높이(); $("div").css(( "너비": winWidth, "높이": winHeight, )); $(창).resize(함수()( $("div").css(( "너비": winWidth, "높이": winHeight, )); ));

10. 비밀번호 복잡도 체크

사이트 방문자가 자신의 비밀번호를 설정하도록 허용하는 경우 복잡성을 제어하고 방문자에게 이에 대해 알리는 것이 좋습니다.

먼저 코드의 HTML 부분을 작성해 보겠습니다.

그리고 아래 코드를 사용하여 입력한 비밀번호를 확인하고 방문자에게 정보를 표시합니다. 비밀번호가 복잡하거나 중간이거나 약하며 너무 짧은지 확인합니다.

$("# 통과").keyup(function(e) ( var strongRegex = new RegExp("^(?=.(8,)))(?=.*)(?=.*)(?=.*) (?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.(7,))(((?=.*)(?=.*) )|((?=.*)(?=.*))|((?=.*)(?=.*))).*$", "g"); var 충분히Regex = new RegExp("( ?=.(6,)).*", "g"); if (false == 충분히Regex.test($(this).val())) ( $("#passstrength").html("더 많은 문자 "); ) else if (strongRegex.test($(this).val())) ( $("#passstrength").className = "ok"; $("#passstrength").html("강함!" ); ) else if (mediumRegex.test($(this).val())) ( $("#passstrength").className = "alert"; $("#passstrength").html("중간!") ; ) else ( $("#passstrength").className = "오류"; $("#passstrength").html("약합니다!"); ) true를 반환합니다; ));

11. jQuery를 사용한 이미지 크기 조정

물론 PHP와 GD를 사용하여 서버 측에서 이미지 크기를 조정하는 것이 더 논리적이지만 클라이언트 측에서 수행해야 하는 상황이 있습니다. 그리고 jQuery는 이를 다시 한 번 도와줄 것입니다.

$(window).bind("로드", function() ( $("#product_cat_list img").each(function() ( var maxWidth = 120, var maxHeight = 120, var 비율 = 0, var 너비 = $( this).width(); var 높이 = $(this).height(); if(width > maxWidth)( ratio = maxWidth / 너비; $(this).css("width", maxWidth); $(this) .css("높이", 높이 * 비율); 높이 = 높이 * 비율; ) var 너비 = $(this).width(); var 높이 = $(this).height(); if(height > maxHeight)( 비율 = maxHeight / 높이; $(this).css("height", maxHeight); $(this).css("width", 너비 * 비율); 너비 = 너비 * 비율; ) )); //$( "#contentpage img").show(); // 이미지 크기 조정 ));

12. 페이지를 아래로 스크롤할 때 콘텐츠 로드

이 기술을 종종 무한 스크롤이라고 합니다. 사용자가 페이지를 스크롤하면 콘텐츠가 로드됩니다. 이것은 아래 코드로 구현하기에 충분히 쉽습니다.

var 로딩 = 거짓; $(window).scroll(function()( if((($(window).scrollTop()+$(window).height())+250)>=$(문서).height())( if( loading == false)( loading = true; $("#loadingbar").css("display","block"); $.get("load.php?start="+$("#loaded_max"). val(), function(loaded)( $("body").append(loaded); $("#loaded_max").val(parseInt($("#loaded_max").val())+50); $ ("#loadingbar").css("디스플레이","없음"); 로딩 = 거짓; )); ) ) )); $(문서).ready(함수() ( $("#loaded_max").val(50); ));

13. 이미지 업로드 확인

이미지가 현재 로드되어 있는지 여부를 확인해야 하는 경우가 종종 있습니다. 그리고 jQuery는 이를 다시 한 번 도와줄 것입니다.

변수 imgsrc = "img/image1.png"; $(" ").load(function() ( alert("이미지 로드"); )).error(function() ( alert("이미지 로드 오류"); )).attr("src", imgsrc);

14. 알파벳순으로 정렬

목록을 알파벳순으로 동적으로 정렬해야 하는 경우 이 작은 스니펫이 확실히 도움이 될 것입니다.

$(function() ( $.fn.sortList = function() ( var mylist = $(this); var listitems = $("li", mylist).get(); listitems.sort(function(a, b) ( var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return(compA< compB) ? -1: 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); } $("ul#demoOne").sortList(); });

저장 - 유용합니다.

내 Telegram 채널의 WordPress 세계에서 가장 최신이고 흥미로운 모든 것. 구독하다!