jQuery를 사용하여 Ajax 개발 단순화 Ajax development_jquery 시작하기

이 기사에서는 jQuery의 철학을 이해하고, 특징과 기능에 대해 논의하고, 몇 가지 Ajax 예제와 플러그인을 사용하여 jQuery를 확장하는 방법을 제공합니다.

1. jQuery란 무엇인가요?

jQuery는 2006년에 탄생했으며 John Resig가 만든 훌륭한 Javascript 라이브러리입니다. javascript 초보자이지만 DOM(Document Object Model) 및 Ajax의 복잡성을 시도하고 싶거나, javascript 전문가이지만 계속 반복하는 데 지쳤거나 다시 한번 맛없는 DOM 및 Ajax 스크립트의 경우 jQuery가 최선의 선택이 될 것입니다.

jQuery는 코드를 단순하고 간결하게 유지하는 데 도움이 됩니다. 더 이상 반복적인 루프나 DOM 호출 스크립트를 많이 작성할 필요가 없습니다. jQuery를 사용하면 최소한의 코드로 빠르게 핵심 사항을 찾고 아이디어를 표현할 수 있습니다.

jQuery의 철학은 실제로 매우 간단합니다. 간단하고 재사용이 가능합니다. 이 아이디어를 이해하고 동의하면 jQuery를 사용하여 프로그래밍을 얼마나 쉽고 즐겁게 만들 수 있는지 깨닫기 시작할 수 있습니다!

2. 몇 가지 간단한 개념

다음은 jQuery가 작성하는 코드에 어떤 영향을 미치는지 보여주는 간단한 예입니다. 페이지의 특정 영역에 있는 모든 링크에 클릭 응답 이벤트를 추가하는 등의 작업은 실제로 매우 간단합니다. 코드는 Listing1을 참조하세요.

목록 1. jQuery를 사용하지 않는 DOM 스크립팅

var external_links = document.getElementById('external_links');<BR>var links = external_links.getElementsByTagName('a');<BR>for (var i=0;i < links.length;i++) {<BR>  var link = links.item(i);<BR>  link.onclick = function() {<BR>    return confirm('You are going to visit: ' + this.href);<BR>  };<BR>}<br><br>如果使用jQuery的话实现如下：<br><br><STRONG>Listing 2. DOM scripting with jQuery</STRONG><br><br>$('#external_links a').click(function() {<BR>  return confirm('You are going to visit: ' + this.href);<BR>});<br><br><BR>很惊讶，是吧？使用jQuery的话，你可以很快找到关键点，并且只需要表达你需要表达的，<BR>而不需要罗里罗嗦。不需要对这些元素进行循环，click()函数可以处理好这一切。而且你不要谢太多的操作DOM的代码，<BR>你需要的仅仅是使用很少的字符定义你要找的那个元素。<br><br>来看一下这段代码是如何工作的，有点小技巧。首先，看到$()函数--jQuery里最有用的最强大的函数.大部分情况下,<BR>你使用这个函数从文档中选择元素.在这个例子中,使用这个函数传递带有一些级联样式表(Cascading Style Sheets,CSS)<BR>语法的字符串,jQuery可以很方便的找到这个元素.<br><br>如果你懂一点基本的CSS选择符的只是,我想这个语法应该看起来相当熟悉.在Listing2中,<CODE>#external_links用来寻找带有id为</CODE><CODE><BR>external_links的元素.接下来的空格表示jQuery要找到在</CODE><CODE>#external_links元素内的所有的<a>元素.用口语开表达的话有点费劲--<BR>用DOM脚本来写也挺麻烦,不过,在CSS里,没有比这个更简单的了.</CODE>

$() 함수는 CSS 선택기와 일치하는 모든 요소를 ​​포함하는 jQuery 객체를 반환합니다. jQuery 객체의 개념은 배열과 비슷하지만 많은 jQuery 함수를 포함할 수 있습니다. 예를 들어 Bind에 대한 클릭 함수를 호출할 수 있습니다. jQuery 개체의 각 요소에 대한 클릭 이벤트.

또한 모든 요소를 ​​jQuery 개체로 패키징하는 $() 함수에 요소 또는 요소 배열을 전달할 수도 있습니다. 적용할 수도 있습니다. 예를 들어, 이 기능을 사용하여 다음과 같이 이벤트를 로드할 수 있습니다.

