CSE3150 Front-end Full Stack Development Notes

Module Overview
  • CSE3150 – Front-end Full Stack Development: Course covering core aspects of front-end development.
  • Key Topics: JavaScript core syntax, HTML DOM, AJAX, jQuery, Bootstrap for responsive design.
AJAX Overview
  • Definition: AJAX (Asynchronous JavaScript and XML) is a technique used for creating fast, dynamic web pages.
  • Functionality: Enables web pages to be updated asynchronously by exchanging small amounts of data with the server, avoiding full page reloads.
  • Examples of AJAX Applications: Google Maps, Gmail, YouTube, Facebook.
Advantages of AJAX

  • Increased Speed and Usability:

    • Ajax allows for data to be rendered without the need for a complete page refresh.
    • Reduces server traffic and speeds up the response time, eliminating the experience of a blank window during loading.

  • Asynchronous Calls:

    • Users can make requests and continue interacting with the page while waiting for data.
    • Implements lazy loading to enhance user experience by loading only the necessary content.

  • Reduced Bandwidth Usage:

    • Only requests the required data, improving load times and server performance.

  • Immediate Form Validation:

    • Offers real-time feedback during form filling, enhancing user interface and experience.
Disadvantages of AJAX

  • Security Concerns:

    • Open-source nature allows anyone to view the code, raising security issues.

  • SEO Limitations:

    • AJAX content is typically not indexed by search engines, making it less discoverable.

  • Debugging Difficulties:

    • Complex interactions can make debugging challenging.
    • Heavy reliance on JavaScript can limit compatibility with some browsers.

  • Bookmarking Issues:

    • Dynamic pages can cause difficulty in saving a specific state for later retrieval.
Communication Types
  • Synchronous Communication:
    • User waits for page reload on each action (traditional approach).
  • Asynchronous Communication with AJAX:
    • Users remain active on the page while waiting for data requests.
XMLHttpRequest Overview
  • Definition: A JavaScript object used to send HTTP requests to servers and receive data in response.
  • Role in AJAX: Fundamental for making asynchronous calls, handling data transfer in web applications.
  • Data Handling: Parses XML or JSON data received, integrating it seamlessly into the webpage.
AJAX Request Process
  1. Event Trigger: User interaction initiates an event handler.
  2. Request Creation: XMLHttpRequest object is created.
  3. Data Fetching: Request sent to server; data is retrieved.
  4. Callback Execution: Once data is received, a callback function processes and displays the data on the page.
Prototype Ajax Implementation

  • Using Prototype Library:

    • Simpler format for making AJAX requests.
    • Example syntax: new Ajax.Request("url", { option : value }).

  • Handling AJAX Responses:

    • Different outcomes of requests handled through event methods: onSuccess, onFailure, onException.
Creating POST Requests
  • Uses the same syntax as GET, but specifies method: "post". Allows transmission of data to the server through parameters.
AJAX Updater
  • Functionality: Fetches content from a URL and injects it into a specified HTML element.
  • Example Syntax: new Ajax.Updater("id", "url", { method: "get" }).
Avoiding AJAX Use
  • When Not to Use AJAX:
    • Actions related to navigation, or actions that could lead to complicated nested AJAX calls.
Advances in AJAX
  • Transition from XML to JSON: JSON (JavaScript Object Notation) has largely replaced XML due to its ease of use with JavaScript.
  • Introduction of jQuery: Facilitates AJAX and DOM manipulation for streamlined web development.
Practical Example of AJAX Application
  • Online Test Scenario:
  • Dynamic display of multiple choice questions, with feedback shown immediately after submission using AJAX, without the need to reload the entire page.