출처: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
Using Ajax
$("average", xml).text() -> 결과로 받은 xml에서 <average>XXX</average>를 찾아서 text 값을 가져온다.
딱히 구조(부모-자식)는 상관없는 듯.
기타 참고 사항.
ajax 사용 시 주의점
A very common problem encountered when loading content by Ajax is this: When adding event handlers to your document that should also apply to the loaded content, you have to apply these handlers after the content is loaded. To prevent code duplication, you can delegate to a function.
Example:
Now addClickHandlers is called once when the DOM is ready and then everytime when a user clicked a link with the class remote and the content has finished loading.
Note the $("a.remote", this) query, this is passed as a context: For the document ready event, this refers to the document, and it therefore searches the entire document for anchors with class remote. When addClickHandlers is used as a callback for load(), this refers to a different element: In the example, the element with id target. This prevents that the click event is applied again and again to the same links, causing a crash eventually.
Another common problem with callbacks are parameters. You have specified your callback but need to pass an extra parameter. The easiest way to achieve this is to wrap the callback inside another function:
Using Ajax
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>jQuery Starterkit</title> <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { // generate markup var ratingMarkup = ["Please rate: "]; for(var i=1; i <= 5; i++) { ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> "; } var container = $("#rating"); // add markup to container container.html(ratingMarkup.join('')); // add click handlers container.find("a").click(function(e) { e.preventDefault(); // send requests $.post("starterkit/rate.php", {rating: $(this).html()}, function(xml) { // format result var result = [ "Thanks for rating, current average: ", $("average", xml).text(), ", number of votes: ", $("count", xml).text() ]; // output result $("#rating").html(result.join('')); } ); }); }); </script> </head> <body> <h1>jQuery Getting Started Example - rate me</h1> <p>This example demonstrate basic use of AJAX. Click one of the links below to rate. The number of rating and the average rating will be returned from the serverside script and displayed.</p> <div id="rating">Container</div> </body> </html> |
딱히 구조(부모-자식)는 상관없는 듯.
기타 참고 사항.
ajax 사용 시 주의점
A very common problem encountered when loading content by Ajax is this: When adding event handlers to your document that should also apply to the loaded content, you have to apply these handlers after the content is loaded. To prevent code duplication, you can delegate to a function.
Example:
| function addClickHandlers() { $("a.remote", this).click(function() { $("#target").load(this.href, addClickHandlers); }); } $(document).ready(addClickHandlers); |
Now addClickHandlers is called once when the DOM is ready and then everytime when a user clicked a link with the class remote and the content has finished loading.
Note the $("a.remote", this) query, this is passed as a context: For the document ready event, this refers to the document, and it therefore searches the entire document for anchors with class remote. When addClickHandlers is used as a callback for load(), this refers to a different element: In the example, the element with id target. This prevents that the click event is applied again and again to the same links, causing a crash eventually.
Another common problem with callbacks are parameters. You have specified your callback but need to pass an extra parameter. The easiest way to achieve this is to wrap the callback inside another function:
| // get some data var foobar = ...; // specify handler, it needs data as a paramter function handler(data) { //... } // add click handler and pass foobar! $('a').click(function(){ handler(foobar); }); // if you need the context of the original handler, use apply: $('a').click(function(){ handler.apply(this, [foobar]); }); |
'프로그래밍 > Web' 카테고리의 다른 글
| [jQuery] Getting Started with jQuery 04 (0) | 2009.07.11 |
|---|---|
| [jQuery] Getting Started with jQuery 03 (0) | 2009.07.11 |
| [jQuery] Getting Started with jQuery 01 (0) | 2009.07.10 |
| [jQuery] How jQuery Works (0) | 2009.07.06 |
| [jQuery] jQuery로 작업하기, Part 1 (0) | 2009.07.01 |
