- Ajax는 자바스크립트 처럼 특정한 프로그래밍 언어를 지칭하는 것이 아니다.
또한, JQuery 와 같은 특정한 프레임웤를 지칭하는 것도 아니다. Ajax 는 프로그램을 구현하는 방식을 뜻 한다.
JavaScript 와 XML 로 비동기 통신을 한다.
간단히 말하면, 서버측 Scripts 와 통신하기 위한 XMLHttpREquest 객체를 사용하는 것을 말한다.
서버측으로, 다양한 형식(JSON, XML, HTML 및 일반 텍스트 형식 등)의 정보를 주고 받을 수 있다.
Ajax 의 강력한 특징은 페이지 전체를 리플래쉬 하지 않고서도 수행 되는 '비동기성' 이다.
- 사이트에서 스크롤이 문서 끝까지 내려가면 자동으로 포스트를 추가하여 스크롤을 늘리는 이벤트(무한스크롤)
우선, 사용자가 마우스 스크롤을 움직으면 무조건 Scroll() 이벤트가 발생한다.
무한 스크롤을 만들려면 화면 끝까지 스크롤이 도달했다는 사실을 인지하여야 한다.
Document 객체의 height 속성은 문서 전체의 높이를 의미한다.
스크롤이 페이지에서 끝까지 내려가면, window 객체의 ScrollTop 속성과 height 속성 값을 합한 것이
Document 객체의 높이와 같아진다. 이때 포스트를 추가하는 방식이다.
예 사이트) http://mixsh.com
ex>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
$(window).scroll(function () {
var scrollHeight = $(window).scrollTop() + $(window).height();
var documentHeight = $(window).height();
if (scrollHeight >= documentHeight) {
for (var i = 0; i < 10; i++) {
$('body').append('<h1>Scroll Add</h1>'); // 임의로 그냥 텍스트 추가
}
}
});
});
</script>
우선 페이지에 스크롤 표시를 위해 <body> 태그에 데이타를 입력해서 스크롤을 이용할수 있도록 세팅을 한 후에 실험해야 한다.
| JQuery_[위치기반 필터 선택자] (0) | 2015.01.29 |
|---|---|
| JQuery_[ $.param() / serialize() ] (0) | 2014.08.26 |
| JQuery_[ $.extend() ] (0) | 2014.08.25 |
| JQuery_[ jQuery 속성선택자 ] (0) | 2014.08.22 |
| JQuery_[ li 리스트 항목 순서 변경하기 ] (0) | 2014.04.16 |
- JQuery $.extend() 메서드는 객체확장시 사용된다.
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
var object = {};
object.name = 'Daniel';
object.gender = 'Male';
object.part = 'Second Guitar';
});
</script>
이렇게 추가를 하게 될 떄, 추가 속성의 수가 적으면 문제가 되지 않지만, 속성의 수가 많으면 아주 불편해진다.
이럴때 사용.
또한, 첫번째 매개변수로 입력한 객체에 추가하여 합칠 때도 사용된다.
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
var object2 = { name: 'Daniel' };
$.extend(object2, {
gender: 'Male',
part: 'seCond Guitar'
});
var outPut = '';
$.each(object2, function (key, item) {
outPut += key + ': ' + item + '\n';
});
alert(outPut);
});
</script>
| JQuery_[ $.param() / serialize() ] (0) | 2014.08.26 |
|---|---|
| JQuery_[ Scroll 이벤트 ] (0) | 2014.08.25 |
| JQuery_[ jQuery 속성선택자 ] (0) | 2014.08.22 |
| JQuery_[ li 리스트 항목 순서 변경하기 ] (0) | 2014.04.16 |
| JQuery_[ 'undefined' 값 체크하기 ] (0) | 2013.11.05 |