Get Data from External File with jQuery Ajax Method

With jQuery, this is rather easy to GET data from external file by using the Ajax method.  Actually I already discussed how to use jQuery to read an external text database with jQuery.get() method long time ago. The Ajax method is just another method to do the same way.

Let’s use some very simple example to illustrate how to get data from external file (text file and XML file) with Ajax method. The first two examples show how to get data from external text file, and the third example shows how to get data from external XML file.

Example 1: Get Data from External Text File

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Get Data with Ajax Method - Example 1</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(document).ready(function( ){
            $.ajax({
            type: "GET",
            url: "message.txt",
            success: callback
            });
        });

        function callback(data, status)
        {
            $("#test").text(data);
        }
    </script>
<head>
<body>
<h1>Get Data with Ajax Method</h1>
<div id="test"></div>
</body>
</html>

The above example can be explained with the diagram below:

When the above webpage is opened, the contents of the external file (message.txt) will be loaded into the DIV layer.

Download:

Please click here to download Ajax Example 1.

Example 2: Get Data from External Text File

The above example is a very standard code structure of a jQuery method that calling a function. There is a much simpler structure:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Example 1</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(document).ready(function( ){
            $.ajax({
            type: "GET",
            url: "message2.txt",
            success: function(data, status) {
                $("#test").text(data);
            }
            });
        });

    </script>
<head>
<body>
<h1>Get Data with Ajax Method</h1>
<div id="test"></div>
</body>
</html>

The code structure is actually similar to example 1 but much simpler:

When the above webpage is opened, the contents of the external file (message2.txt) will be loaded into the DIV layer in the same way.

Download:

Please click here to download Ajax Example 2.

Example 3: Get Data from External XML File

XML files are mainly use to store data in a set format. The following XML file (cdCatalog.xml) will be used in this example:

<?xml version="1.0" encoding="windows-1252"?>
<catalog>
    <cd>
        <title>Greatest Hits</title>
        <artist>Dolly Parton</artist>
        <price>9.90</price>
        <year>1982</year>
    </cd>
    <cd>
        <title>One night only</title>
        <artist>Bee Gees</artist>
        <price>10.90</price>
        <year>1998</year>
    </cd>
    <cd>
        <title>When a man loves a woman</title>
        <artist>Percy Sledge</artist>
        <price>8.70</price>
        <year>1987</year>
    </cd>
    <cd>
        <title>For the good times</title>
        <artist>Kenny Rogers</artist>
        <price>8.70</price>
        <year>1995</year>
    </cd>
</catalog>

Here’s how to get the data from the XML file (cdCatalog.xml) with Ajax Method.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Get Data from XML File with Ajax Method</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(document).ready(function( ){
            $.ajax({

                url: "cdCatalog.xml",
                cache: false,
                dataType: "xml",
                success: function(xml, status){
                    $("#test").text($(xml).find('catalog').text());
                }

            });
        });

    </script>
<head>
<body>
<h1>Get Data from XML File with Ajax Method</h1>
<div id="test" style="width:400px;"></div>
</body>
</html>

Actually, the syntax is the same.

When the webpage is opened, the contents of the external XML file (cdCatalog.xml) will be loaded into the DIV layer.

Download:

Please click here to download Ajax Example 3.

This jQuery post discussed how to get data from external text file and XML file with jQuery Ajax Method.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>