Getting Started With jQuery

Getting Started With jQuery - Ajax The Basics

Written by Ian Elliot

Monday, 24 August 2015

Article Index
Getting Started With jQuery - Ajax The Basics
Promises and Ajax
Load & Where Next?

Page 3 of 3

There is another strange extra behavior.

You can specify a portion of the returned html data to be used, i.e. a page fragment. If you follow the URL with a space and then a jQuery selector the selector is applied to the data before it is assigned to the matched elements.

That is if you write

$("body").load("myData.txt #todaysData");

then the returned HTML is processed using $("#todaysData") and the result including the matched element.

For example if myData.txt contains;

<div id="todaysData"> Sample Text Sample Text </div> <div id="yesterdaysData"> Old Sample Text Old Sample Text </div>

then if you try:

$("body").load("myData.txt #todaysData", function(data){ alert(data); });

You will see that the entire file has been returned in data, but only the first div has been inserted between <body> and </body>.

Where Next?

This has been a first look at jQuery's Ajax methods.

To keep things simple we looked only at the get and very closely related methods.

This has the advantage that we can ignore the problem of what happens on the server side because we can simply assume that the data being retrieved is in a file which the sever can load and deliver.

However, we have to move on to consider the jQuery client interacting with a program - a PHP page say.

In this case we need to consider additional complications such as headers, MIME types, character encodings and so on.

In the next chapter we concentrate on the post method and how to send data from the client to the server using Ajax.

Summary

Before Ajax you could only load entire web pages. After Ajax you could load any file and process it to update the existing web page.
jQuery provides a standardized and improved Ajax API.
The simplest Ajax function is get which will return the contents of any file.
Get returns an enhanced promise object which allows you to process the data.
The promise that is returned also has the properties and methods of a normalized XMLHttpRequest object. This can be used to find out how the transaction was handled.
You can also set a data format, or have one deduced from the data and this modifies the way jQuery treats the data.
There are also specialized version of get getJSON(url) will retrieve a JSON object from the specified url and getScript(url) will retrieve a script from he specified url.
If all you want to do is add some HTML to the page then consider using the jQuery load function.

More Information

Just jQuery: The Core UI (I/O Press)

Just jQuery
Events, Async & AJAX

Is now available as a print book: Amazon

Also Available:

buy from Amazon

smallcoverjQuery

Advanced Attributes

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

or email your comment to: comments@i-programmer.info

JavaScript Canvas - Fetch API

Working with lower-level data is very much part of graphics. This extract from Ian Elliot's book on JavaScript Graphics looks at how to use typed arrays to access graphic data.

+ Full Story

JavaScript Jems - The Inheritance Tax

JavaScript should not be judged as if it was a poor version of the other popular languages - it isn't a Java or a C++ clone. It does things its own way. In particular, it doesn't do inheritance [ ... ]