Your Ad Here

Posted By

chrisaiv on 02/05/09


Tagged

ajax xml jquery


Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

acristic
umang_nine
gtalmes
thastyle
robertvs
dubogii
wirenaught


jQuery: Simple Ajax XML Request + Event Handlers


 / Published in: ActionScript 3
 

Here is a basic example as to how to set up an Ajax request that will expect an XML return. For you code borrowers, you may have a hard time getting this to work with your own projects without understanding how JS, Ajax, and jQuery work.

  1. <style type="text/css" media="screen">
  2. .ajaxLoaderCircle{ background: transparent url("http://www.ajaxload.info") top center no-repeat; margin-top: 1em; height: 3em; }
  3. </style>
  4.  
  5. <!-- jQuery 1.3.1 Framework -->
  6. <script type="text/javascript" charset="utf-8" src="http://jqueryjs.googlecode.com/files/jquery-1.3.min.js"></script>
  7.  
  8. <script type="text/javascript" charset="utf-8">
  9. function getXML( url ){
  10. $.ajax({
  11. url: url,
  12. dataType: "xml",
  13. encoding:"UTF-8",
  14. beforeSend: xmlStart,
  15. success: xmlSuccess,
  16. error: xmlError,
  17. complete: xmlComplete
  18. });
  19. }
  20.  
  21. function xmlStart( xhrInstance ){
  22. //Clear Any Previously Written HTML
  23. $( "#primary .content" ).html( "" );
  24. //Show Preloader
  25. $( "#primary .content" ).addClass( "ajaxLoaderCSS" );
  26. }
  27.  
  28. function xmlError( xhrInstance, message, optional ){
  29. $("#primary .content").html("<ul><li>There was an error loading the document.</li></ul>");
  30. }
  31.  
  32. function xmlComplete( xhrInstance, status ){
  33. $( "#primary .content" ).removeClass( "ajaxLoaderCSS" );
  34. }
  35.  
  36. function xmlSuccess( data, status ){
  37. //Write your Parse XML Function
  38. parseXML( data );
  39. }
  40.  
  41. function parseXML( xml ){
  42. // XML Tag identifying each item
  43. var itemTag = "image";
  44. // XML Tag giving the title
  45. var titleTag = "caption";
  46. // XML Tag giving the link
  47. var urlTag = "uri";
  48. // Var for storing the HTML to be displayed
  49. var content = "<ul>";
  50.  
  51. //Parse the XML and build new <li>'s for each NODE
  52. $( xml ).find( itemTag ).each(function(){
  53. var title = $( this ).find( titleTag ).text();
  54. var url = $( this ).find( urlTag ).text();
  55. content += "<li><a href=\"" + url + "\">" + title + "</a></li>";
  56. });
  57.  
  58. content += "</ul>";
  59.  
  60. // Populate the Tertiary div with the content
  61. trace( content );
  62. }
  63. </script>
  64.  
  65. <script type="text/javascript" charset="utf-8">
  66. $(document).ready(function(){
  67. getXML("http://x-y-z");
  68. }
  69. </script>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: hdragomir on February 5, 2009

pretty extensive for a snippet, and quite handy. It is in the wrong section though :)

Posted By: fris on February 5, 2009

the whole site is snippets, no other sections

Posted By: chrisaiv on February 19, 2009

hdragomir,

This is pretty extensive but hey, once you master this, AJAX will prove to be a piece of pie. This code should be easy enough to re-purpose for JSON & Plain Text Requests.

You need to login to post a comment.