Read XML and RSS with jQuery

[Ground 0]

To begin examining the basic technique for reading an XML file. To do this we use a very simple document and assume that is the page that hosts the data, both the XML file are on the same domain. Here is the XML document to be imported:

 <? Xml version = "1.0" encoding = "UTF-8"?>
 <guide>
   <guide>
	 Help <title> jQuery </ title>
	 <link> http://javascript.html.it/guide/more/168/guide-jquery/ </ link>
   </ Help>
   <guide>
	 <title> Guide Send Framework </ title>
	 <link> hhttp: //php.html.it/guide/more/195/guide-send-framework / </ link>
   </ Help>  
 </ Guides>

Here is the code needed imports, let's take a look:

$ (Document). Ready (function () {

   $. Ajax ({type: "GET", url: "guide.xml", dataType: "xml"
	
	 success: function (xml) {
	  
	   $ (Xml). Find ('help'.) Each (function () {
		
		 var title = $ (this). find ('title'). text ();
		 var link = $ (this). find ('link'). text ();
		 link_markup var = '<a <li> href="'+link+'" title="'+title+'-HTML.it">' + title + '</ a> </ li>';
		
		 $ (Link_markup). AppendTo ('# guides');
		
       });	  
     }
	 error: function (request, error, type_error) {alert (error + ':' + type_error);}
   });
 });

To complete the picture in the markup necessary to insert a bulleted list with id="guide" and this is very simple:

<ul #id="guide"> </ ul>

At this point we begin to examine the key elements of the script: when invoked, as the request is made, how to manage the data.

[Shutdown]

$ (Document).Ready ()

This event (which we have already discussed in the guide ), indicates that all elements of the DOM is accessible and provides a good time to invoke our script. Wait until the page is "ready" is a fairly established technique, in other words around the occurrence of this event we shall ensure that each DOM manipulation is successful. In our case, add entries to a bulleted list with id=guide and we want to be sure to find its place when we're going to try.

Making your request with $. Ajax ()

To launch the application ( XMLHTTPRequest ), we use well-known method $.ajax() . Some members have already discussed this feature, the most famous and important of jQuery. The following are some parameter with their description :

• type - It is the type of HTTP request, we have set 'GET'
• url - Here we see the name of the document to read
• dataType - Here we quote 'xml', indicating that the framework document type we expect to achieve. This choice is crucial, because it affects the object which is used to extract the data (soon we shall see what it is)
• success - This is known as " local event ", which allows us to define the actions to be carried out if the document is loaded without problems, soon get into the details of the code
• error - Here we determined that we will receive an error message in case something in the loading went wrong

[Mentos]

We expect in return a particular object as a parameter to our function, which in our case we called 'xml'. This is unusual because it gives us the tools to see the contents of the XML file easily. The first tool we use is the find () method, which allows us to obtain a collection of elements of a certain type, in our case all the elements <guide>. At this point we can simply loop through the elements <guide> construct using the each (). In this way we can define a behavior (a function) to be applied to each element of the collection. Let's see what happens in above case:

• every step of the cycle we can refer to the current item with $(this) ;
• for each element we look for the sub <title> and <link> with find() and extract the content using the method text() ;
• Finally, we build the markup for our point list and add the item <ul> we had marked with id="guide".

And then you are done. Returning to the choice of the same domain, as we know, this is dependent on a security policy (same origin policy) typical of JavaScript, but as we shall see in the next paragraphs, there are some simple method to take advantage of external services.

[DarenHawk]

The most common technique is to use external XML documents to create a proxy on our domain, or a server side script that makes a request and present the result to the client. The result is that our script in this case access to a resource that is on the same domain and therefore has no problem. Here's an example of proxying ASP.NET - C #, we call proxy.aspx :

<% @ Page Language = "C #"%>
 <% @ Import Namespace = "System.Net"%>

 <script runat="server">
     protected void Page_Load (object sender, EventArgs e)
     {
         string url = Request ["url"];
         string result = null;

         try
         {
             WebClient client = new WebClient ();
             result = client.DownloadString (url);
             Response.Write (result);
         }
         catch (Exception ex) {} // handle the error
     }
 </ Script>

Of course it is very simple, such as the spread of the header is missing the original, but already it may be useful for small examples. To obtain the external document simply call the page and pass the URL as a variable in the QueryString.

http://trail.com/proxy.aspx?url=altroserver.com/doc.xml