Loading External Sources on jQuery

Security is one of the biggest challenges a developer should think about when building an Ajax based application. Although JavaScript can provide very impressive functions in an application, it's highly vulnerable to various exploits. These attacks are not just based on the fact that the website will be changed in fonts but these attacks can monitor and steal any data used in the application. Developers have to be careful when loading external sources as this can cause more harm than good because of attacks.

Because of security concerns, loading external sources in Ajax is highly discouraged. But this is just a practice and not an absolute as developers can still load external function. In fact, jQuery has provided a very impressive function in order to load an external source in the application.

The script in jQuery goes this way:

$(document).ready(function(){
$(function () {
$(”#content”).load(”website.html”);

Like most functions in jQuery it's very straightforward and useful in various Ajax based applications.

While there are no problems in coding in jQuery's side, the response of the application might not be the same. Using hash (#) in the application can actually become a bit confusing for the online application. The application will work as expected at first glance but it will become too obtrusive in the application.

A good solution to this problem is to change the script so that the JavaScript engine will properly identify the URL and effectively load them in the same document. To be specific, the function can be changed into this:

$(document).ready(function(){
$('#location').load($(this).attr('href'));
return false;

This modification will provide detailed information in the JavaScript engine of the proper data source. The target is also indicated which means the data will be loaded in the expected area.

Additional Source

The solution provided is a smart solution since it can easily load the external source without being too obtrusive. But this technique cannot be used again because there is a tendency that the JavaScript engine will interpret the data as the same. When this happens, developers should expect a bug in the application.

This doesn't mean that another external source is no longer possible in the online application. Developers can simply revert to the original coding in jQuery so that the JavaScript engine will detect another source to be loaded in the online application.

As already indicated, reverting to the original coding will mean the function will be obtrusive in the application. Developers have to accept this setting by making some changes on the application. The second source should not be frequently used compared to the first source. This can be challenging for developers because of the needs of their application but obtrusive functions should be prevented in the application. External sources have to be minimized for security purposes.

jQuery offers very impressive functions in creating an Ajax based application. Developers can take advantage of the functions provided by this library and make some changes as they see fit. Through customization, developers should create applications that were specifically created for their intended users.