window.onload = function() {<BR>  // do this stuff when the page is done loading<BR>};

jQuery를 사용하는 경우 다음과 같이 작성할 수 있습니다.

$(window).load(function() {<BR>  // run this when the whole page has been downloaded<BR>});<br><br>如你所知,等待一个窗口的加载是异常痛苦的,因为必须加载整个页面,包括页面上所有的图片. 某些情况下,你需要首先加载图片,<BR>但是大部分时候,你可能只需要看到一下超文本的标记(HTML).jQuery通过在文档上创建一个很特殊的事件ready来解决这个问题,<BR>使用方法如下:<br><br>$(document).ready(function() {<BR>  // do this stuff when the HTML is all ready<BR>});<BR>

이 코드는 문서 요소의 jQuery 개체를 생성한 다음 html DOM 문서가 준비되면 이 인스턴스를 호출합니다. 또한 이 함수는
진정한 jQuery 스타일 코드에서 호출할 수 있습니다. function 축약된 형태도 있습니다. 간단히 $() 함수에 함수를 전달하면 됩니다:

$(function() {<BR>  // run this when the HTML is done downloading<BR>});

지금까지 $() 함수를 사용하는 세 가지 방법을 보여 주었습니다. 네 번째 방법으로 문자열을 사용하여 요소를 생성할 수 있습니다. 결과는 이 요소를 포함하는 jQuery 개체입니다. 페이지에 단락 추가:

목록 3. 간단한 단락 생성 및 추가

	<BR>$('<p></p>')<BR>  .html('Hey World!')<BR>  .css('background', 'yellow')<BR>  .appendTo("body");<BR>

위의 예에서 볼 수 있듯이 jQuery에는 메서드 체이닝(메서드 체이닝)이라는 매우 강력한 기능도 있습니다. 또한 jQuery 객체를 반환합니다. 이는 jQuery 객체에서 여러 메서드를 호출해야 하는 경우 CSS 선택기를 반복적으로 작성할 필요가 없다는 것을 의미합니다.

$('#message').css('background', 'yellow').html('Hello!').show();<br><br><STRONG>3.jQuery让Ajax变得异常简单</STRONG><br><br>使用jQuery,Ajax恐怕不能变得再简单了. jQuery有一系列的函数,可以使简单的事情变得真正简单,让复杂的事情也能变得尽可能<BR>的简单.<br><br>Ajax的一个一般用法就是加载一段html代码到页面上的某一区域. 要实现这个,你只要简单的选中这个元素,然后使用load()函数.<BR>下面是个例子,用来更新一些统计信息.<br><br>$('#stats').load('stats.html');

일반적으로 서버 측 페이지에 일부 매개변수를 전달해야 할 수도 있습니다. jQuery를 사용하는 것은 매우 간단합니다. 물론, 필요한 경우 선택적 데이터 객체와 콜백 함수를 전달할 수 있습니다. Listing4는 데이터를 전송하고 콜백 함수를 사용하는 간단한 예입니다.

Listing 4. Ajax를 사용하여 페이지에 데이터 보내기

	<BR>$.post('save.cgi', {<BR>  text: 'my string',<BR>  number: 23<BR>}, function() {<BR>  alert('Your data has been saved.');<BR>});<BR>

복잡한 Ajax 코드를 원하는 경우 $.ajax() 함수를 사용하면 됩니다. 데이터 유형을 xml, html, script 또는 json으로 지정하면 jQuery가 자동으로 결과를 준비합니다. 이 데이터를 즉시 사용할 수 있습니다. 또한 <FONT face=新宋体>beforeSend</FONT>, <FONT face=新宋体>error</FONT>, <FONT face=新宋体>success</FONT> 및 <FONT face=新宋体>complete</FONT> 콜백 함수를 설정하여 사용자에게 Ajax 경험에 대한 보다 신속한 정보를 제공할 수 있습니다. Ajax 요청에 대한 시간 초과 또는 페이지의 "마지막 변경" 상태를 설정하기 위해 Listing5에서는 위에서 언급한 매개변수 중 일부를 사용하고 XML 문서를 가져오는 간단한 예를 보여줍니다.

Listing 5 . $.ajax()

	<BR>$.ajax({<BR>  url: 'document.xml',<BR>  type: 'GET',<BR>  dataType: 'xml',<BR>  timeout: 1000,<BR>  error: function(){<BR>    alert('Error loading XML document');<BR>  },<BR>  success: function(xml){<BR>    // do something with xml<BR>  }<BR>});<BR>

를 사용하여 복잡한 Ajax를 간단하게 만들었습니다.

XML 피드백을 성공적으로 받으면 HTML에서와 마찬가지로 jQuery를 사용하여 XML 문서를 탐색할 수 있습니다. 이렇게 하면 XML 파일을 조작하고 콘텐츠를 페이지에 통합하는 것이 매우 간단해집니다. 확장되고 xml 문서의 각 에 따라 목록(list) 항목이 페이지에 추가됩니다.

Listing 6. jQuery를 사용하여 XML 작업

	<BR>success: function(xml){<BR>  $(xml).find('item').each(function(){<BR>    var item_text = $(this).text();<br><br>    $('<li></li>')<BR>      .html(item_text)<BR>      .appendTo('ol');<BR>  });<BR>}