New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Scott Fegette | Monday, March 24, 2014

Use jQuery Ajax to Load Remote Web Content

Use jQuery Ajax to load remote web content

What is Ajax?

Ajax stands for “Asynchronous JavaScript and XML,” a friendly term for when a webpage or application asks a server for new content, then displays it in the current page without having to reload. Although the X in Ajax originally stood for XML, the content being delivered often comes in a variety of forms today, including XML, HTML, JSON (JavaScript Object Notation), or just plain old text. Ajax content has become commonplace in modern web experiences, but writing the JavaScript required to actually load and display Ajax content by hand can still be a tedious process. And that’s where jQuery Ajax can step in to make your job easier.

How can jQuery help with Ajax content?

jQuery is a JavaScript library, which simplifies many tasks in JavaScript. It’s very popular with web designers and developers for dynamically updating a webpage’s Document Object Model (DOM), and changing its structure and content as needed.

Let’s dig into the basics of using jQuery to load Ajax content using a very simple example.

By Ray Villalobos | Saturday, April 07, 2012

Three tips to help you get started on a new web development project

View Source series table of contents as seen on lynda.com

Recently I received a message from a member inquiring about how I choose the topics I cover in my weekly View Source series. If you were to look at the index for View Source, it may look like unrelated topics, but all the tutorials do have a common thread—they were all made to focus on 10-minute tips that are useful to self-starters. For many years I designed websites, graphics, icons, and multimedia projects for a large newspaper and felt somewhat like a small cog in a really big engine. It was at that job that I learned how to code with HTML, CSS, and JavaScript, but ultimately I knew there was a lot more to making a site successful than coding. It’s those ‘other’ skills you need to be a success that I try to touch on as often as possible in my View Source entries.

Today’s blog entry stems from a post-newspaper job I was offered making a network of radio station websites from scratch. Since I have a natural love for learning, the thought of putting something brand new together was irresistible, but with knowledge of only the core trifecta (HTML, CSS, and JavaScript), I really needed to focus on what real-world techniques and skills I needed to accomplish this job.

What comes next? What skills do I have to develop ? What techniques do I have to learn? These are some of the questions I regularly asked myself when I was facing the radio station build, and questions I often ask myself now when I am coming up with View Source topics, so I wanted to share three things I learned in my early transition that helped me to move on and start a new project.

1. Analytics

One of the first things that caught my eye even while working as a small cog in the newspaper industry was analytics, and in particular, traffic patterns on web sites. My first experience with analytics was learning how to use a program called Urchin, which was the precursor to Google Analytics. Working in Urchin I learned that web sites, like most things, obey certain patterns. For example, web sites tend to have more traffic on weekdays than weekends, and traffic goes down dramatically on holidays. I learned that it’s important to track your web apps as soon as you launch them, and then to make your future plans are based on how people are interacting with your product.

One of my tasks I preformed on the radio station web site was to build a small 1-10 rating system feature that I didn’t think much about. The rating system worked by letting you give Kudos and ratings to your friends directly on your friend’s pages. It didn’t take me that long to program, and I had no real plans for doing much else with it, but people went nuts over the feature. Soon rating wars and a reciprocal rating requests (‘I’ll give you a 10 if you give me a 10′) starting breaking out as people wanted to make sure to always have a lot of votes and a perfect 10 rating. I didn’t see it coming, but using analytics to study the usage of the network allowed me to adjust my programming accordingly.

Learning how people use your products is even more important than your road map. Your users are the most important thing, so it’s very important to make sure you know how they’re using your product, and using analytics allows you to really track what is working (and what isn’t).

In this video from chapter two of the Google Analytics Essential Training course, author Corey Koberg discusses the concept of web analytics as not only a tool, but also a process.

2. Jumping into back-end technologies

On the web, developers talk about front-end versus back-end technologies. Front-end refers to technologies that execute on a user’s browser—the aforementioned HTML, CSS, and JavaScript are all front-end technologies. To build web sites that serve up different information to different users, you have to learn back-end languages, which tend to be more complicated. When I left my first job I already knew that no site gets built with only front-end technologies, so I started right away with PHP, which is still a great way to learn back-end development. PHP is a great language for solving problems. Do you need to submit a form? Talk to a database? Upload a File? These are all things PHP can make easy.

In the coming weeks, there’s going to be more discussion of back-end technologies on View Source. In this week’s episode, seen below, I focus on showing you how to parse XML from a YouTube channel.

Why YouTube? Building a YouTube Channel lets you tap into YouTube’s huge audience which views about three billion videos per day, and sees about 800 million unique visitors per month. Creating a YouTube channel is easy, free, and allows you to incorporate video into your site without any bandwidth costs.

3. Using jQuery and AJAX

One of the other technologies I committed myself to learning after leaving my newspaper job was jQuery. I wasn’t particularly interested in jQuery, but I was interested in what jQuery could do for sites through AJAX (Asynchronous JavaScript and XML). You see, there is a problem with JavaScript, and it’s the same problem that many web languages encounter—the way the language works on different platforms is inconsistent. This is really evident when you start working with AJAX as a way to have sites update content without reloads. jQuery takes care of the cross-platform issues and allows you to build things that would be really hard to do using only JavaScript. jQuery also helps your site feel modern and, because it handles cross-platform issues, it will make your life easier.

If you’ve got seven minutes, take a look at this View Source tutorial that shows you how to build a photo rotator using jQuery:

Every week, I plan on expanding the list of technologies featured in the View Source series, including a focus on mobile, CSS, CMS, and others. I will also continue to focus on tricks I’ve learned along the way, and emerging technologies like jQuery mobile. As always, if you have an idea for something you’d like covered, please feel free to let me know in the comments section below!

Interested in more? • The entire View Source weekly series • All developer courses on lynda.com • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:Mobile Web Design & Development FundamentalsGoogle Analytics Essential TrainingWeb Site Planning and Wireframing: Hands-On TrainingWeb Form Design Best Practices

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.