Load External File to an HTML Element Asynchronously using jQuery

Here I have used the jQuery AJAX method load() to show the external text file content to a DIV element.

Here is the load() method syntax:

$(html element).load(url,data,callback)

url: specify the path

data: use the data parameter to data to server

callback : to trigger a function after completion

Try out the below code to get more idea about this functionality.

Step 1: Place a text file in the root (say 'SampleText.txt') and add some content.

Step 2: Add this in the Head section.

   <script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

    function success()
    alert("data loaded successfully");

Step 3: Add this in the body section

h2>Click on the below button to load the content from external text file</h2></div>
<button>Load Content</button>


PFA the working application !!