Using AJAX to Load External Data in jQuery

AJAX is a way for a web page to asynchronously load external content. That means, it can load content, without having to load the entire page. So you can update a page by loading content at different times, based usually upon some action of the end-user.

There are numerous ways to send a request for new content, and get content back from the server. You can do it as plain text/HTML, JSON (JavaScript Object Notation), and XML. Each has their positives and negatives. Personally, I like working with plain text/HTML and JSON data.

Using .load()

.load() has got to be one of the easiest methods jQuery ever came up with to load external data. There is one required parameter, and two optional parameters.

Required

The required parameter is the URL. This is the external file that we want to call to load. If it is is accessible via the web, it can be called. Although, I would seriously look at using only text types of files. This means: aspx, php, html, txt, and the sort. Examples would be like:

$('#content').load('about-us.html');
$('#info').load('info.txt');
$('#data').load('my-page.php');

Optionally, you can pass data to the file, so it will change the results. This is common if you are using a web application, and need different data – such as a list of employees, and you pass the employee number to know whose data to send back. Data passed to the URL, should be in a JavaScript Object as shown below:

var sortName = "lastName";
$('#data').load(
  'my-page.php',
  {
    'filenum': 1234,
    'sort': sortName,
    'start': $('#initial').val()
  }
);

The spacing shown is just to make it more readable for everyone involved. JavaScript and jQuery do not need this format, it is only for us

As you can see, we can pass in values, variables, or results from a jQuery selector.

Watch on YouTube

Using AJAX to Load External Data in jQuery was originally found on Access 2 Learn