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?

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. 

 

 

Just jQuery
Events, Async & AJAX

Is now available as a print book: Amazon 

jquery2cover

 

Contents

  1. Events, Async & Ajax (Book Only)
  2. Reinventing Events
  3. Working With Events
  4. Asynchronous Code
  5. Consuming Promises
  6. Using Promises 
  7. WebWorkers
  8. Ajax the Basics - get
  9. Ajax the Basics -  post
  10. Ajax - Advanced Ajax To The Server
  11. Ajax - Advanced Ajax To The Client
  12. Ajax - Advanced Ajax Transports And JSONP
  13. Ajax - Advanced Ajax The jsXHR Object
  14. Ajax - Advanced Ajax Character Coding And Encoding 

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.

raspberry pi books

 

Comments




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

Banner


JavaScript Jems - Objects Are Anonymous Singletons

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, every object can be regard [ ... ]



JavaScript Canvas - Typed Arrays

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.


Other Articles



Last Updated ( Thursday, 05 May 2022 )