Let’s say we want to bring in external data into a webpage, without reloading a webpage.
This happens all the time. Facebook for example continually checks to see if other people have entered information, and displays it to your feed to read. Other sites may do this as well, pulling in testimonials, new email, and other relevant items.
Microsoft came up with this technology for their Outlook Web Access product. However different versions of IE, and other browsers use a different way to send information and request items. jQuery simplifies this for us because it checks the browser capabilities for us, and uses the method that will work for us, while requiring us to do nothing.
The easiest way to load external data is to use the load() method.
Assuming we have a HTML document, with jQuery already loaded, we would use something like:
$('#results').load('lipsum.txt');
This assumes that we have an HTML element with an id of results already on the page. Then, from the same website, we load in our external file. In this case, the file name needs to be in the same folder, and called lipsum.txt. jQuery requests this file, and then puts the contents of that file into our element.
The load() method is also nice in that if our content is HTML, it adds and displays the content correctly. However, it is not the only method available to us.
There are actually 4 different methods to pull data from the server.
- .ajax() – which is the most complicated of them.
- .get() – which is good for sending form info via the URL,
- .post() – which is good for sending form info via HTTP headers, and
- .json() – which gets JSON (JavaScript Object Notation) data to be parsed.
.get() and .post() are like the form methods when you need to send data. The only difference is that with .post() you can’t send a file like you could with a normal HTML form.
Get() and post() work similarly. I will show .get(), and you will know how .post() works.
get() basically requires two parameters, and has an optional third for all practical uses. The basic format is like:
$.get(filename, form parameters, return function(data));
The form parameters is what is sent to the file. It can be left off if you don’t want to send the file anything.
The filename is what will be requested from the server. The return function is what we do once the server sends us the file. You may have noticed data within its parentheses. This is the contents that is being sent back by the server.
The equivalent from the previous example using get() would be:
$.get('lipsum.txt', function(data) {
$('#results').html(data);
});
While it takes a little extra time to write it is functionally the same. The power is that if lipsum.txt wasn’t just a block of text to go into the web page, we could parse it out, and do more with it. For example, it might have two or three parts of a webpage to display, or it may display something to a popup alert box. We simply have more control over it.
The .html(txt) method used in the last example can also be simplified. With .html(), jQuery parses the text component and adds the HTML elements. This takes longer, especially for long pieces of text. Therefore, if we know that the text is plain text, we can use .text(data) to process the display faster for our end users.
Loading & Displaying External Files with jQuery was originally found on Access 2 Learn
