SolarReviewer_SIA2Finals PDF - System Integration & Architecture 2 Reviewer

Document Details

Uploaded by Deleted User

Tags

AJAX Fetch API JavaScript web development

Summary

This document provides a review of AJAX and Fetch API for use in web development. It discusses the advantages and pseudocode for both approaches. It is focused on the technical implementations described.

Full Transcript

SYSTEM INTEGRATION & ARCHITECTURE 2 REVIEWER Advantages:  Provides a cleaner and more modern AJAX interfac...

SYSTEM INTEGRATION & ARCHITECTURE 2 REVIEWER Advantages:  Provides a cleaner and more modern AJAX interface using Promises, leading to more readable and maintainable code. AJAX is a technique used in web development to send and receive data from a server asynchronously  Automatically parses JSON responses, without interfering with the display and behaviour of simplifying the handling of common data the existing page. It enables updating parts of a web formats. page with new data without reloading the entire  O ers a more straightforward syntax page. compared to XHR, reducing boilerplate code. Advantages of Ajax:  Provides more consistent and robust error  Allows data to be exchanged with the server handling mechanisms, including built-in asynchronously without reloading the entire support for handling network errors. page.  Pseudo Code:  Enables dynamic content updates, providing  fetch('/data_endpoint') a smoother and faster user experience..then(response => {  AJAX has been supported across browsers for if (!response.ok) { a long time, making it a reliable choice for throw new cross-browser compatibility. Error('Network response was not ok');  Supports complex requests and responses, } custom headers, and handling of various data return response.json(); formats like XML, JSON, etc. }).then(data => {  Pseudo Code: console.log(data);  var xhr = new XMLHttpRequest(); }).catch(error => { xhr.open('GET', // Handle errors '/data_endpoint', true); console.error('Fetch Error :-S', error); xhr.onreadystatechange = }); function() { 1. fetch() Function: Initiates an HTTP request to if (xhr.readyState === the specified URL XMLHttpRequest.DONE) { (‘https://api.example.com/data’). if (xhr.status === 200) { 2. Response Handling: // Request was .then(response => {…}): Handles the successful, handle the response response received from the server. console.log(xhr.responseText);  if (!response.ok) {…}: Checks if the } else { response was successful (status code console.error('Error 200-299). If not, it throws an error. occurred: ' + xhr.status);  return response.json(): Parses the } response body as JSON and returns it. } }; 3. Data Processing: // Send the request .then(data => {…}): Handles the xhr.send(); parsed JSON data received from the server. Fetch API  console.log(‘Data received:’, data): Fetch API is a modern JavaScript interface for Logs the received data to the console. fetching resources across the network. It provides a 4. Error Handling: more powerful and flexible way to make HTTP requests compared to the older XMLHttpRequest. .catch(error => {…}): Catches any Fetch API uses Promises to handle responses, errors that occur during the fetch allowing for cleaner and more readable operation (e.g., network issues or asynchronous code. It simplifies the process of failed requests). fetching resources like JSON data, images, or other  console.error(‘There was a problem…. files from a server, and it supports all standard HTTP methods (GET, POST, PUT, DELETE, etc.). Introduction to Github Di erence Between Git And GitHub Git GitHub Version Control - sometimes referred to as source control or GitHub is an web- revision control, keeps track of changes made Git is an distributed based platform which to a file or group of files over time so that you version control system helps git to host its may retrieve particular versions at a later (DVCS). repositories. time. Git will track the Github will helps you to GitHub changes in the tack the issue, pull projects that are made request, code review - a web-based platform that uses Git, a version by the developers. and so on. control system, to help developers manage and track changes in their code. It allows multiple people to collaborate on a project, track revisions, and contribute to code from GitHub is an web- Git works on command anywhere in the world. based graphical line(CLI). interface. Git GitHub is an remote Git works in the local - allows you to keep track of changes in your hosting service by machine of developers code over time. which other developers by which you can - This means you can always revert to a can accessible can pull commit changes, previous version if something goes wrong, and fetch the code create branches, compare di erent versions according to there merge code. need. Repositories - a central place where all the files for a project are stored. - Each repository can hold multiple files and folders, and it tracks the history of every change made. - Repositories can be public (accessible to everyone) or private (restricted access). Branches - crucial feature in GitHub that enable parallel development. You can create a branch to work on a new feature or fix a bug without a ecting the main codebase. Pull Requests - way to propose changes to a repository. When you submit a pull request, you’re asking the project maintainers to review and merge your changes into the main codebase. Markdown Basics: A Comprehensive Guide c. Nested Lists- Combine ordered and unordered lists. Markdown is a lightweight markup language that lets Format: you create formatted text using a simple syntax. It’s 1. Item 1 commonly used for README files, documentation, - Sub-item 1.1 and content on platforms like GitHub. - Sub-item 1.2 2. Item 2 Headings Headings are created by adding one to six # symbols Horizontal Lines- Create horizontal lines using three followed by a space. The number of # symbols or more dashes ---, underscores ___, or asterisks ***. determines the heading level. Format: Format: --- # H1 Heading ___ *** ## H2 Heading ### H3 Heading Blockquotes- Use > to create blockquotes. You can #### H4 Heading nest them by using additional > symbols. ##### H5 Heading Format: ###### H6 Heading > This is a blockquote. >> This is a nested blockquote. Text Formatting a. Bold- Use **text** or __text__ for bold text. Links- Use [text](URL) to create a hyperlink. Format: Format: [GitHub](https://github.com) **Bold Text** __Bold Text__ Images- Use ![alt text](URL) to embed images. b. Italic- Use *text* or _text_ for italicized text. Format: Format: *Italic Text* ![GitHub _Italic Text_ Logo](https://github.githubassets.com/images/modu les/logos_page/GitHub-Mark.png) c. Bold and Italic- Use ***text*** or ___text___ for bold and italic text. Format: ***Bold and Italic Text*** Tables- Use pipes | and hyphens - to create tables. ___Bold and Italic Text___ Format: | Column 1 | Column 2 | Column 3 | Lists |----------|----------|----------| a. Unordered List- Use *, -, or + followed by a space to create unordered list items. | Data 1 | Data 2 | Data 3 | Format: | Data 4 | Data 5 | Data 6 | * Item 1 * Item 2 * Sub-item 2.1 Code Blocks- Used to present code blocks. Use * Sub-item 2.2 triple backticks ``` to create code blocks. You can specify a language for syntax highlighting. b. Ordered List- Use numbers followed by a period for ordered list items. Format: Format: ```bash 1. Step 1 2. Step 2 echo "Hello, World!" 3. Step 3 ==============NOTHING FOLLOWS========== “cing ciripit tulang bajing kacapit kacapit kubulu pare bulu pare seuseukeutna uhh” Manifesting PASSado ngayong PASSko!

Use Quizgecko on...
Browser
Browser