- Web Development: jQuery, AJAX, and Templating

Web Development: jQuery, AJAX, and Templating

Using jQuery in Website Code

While using jQuery on jsFiddle is as easy as selecting its name using the dropdown menu, implementing the same library in the traditional website development process involves slightly more work. In short, the following processes must take place:

  • Explicit connection must be made beween the HTML code and the jQuery library
  • JavaScript code must provide an event handler to detect when the browser has finished loading

Explicit Connection

Just as one can link a CSS file using the <link> tag placed in the <head> section, JavaScript files can be connected to the HTML file using the <script> tag.

    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="" type="text/javascript"></script>
    <script src="js/script.js" type="text/javascript">

Note that the jQuery official website provides a remotely-hosted version of the jQuery library. A separate file designed to house one's own JavaScript code must be created and linked as well.

Event Handler

While jsFiddle, as a sandbox code editor, launches all JavaScript code immediately upon clicking on "Run." When using jQuery in the traditional workflow, however, the programmer must manually set the JavaScript code to launch when the browser has finished loading.

    alert("Page finished loading!");

Note that the JavaScript code is "wrapped" by an event handler that targets the HTML document itself. As the name suggests, the above snippet simply waits until the browser has finished loading, and launches the rest of the code.


With JavaScript, programmers found a way to develop more dynamic website experiences. Whether it be an infinite scrolling feature on Pinterest or Twitter's auto-refresh timeline, the feature where websites can load additional content without reloading the browser is called AJAX: Asynchrnous JavaScript and XML (XML is a technology closely related to HTML, designed for exchanging structured data). As a popular JavaScript technique, AJAX allows the browser to exchange data with the server without the user's explicit consent, and inject loaded data into select parts of the layout.

Timeline: History of AJAX

  • 1998: Microsoft develops a basic model of XMLHTTP, where the application can call for additional data without reloading the page, and implements only in its products: Internet Explorer and Outlook
  • Early 2000s: Mozilla develops a JavaScript-accesible version of Microsoft's technology, which becomes a de facto standard
  • 2005: Google embraces Mozilla's implementation and releases various web applications such as Gmail and Google Maps built on the same technology; Columnist Jesse James Garrett coins the name "AJAX" in the article titled "Ajax: A New Approach to Web Applications"
  • 2006: The W3C publishes a first working draft for XMLHTTP, standardizing the technique for mass adoption

Same Origin Policy

As AJAX allows the programmer to load data without the user's consent, a number of security features have been created in order to protect users. Dubbed "Same Origin Policy," this implementation forces the browsers to only load pages that exist on the same domain (ex., port, and protocol (ex. https). This policy, however, can be (and has been) relaxed once there is an explicit consent established between the user, the website code, and the data provider.

Templating System with AJAX

When using only HTML and CSS to build a multipage website, one faces a problem of redundancy: a specific code snippet may be repeated in multiple pages, and this can cause the website to be rather difficult to organize. In addition, the programmer may find oneself repeating a mistake or an error throughout the website as well.

As AJAX allows the browser to communicate with the server directly and inject content into the layout, the technique allows for modularization. Using AJAX, the programmer can identify common, shared elements in the website code and save them as separate modules that are loaded and injected as necessary using JavaScript. In addition to minimizing redundancy, this approach also allows the resultant website code to be much more readable and organized, especially if the website happens to be complex in structure.