Developing Responsive Web Applications with AJAX and jQuery

Book description

Design and develop your very own responsive web applications using Java, jQuery, and AJAX

In Detail

AJAX is a web development technique that allows a web page to be updated with new information without having to reload the page. jQuery is a JavaScript library that harnesses AJAX interactions to allow rapid web development. Together, they are a powerful combination, and are generally considered by frontend web developers as technologies that complement each other perfectly.

Developing Responsive Web Applications with AJAX and jQuery will empower you with the skills required to create responsive web applications in a quick and efficient manner. The book begins by identifying the key benefits of a responsive application for a commercial site, and then covers how to develop a layout using Bootstrap 3 and adding dynamic visuals to your web application using AJAX calls.

By the end of this book, you will be able to develop responsive web applications by combining AJAX development techniques with the jQuery JavaScript library.

What You Will Learn

  • Build responsive, fluid layouts using Bootstrap 3
  • Create JSON data and integrate it with your web pages using AJAX calls
  • Integrate Twitter, Facebook, and Google+ into your application
  • Incorporate Google currency converter into your application
  • Fuse YouTube videos and third-party shopping carts to your application
  • Debug and test responsive web applications

Publisher resources

Download Example Code

Table of contents

  1. Developing Responsive Web Applications with AJAX and jQuery
    1. Table of Contents
    2. Developing Responsive Web Applications with AJAX and jQuery
    3. Credits
    4. About the Author
    5. About the Reviewers
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Introduction to a Responsive Web Application
      1. Benefits of a responsive design
      2. Server- versus client-side detection
      3. The technology stack
        1. HTML5
        2. CSS3 and media queries
        3. JavaScript
      4. Measuring responsiveness
      5. Devices and screens
      6. Media types
      7. Media queries
      8. Role of media queries
      9. Responsive frameworks
        1. Bootstrap
        2. The Foundation framework
        3. The Cascade framework
        4. The Pure CSS framework
        5. The Gumby framework
      10. Bootstrap 3 for a responsive design
      11. What are we building?
      12. Summary
    9. 2. Creating a Responsive Layout for a Web Application
      1. Required software and tools
      2. Setting up a Java-based web project
      3. Configuring Bootstrap 3
      4. Creating a wireframe for a web application
      5. Responsive layouts
      6. Creating a layout for large and small devices
      7. Developing the layout
        1. Bootstrap 3 containers
        2. Developing a row
        3. Developing the menu section
        4. Developing the hero section
        5. Developing the list of products section
      8. The combined layout
      9. Verifying the layout
        1. The Opera Mobile emulator
      10. Summary
    10. 3. Adding Dynamic Visuals to a Web Application
      1. Building a JSON servlet
        1. Creating a POJO class
        2. Creating a product store
        3. Converting from POJO to JSON
        4. Creating the servlet
      2. Building a jQuery AJAX method
        1. jQuery promises
        2. The jQuery templating mechanism
        3. The combined jQuery code
        4. The combined HTML markup
        5. Modifying the style of the product
      3. Building an image carousel
      4. Summary
    11. 4. Twitter Integration
      1. Introduction to Twitter4J
      2. Configuring Twitter4J in a web application
      3. Posting a tweet
        1. Creating a Twitter button
        2. Setting up a new Twitter application
          1. The Twitter Permissions tab
          2. The Twitter Details tab
          3. The Twitter Settings tab
          4. The Twitter API Keys tab
        3. Developing a Twitter servlet
          1. Request token
        4. Developing a Twitter callback servlet
          1. Access token
      4. Combining all the pieces
      5. Posting a tweet with an image
        1. Product store with an image
        2. Markup changes
        3. Changes in app.js
        4. Twitter servlet changes
        5. Changes in the Twitter callback servlet
        6. User Twitter timeline
      6. Summary
    12. 5. Facebook Integration
      1. Introduction to the Facebook SDK for JavaScript
      2. Creating a Facebook application
      3. Configuring the Facebook SDK
        1. The Settings tab
          1. The Basic configuration
          2. The Advanced configuration
          3. The Migrations configuration
      4. Configuring a Facebook login
      5. Configuring the Facebook Like and Share buttons
      6. Configuring Facebook comments
      7. The combined code
      8. Summary
    13. 6. Google+ Integration
      1. Introduction to the Google+ API
      2. Configuring Google+
        1. Creating a client ID
        2. Including the Google script
      3. Log in using Google+
      4. Integrating +1 recommendations
      5. Summary
    14. 7. Linking Dynamic Content from External Websites
      1. Introduction to the YouTube API
      2. Configuring a YouTube API
      3. Searching for a YouTube video
        1. The part parameter
        2. The fields parameter
        3. The YouTube button markup
        4. Asynchronous search in YouTube
        5. Rendering the YouTube search results
      4. Embedding a YouTube video
      5. Summary
    15. 8. Integrating E-Commerce or Shopping Applications with Your Website
      1. Creating a shopping cart
        1. Adding a product to the cart
        2. Displaying the minimal view of the cart
        3. Displaying the cart details in a table
      2. Configuring the PayPal Developer API
      3. Integrating the PayPal Developer API
      4. Configuring the Shopify API
      5. Integrating the Shopify API
      6. Summary
    16. 9. Integrating the Google Currency Converter with Your Web Application
      1. The Google Currency Converter API
      2. Configuring the Google Currency Converter API
      3. Integrating the Currency Converter API
      4. Developing our currency converter
        1. Building the currency list dropdown
        2. Processing the conversion request
      5. Exceptions
      6. Summary
    17. 10. Debugging and Testing
      1. Implementing the debugging mechanism
        1. Dimensions Toolkit
        2. The Designmodo Responsive Test tool
        3. The Opera Mobile emulator tool
        4. The Responsinator tool
        5. The Viewport Resizer tool
        6. The L-Square Responsive Design Inspector tool
        7. The FireBreak add-on
        8. The More Display Resolutions 1.0 add-on
        9. The BrowserStack Responsive tool
        10. The MobileTest tool
        11. The TestSize tool
        12. The Am I Responsive tool
        13. The Responsive Design Checker tool
        14. The RUIT tool
        15. The Responsive Test online tool
      2. Testing the app as a whole
      3. Summary
    18. Index

Product information

  • Title: Developing Responsive Web Applications with AJAX and jQuery
  • Author(s):
  • Release date: July 2014
  • Publisher(s): Packt Publishing
  • ISBN: 9781783286379