AJAX Basics: jQuery, APIs

Time to cross another course off of my list: AJAX Basics. Done.

AJAX is definitely no walk in the park, but it’s also a little bit less intimidating than it seemed when I first started this course. While there’s still some things I didn’t completely understand from the lecture-type videos, I was able to complete this course and it’s DIY challenges without a headache. Win.

jQuery and AJAX

We revisited the Office Status project from the previous section. Nothing changed in the details of the project except changing the vanilla JavaScript to jQuery. And, once again, the challenge for this project was to add AJAX for the room numbers, this time using jQuery.

Challenge

The challenge

Office Status Code

My code

Office Status

AJAX and APIs

API stands for Application Programming Interface.

We used Flickr’s API to build an app that lets you click on a button with a type of animal (cat, dog, or moose) and AJAX displays recent photos with the appropriate tag.

The big challenge this time was to change the code to use a search form field instead of the pre-selected animal buttons from before.  To do this, I had to replace the button’s click event handler with a form submit handler. Since I’m using AJAX, I don’t want the submit button to open up a new HTML page which means preventing the browser’s default action.

Screenshot 2015-01-25 17.06.52

Should you choose to accept it…

Workspaces

My code

I was able to complete the challenge with my own knowledge once again! By now, I shouldn’t be surprised that I was able to handle it, but I spent most of the lecture-type videos scratching my head going “WTH?!” I may not completely understand everything about AJAX, but I can create working code which is still pretty awesome in my book.

After the challenge, I added a change to the submit button that changes its text to “searching…” after you hit submit and switches back to its original text when the AJAX request is over.

Flickr API

It’s Always Cold In Chicago

jQuery definitely helps to make working with AJAX easier (which is great becuase jQuery is here to make our lives easier) and I feel like I’m really starting to get the hang of using jQuery, especially with extra practice using CodeSchool’s Try jQuery course.


Now, all I’ve got left are Console Foundations and Git Basics before I complete this track. Wish me luck!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s