UNIT 2
b) Explain AJAX Architecture in detail with a diagram
Write short note on AJAX based web application architecture.
Ans:
● AJAX (Asynchronous JavaScript and XML) is a web development
technique used to create fast and dynamic web applications.
● It allows web pages to send and receive data asynchronously from
the server without requiring a full page reload. This improves user
experience by making web applications more responsive.
Components of AJAX Architecture
1. Client-Side (Browser):
○ The user interacts with the web page, triggering an event (e.g.,
clicking a button).
○ JavaScript and the XMLHttpRequest (XHR) object or Fetch
API handle asynchronous communication.
2. AJAX Engine:
○ Acts as an intermediary between the browser and the server.
○ Sends asynchronous requests to the server without refreshing
the page.
○ Receives responses from the server and updates the web page
dynamically.
3. Server-Side (Web Server):
○ The web server processes the AJAX request and
communicates with the database or backend.
○ It sends back the requested data (in formats like JSON or XML)
to the AJAX engine
Working:
1. The user interacts with the GUI, triggering a JavaScript call instead
of a direct request to the server.
2. The AJAX engine (running in the browser) handles the request
asynchronously.
3. The AJAX engine sends an HTTP request to the server in the
background, typically requesting or sending XML/JSON data.
4. The server processes the request and returns only the required
data (XML/JSON) instead of an entire HTML page.
5. The AJAX engine processes the response and updates only the
required parts of the web page dynamically, without reloading the
whole page.
C)Explain Async-await function with example
Async-Await Function in JavaScript
● Async-Await is a modern way to handle asynchronous operations in
JavaScript, making it easier to work with Promises and asynchronous
functions.
● It improves code readability by allowing us to write asynchronous
code in a synchronous style.
How Async-Await Works:
1. async function:
○ The async keyword is used before a function to make it
asynchronous.
○ An async function always returns a Promise.
2. await keyword:
○ The await keyword is used inside an async function to pause
execution until a Promise is resolved.
○ It helps avoid .then() chaining and makes the code cleaner.
Example:
async function display() {
let p = new Promise(
function(resolve, reject)
resolve("Good Morning");
});
[Link]("myid").innerHTML = await
p;
display();
How It Works Step by Step:
1. The async function display() is called.
2. The Promise p resolves immediately with "Good Morning".
3. await p waits for the resolved value.
4. The text content of the HTML element (myid) is updated with
"Good Morning".
5. The webpage displays "Good Morning" in place of the target
element.
Q4) a) Compare and contrast the traditional web application
architecture and AJAX based web application architecture.
Ans:
b) Write a JavaScript that reads an integer and displays whether it is
a prime number or not.
Ans:
C)List and explain the form selectors used in jQuery.
Ans:
1. :input – Selects all input elements, including <input>,
<textarea>, <select>, and <button>.
Example: $("form :input") selects all input fields inside a form.
2. :text – Selects all text input fields (<input type="text">).
Example: $(":text") selects all text input fields in the document.
3. :password – Selects all password input fields (<input
type="password">).
Example: $(":password") selects all password fields.
4. :checkbox – Selects all checkboxes (<input
type="checkbox">).
Example: $(":checkbox") selects all checkboxes.
5. :radio – Selects all radio buttons (<input type="radio">).
Example: $(":radio") selects all radio buttons.
6. :submit – Selects all submit buttons (<input type="submit">).
Example: $(":submit") selects all submit buttons.
7. :reset – Selects all reset buttons (<input type="reset">).
Example: $(":reset") selects all reset buttons.
8. :button – Selects all button elements (<input type="button">
and <button>).
Example: $(":button") selects all button elements.
9. :file – Selects all file input fields (<input type="file">).
Example: $(":file") selects all file upload fields.
10. :image – Selects all image input elements (<input
type="image">).
Example: $(":image") selects all image input fields.
