Using jQuery
One of my concerns when developing mobile web applications, is the static data that should be loaded every time application is opened via web services and read from database which affects the performance of application and eat much bandwidth of user connection, especially if it large contents. One of simple and easy way to process data files is using jQuery in development, which streamlined the loading, parsing and manipulating the data files on client side.
In my previous article "Why not jQuery? it is Fast, powerful, cross browsers and easy to use framework.", I have introduced and described how to use jQuery in development and how it make easy to traverse, apply (CSS, effects), and binds actions to DOM element. While in this article, I will explain loading data from external files for more processing, so let us get started.
Loading external data files
If you want to interact with data outside of your current HTML file, jQuery has some excellent tools for doing these sorts of Ajax calls. Though Ajax is short for Asynchronous JavaScript and XML, you can access any type of data with Ajax.
Example html file structure:
Loading text Data:
To load a file with jQuery, you use the get function. jQuery.get() needs at least two parameters: the URL you want to load and the function to which you want jQuery to send the results to be handled. Here is a simple example for loading a text file:
The URL I have provided ("Data/Data.txt") is just the name of a file, which resides in Data folder. In this case, the file is text, but it could be a bit of HTML code or another type of content (XML or JSON).
Text data file contents:
Code:
Note:Every ".append("<rb />");" should be ".append("<br />");".
Final results:
Text Data Contents:
Loading & parsing XML or HTML Data:
The single principle behind jQuery is to write less code. The hard work is left to the library. When it comes to fetching and parsing XML, jQuery keeps things predictably simple.
Like the plain JavaScript example, we will be parsing the XML in an otherwise empty HTML file. However, in this case, we will load our XML straight from a file, which is a common situation. Make sure you have a file named data.xml containing the XML lines as the following inside Data directory:
To load and parse an XML or HTML file with jQuery, you use the get function. jQuery.get() needs at least two parameters: the URL you want to load and the function to which you want jQuery to send the results to be handled, as we did with text file. Here is a simple example for loading a xml file:
The URL I have provided ("Data/Data.xml") is just the name of a file, which resides in Data folder. In this case, the file is xml.
Code
XML Data Contents:
Loading & Parsing JSON Data:
You are not restricted to only loading simple files. You could include directory names or even a full URL. Whatever you load needs to be on the same domain that you are making the call on. For security reasons, browsers will not let you retrieve data from someone else’s site, even if that data is meant to be public. You can get around this by loading the file server-side and then accessing the local copy.
A special case exists that allows you to load data from another site. If the site provides JSON data and it allows you to specify a callback function in the URL, then you can load the data remotely using jQuery’s getJSON function. Here is the basic structure:
The URL I have provided ("Data/Data.json") is just the name of a file, which resides in Data folder. In this case, the file is xml.
The URL you send to the getJSON function needs to contain a question mark in place of the name of a function. Then jQuery will create a function and call your anonymous function (or named function, if you choose) from its new function.
Another way getJSON is different from get is in the type of data passed in the parameters to your callback function. Rather than the plain text returned to the URL, jQuery passes you parsed JSON in the form of a JavaScript object.
JSON data file contents
Code
Final results:
JSON Data Contents:
Conclusion
Building on top of jQuery can save you time and allow you to focus on higher-level issues with your mapping projects. You also get an added layer of complexity because you have one more piece of JavaScript to include in your HTML. Hopefully its benefits make up for this minor cost in loading time.
References
jQuery.get() method specification
jQuery.JSON() method specification
jQuery API Documentation
One of my concerns when developing mobile web applications, is the static data that should be loaded every time application is opened via web services and read from database which affects the performance of application and eat much bandwidth of user connection, especially if it large contents. One of simple and easy way to process data files is using jQuery in development, which streamlined the loading, parsing and manipulating the data files on client side.
In my previous article "Why not jQuery? it is Fast, powerful, cross browsers and easy to use framework.", I have introduced and described how to use jQuery in development and how it make easy to traverse, apply (CSS, effects), and binds actions to DOM element. While in this article, I will explain loading data from external files for more processing, so let us get started.
Loading external data files
If you want to interact with data outside of your current HTML file, jQuery has some excellent tools for doing these sorts of Ajax calls. Though Ajax is short for Asynchronous JavaScript and XML, you can access any type of data with Ajax.
Example html file structure:
Loading text Data:
To load a file with jQuery, you use the get function. jQuery.get() needs at least two parameters: the URL you want to load and the function to which you want jQuery to send the results to be handled. Here is a simple example for loading a text file:
The URL I have provided ("Data/Data.txt") is just the name of a file, which resides in Data folder. In this case, the file is text, but it could be a bit of HTML code or another type of content (XML or JSON).
Text data file contents:
Code:
Note:Every ".append("<rb />");" should be ".append("<br />");".
Final results:
Text Data Contents:
My Name is Mohamed Taman.
I am Systems Architect And Design Supervisor.
A JCP member, Speaker, Consultant, and Trainer.
Also I am Photographer
I am Systems Architect And Design Supervisor.
A JCP member, Speaker, Consultant, and Trainer.
Also I am Photographer
Loading & parsing XML or HTML Data:
The single principle behind jQuery is to write less code. The hard work is left to the library. When it comes to fetching and parsing XML, jQuery keeps things predictably simple.
Like the plain JavaScript example, we will be parsing the XML in an otherwise empty HTML file. However, in this case, we will load our XML straight from a file, which is a common situation. Make sure you have a file named data.xml containing the XML lines as the following inside Data directory:
To load and parse an XML or HTML file with jQuery, you use the get function. jQuery.get() needs at least two parameters: the URL you want to load and the function to which you want jQuery to send the results to be handled, as we did with text file. Here is a simple example for loading a xml file:
The URL I have provided ("Data/Data.xml") is just the name of a file, which resides in Data folder. In this case, the file is xml.
Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Files loading Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function(e) {
var spn = $('span').css("color","blue");
$.get("Data/Data.xml",function(xml){
spn.text("XML Data Contents:");
$("child", xml).each(function(i){
$('div').append(this.getAttribute("data")).append("<rb />");
});
});
});
</script>
</head>
<body>
<span></span>
<div></div>
</body>
</html>
Final results:XML Data Contents:
My Name is Mohamed Taman.
I am Systems Architect And Design Supervisor.
A JCP member, Speaker, Consultant, and Trainer.
Also I am Photographer
I am Systems Architect And Design Supervisor.
A JCP member, Speaker, Consultant, and Trainer.
Also I am Photographer
Loading & Parsing JSON Data:
You are not restricted to only loading simple files. You could include directory names or even a full URL. Whatever you load needs to be on the same domain that you are making the call on. For security reasons, browsers will not let you retrieve data from someone else’s site, even if that data is meant to be public. You can get around this by loading the file server-side and then accessing the local copy.
A special case exists that allows you to load data from another site. If the site provides JSON data and it allows you to specify a callback function in the URL, then you can load the data remotely using jQuery’s getJSON function. Here is the basic structure:
The URL I have provided ("Data/Data.json") is just the name of a file, which resides in Data folder. In this case, the file is xml.
The URL you send to the getJSON function needs to contain a question mark in place of the name of a function. Then jQuery will create a function and call your anonymous function (or named function, if you choose) from its new function.
Another way getJSON is different from get is in the type of data passed in the parameters to your callback function. Rather than the plain text returned to the URL, jQuery passes you parsed JSON in the form of a JavaScript object.
JSON data file contents
Code
Final results:
JSON Data Contents:
My Name is Mohamed Taman.
I am Systems Architect And Design Supervisor.
A JCP member, Speaker, Consultant, and Trainer.
Also I am Photographer
I am Systems Architect And Design Supervisor.
A JCP member, Speaker, Consultant, and Trainer.
Also I am Photographer
Conclusion
Building on top of jQuery can save you time and allow you to focus on higher-level issues with your mapping projects. You also get an added layer of complexity because you have one more piece of JavaScript to include in your HTML. Hopefully its benefits make up for this minor cost in loading time.
References
jQuery.get() method specification
jQuery.JSON() method specification
jQuery API Documentation
No comments :
Post a Comment