Scribd
Upload
19 views27 pages

IP Sem 5 Imp

The document compares various web technologies including HTML, XML, SOAP API, REST API, and Django framework, highlighting their characteristics and use cases. It also discusses concepts like cross-browser compatibility, AJAX application models, and JSON mashups. Additionally, it explains features of HTML5 such as the <canvas> element and geolocation, as well as the benefits of using JSON over XML.

Uploaded by

kadamaditya202
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views27 pages

IP Sem 5 Imp

The document compares various web technologies including HTML, XML, SOAP API, REST API, and Django framework, highlighting their characteristics and use cases. It also discusses concepts like cross-browser compatibility, AJAX application models, and JSON mashups. Additionally, it explains features of HTML5 such as the <canvas> element and geolocation, as well as the benefits of using JSON over XML.

Uploaded by

kadamaditya202
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

HTML XML

It was written in 1993. It was released in 1996.


HTML stands for Hyper Text Markup XML stands for Extensible Markup Language.
Language.
HTML is static in nature. XML is dynamic in nature.
It was developed by WHATWG. It was developed by Worldwide Web
Consortium.
It is termed as a presentation language. It is neither termed as a presentation nor a
programming language.
HTML is a markup language. XML provides a framework to define markup
languages.
HTML can ignore small errors. XML does not allow errors.
It has an extension of .html and .htm It has an extension of .xml
HTML is not Case sensitive. XML is Case sensitive.
HTML tags are predefined tags. XML tags are user-defined tags.

SOAP API REST API


Relies on SOAP (Simple Object Access Relies on REST (Representational State
Protocol) Transfer) architecture using HTTP.
Transports data in standard XML format. Generally transports data in JSON. It is based
on URI. Because REST follows stateless
model, REST does not enforces message
format as XML or JSON etc.
Because it is XML based and relies on It works with GET, POST, PUT, DELETE
SOAP, it works with WSDL
Works over HTTP, HTTPS, SMTP, XMPP Works over HTTP and HTTPS
Highly structured/typed Less structured -> less bulky data
Designed with large enterprise Designed with mobile devices in mind
applications in mind

Class Id
We can apply a class to various elements The Id is unique in a page, and we can only
so that it could be numerous times on a apply it to one specific element.
single page.
The class is assigned to an element and its The name of the Id starts with the "#" symbol
name starts with "." followed by the name followed by a unique id name.
of the class.
We can attach multiple class selectors to We can attach only one ID selector to an
an element. element.
Syntax: Syntax:
.class{ #id{
// declarations of CSS // declarations of CSS
} }
1) Explain <Canvas> element in HTML5
The <canvas> tag in HTML is used to draw graphics on a web page using JavaScript. It can be
used to draw paths, boxes, texts, gradients, and adding images. By default, it does not
contain borders and text.

<canvas id = "script"> Contents... </canvas>


Attributes: The tag accepts two attributes as mentioned above and described below.
height: This attribute is used to set the height of the canvas.
width: This attribute is used to set the width of the canvas.
Example:-

➢ <!DOCTYPE html>
➢ <html>
➢ <body>
➢ <!-- canvas Tag starts here -->
➢ <canvas id = "GeeksforGeeks" width = "200"
➢ height = "100" style = "border:1px solid black">
➢ </canvas>
➢ <!-- canvas Tag ends here -->
➢ </body>
➢ </html>

2) Reasons to choose JSON over XML


1. JSON requires less tags than XML – XML items must be wrapped in open and
close tags whereas JSON you just name the tag once

2. Because JSON is transportation-independent, you can just bypass the


XMLHttpRequest object for getting your data.
3.JavaScript is not just data – you can also put methods and all sorts of goodies in JSON
format.
4.JSON is better at helping procedural decisions in your JavaScript based on objects
and their values (or methods).
5..You can get JSON data from anywhere, not just your own domain. There’s no more
proxy server nonsense.
6.Yahoo has a really good .

7.JSON is easier to read than XML – Obviously a personal preference


3) Explain UDDI.
• UDDI is an XML-based standard for describing, publishing, and finding web
services.
• UDDI stands for Universal Description, Discovery, and Integration.
• UDDI is a specification for a distributed registry of web services.
• UDDI is a platform-independent, open framework.
• UDDI can communicate via SOAP, CORBA, Java RMI Protocol.
• UDDI uses Web Service Definition Language(WSDL) to describe interfaces to
web services.
• UDDI is seen with SOAP and WSDL as one of the three foundation standards of
web services.
• UDDI is an open industry initiative, enabling businesses to discover each other
and define how they interact over the Internet. UDDI has two sections −
• A registry of all web service's metadata, including a pointer to the WSDL
description of a service.
• A set of WSDL port type definitions for manipulating and searching that
registry.
UDDI is a platform-independent, open framework. UDDI can communicate via SOAP,
CORBA, Java RMI Protocol. UDDI uses Web Service Definition Language(WSDL) to
describe interfaces to web services. UDDI is seen with SOAP and WSDL as one of the
three foundation standards of web services.
UDDI Benefits
Any industry or businesses of all sizes can benefit from UDDI
Before UDDI, there was no Internet standard for businesses to reach their customers
and partners with information about their products and services. Nor was there a
method of how to integrate into each other's systems and processes.
Problems the UDDI specification can help to solve:
• Making it possible to discover the right business from the millions currently
online
• Defining how to enable commerce once the preferred business is discovered
• Reaching new customers and increasing access to current customers
• Expanding offerings and extending market reach
• Solving customer-driven need to remove barriers to allow for rapid
participation in the global Internet economy.
4) Explain Geo-location and media query with an example in HTML5
and CSS3.
Geo-location in HTML5 is used to share the location with some websites and be aware of
the exact location. It is mainly used for local businesses, restaurants, or showing locations
on the map. It uses JavaScript to give latitude and longitude to the backend server. Most of
the browsers support Geolocation API. Geo-location API uses a global navigator object
which can be created as follows: Syntax: var loc = navigator.geolocation
Geolocation Methods: The Geolocation has following methods which make it interesting
and easier to work.

• getCurrentPosition(): It fetches the current location of the user.


• watchPosition(): It fetches periodic updates of the user’s current location.
• clearWatch(): It cancels a watchPosition call currently in execution.

Example: In this example, we simply display the current location with the help of latitude
and longitude via HTML Geolocation.

• HTML
• <!DOCTYPE html>
• <html>
• <body>
• <p>Displaying location using Latitude and Longitude</p>
• <button class="geeks" onclick="getlocation()">
• Click Me
• </button>
• <p id="demo1"></p>
• <script>
• var variable1 = document.getElementById("demo1");
• function getlocation() {
• navigator.geolocation.getCurrentPosition(showLoc);
• } function
• showLoc(pos) {
• variable1.innerHTML =
• "Latitude: " +
• pos.coords.latitude +
• "<br>Longitude: " +
• pos.coords.longitude;
• }
• </script>
• </body>
• </html> Output:
The Media query in CSS is used to create a responsive web design. It means that the view of
a web page differs from system to system based on screen or media types. The breakpoint
specifies for what device-width size, the content is just starting to break or deform.

Media queries can be used to check many things:

• width and height of the viewport


• width and height of the device
• Orientation
• Resolution

A media query consist of a media type that can contain one or more expression which can
be either true or false. The result of the query is true if the specified media matches the
type of device the document is displayed on. If the media query is true then a style sheet is
applied.
Example: This example illustrates the CSS media query with the different devicewidth for
making it responsive.

• HTML
• <!DOCTYPE html>
• <html>
• <head>
• <title>CSS media query</title>
• <style> body { text-align: center;
• }
• .gfg {
• font-size: 40px;
• font-weight: bold;
• color: green;
• }
• @media screen and (max-width:800px) {
• body { text-align: center;
• background-color: green;
• } .gfg {
• font-size: 30px;
• font-weight: bold;
• color: • background-color:
• white; blue;
• } .geeks • }
• { color: white; • }
• } • </style>
• } • </head>
• @media screen and (max-width:500px) {
• body { text-align: center;
5) Explain features of Django Framework
Django is a web application framework written in Python programming language. It is based
on MVT (Model View Template) design pattern. The Django is very demanding due to its
rapid development feature. It takes less time to build application after collecting client
requirement. Features of Django:-
1. Rapid Development
2. Secure
3. Scalable
4. Fully loaded
5. Versatile
6. Open Source
7. Vast and Supported Community
Rapid Development:-Django was designed with the intention to make a framework which
takes less time to build web application. The project implementation phase is a very time
taken but Django creates it rapidly.

Secure:-Django takes security seriously and helps developers to avoid many common
security mistakes, such as SQL injection, cross-site scripting, cross-site request forgery etc.
Its user authentication system provides a secure way to manage user accounts and
passwords.

Scalable:-Django is scalable in nature and has ability to quickly and flexibly switch from
small to large scale application project.
Fully loaded:-Django includes various helping task modules and libraries which can be used
to handle common Web development tasks. Django takes care of user authentication,
content administration, site maps, RSS feeds etc.
Versatile:-Django is versatile in nature which allows it to build applications for different-
different domains. Now a days, Companies are using Django to build various types of
applications like: content management systems, social networks sites or scientific
computing platforms etc.

Open Source:-Django is an open source web application framework. It is publicly available


without cost. It can be downloaded with source code from the public repository. Open
source reduces the total cost of the application development.
Vast and Supported Community:-Django is an one of the most popular web framework. It
has widely supportive community and channels to share and connect.
6) Cross Browser Compatibility
1. Cross-browser means a website works in any browser and any version of the
browser, being used.
2. The goal of cross browser compatibility is to make website viewable in the major
browsers available and have the pages render correctly.
3. But variety of browsers and different versions of the same browser fail to support
various design techniques, which complicates cross-browser compatibility even
further.
4. Inconsistent views across multiple browsers can create cross-browser
compatibility issues. Cross-browser compatibility issues are caused by errors
within the website code.
5. Most of the cross-browser compatibility issues are cosmetic in nature as they only
affect the view of web page not the function of the website.
• Some commonly occurring cross-browser compatibility issues are as follows o
Image border – sometimes browser adds borders to the images, even
though they are not present around the image while looking in any other
browser.
• Image rendering – some browsers render resized images in an extremely poor
manner which causes image blocky and edgy.
• Expanding box – if the content of text or images don’t fit in the given length
and width of the box then box size expands to fit the content.
• Fonts – some fonts only compatible with the web pages such as Arial, Georgia
etc. and some are not compatible like Arial Narrow. So font type must be
chosen appropriately.
• Font rendering – different browser render font in a different manner. Such as
light type on dark background.
• Font size – different browsers and operating systems resize text differently.
• Margins inconsistencies – different browser have their different values and
view of elements such as different values for padding, borders and margins,
because of this view of website differ on different browser.
6. For creating cross-browser compatible website following points must be taken
into consideration o Use only standard complaint code.
7. Don’t use browser specific HTML tags and features.
8. Validate web pages using w3c validator. Some tools like Browser Shots and Adobe
Browser Lab are also useful for checking cross browser compatibility.
7) Draw the diagram of AJAX application model and
traditional application web model and compare them.
• AJAX Wen application model uses JavaScript and XMLHttpRequest object for
asynchronous data exchange. The JavaScript uses the XMLHttpRequest object to
exchange data asynchronously over the client and server.
• AJAX Web application model resolve the major problem of synchronous
requestresponse model of communication associated with classical Web application
model, which keeps the user in waiting state and does not provide the best user
experience.
• AJAX, a new approach to Web applications, which is based on several technologies
that help in developing applications with better user experience. It uses JavaScript
and XML as the main technology for developing interactive Web applications.

• The AJAX application eliminates the start-stop-start-stop nature or the click, wait,
and refresh criteria of the client-server interaction by introducing intermediary layer
between the user and the Web server.
• Traditional Web Applications are those applications that perform most of the
application logic on the server side. They consist of a Web browser on the client side
and a Web server (Apache HTTP Server). Ex: static web HTML pages.
• Traditional web apps should be used for creating web applications that must work in
browsers that support JavaScript just partially or not at all.
Some Features Of Traditional Web Applications:
1. They are used when our application has straightforward client-side requirements
that may be read-only.
2. Traditional Web Applications should be utilized when our applications must run in
browsers that do not support JavaScript.
3. Minimal Client-Side Application Behavior.
8) Architecture of JSON Mashups

1. Flow of JSON mashups that use Dynamic Script method goes as follows:
2. The flow of the process starts with the browser sending request to the server by using
HTTP GET.
3. The Web Server responds with a page that includes the following couple of important
JavaScript functions:
4. A parsing function that expects JavaScript objects to be parameters.
5. The Dynamic Script method is the core of the initiation script through which a new script
tag is added to the page, specifying the source for that script tag to be the Uniform
Resource Locator (URL) at some partner site.
6. The source code for the new script tag gets loaded by the browser.
7. Amazon receives an HTTP Get request sent from the browser using the loaded script.
8. A JavaScript object, after being serialized into a JSON Object, is served by the partner
site.
9. A function call to the render function wraps the JSON script, and the JavaScript entirely
becomes the content for the script tag.
10. The new piece of JavaScript is tried for execution by the browser, which calls the render
method from step 3.
11. The server invokes the render method and evaluates the JSON script, which is converted
into a JavaScript object. The data contained in the render method is pushed into the
page after the render method, which uses the new JavaScript object in its execution.
9) Extensible Markup Language (XML)
Extensible Markup Language (XML) is a markup language that defines a set of rules for
encoding documents in a format that is both human-readable and machine-readable. The
design goals of XML focus on simplicity, generality, and usability across the Internet. It is a
textual data format with strong support via Unicode for different human languages.
Although the design of XML focuses on documents, the language is widely used for the
representation of arbitrary data structures such as those used in web services.
1. XML stands for extensible Markup Language
2. XML is a markup language like HTML
3. XML is designed to store and transport data
4. XML is designed to be self-descriptive
EXAMPLE :

• XML code for a note is given below


• <pre><note>
• <To>RAJ</to>
• <From>RAVI</from>
• <heading>Reminder</heading>
• <body>Meeting at 8am</body>
• </note>
• </pre>

10) Document Type Definition (DTD)


A Document Type Definition (DTD) describes the tree structure of a document and
something about its data. It is a set of markup affirmations that actually define a type of
document for the SGML family, like GML, SGML, HTML, XML. A DTD can be declared inside
an XML document as inline or as an external recommendation. DTD determines how many
times a node should appear, and how their child nodes are ordered.
There are 2 data types, PCDATA and CDATA

• PCDATA is parsed character data.


• CDATA is character data, not usually parsed.

Syntax:

• <!DOCTYPE element DTD identifier


• [ first declaration second declaration . . nth declaration
• ]>
11) XML document with an external DTD:
• XML
• <?xml version="1.0"?>
• <!DOCTYPE address SYSTEM "address.dtd">
• <address>
• <name>
• <first>Rohit</first>
• <last>Sharma</last>
• </name>
• <email>[email protected]</email>
• <phone>9876543210</phone>
• <birthday>
• <year>1987</year>
• <month>June</month>
• <day>23</day>
• </birthday>
• </address>

12) The Three Tiers in a Three-Tier Architecture


1. Presentation Tier
• Occupies the top level and displays information related to services commonly
available on a web browser or web-based application in the form of a graphical user
interface (GUI).
• It constitutes the front-end layer of the application and the interface with which end-
users will interact directly.
• This tier is usually built on web development frameworks, such as CSS or JavaScript,
and communicates with other tiers by sending results to the browser and other tiers
in the network through API calls.
2. Application Tier
• This tier — also called the middle tier, logic tier, business logic or logic tier — is
pulled from the presentation tier.
• It controls the application’s core functionality by performing detailed processing and
is usually coded in programming languages, such as Python, Java, C++, .NET, etc.
3. Data Tier
• Houses database servers where information is stored and retrieved.
• Data in this tier is kept independent of application servers or business logic, and is
managed and accessed with programs, such as MongoDB, Oracle, MySQL, and
Microsoft SQL Server.
13) Rich Internet Applications (RIA)
1. RIAs are web applications that have most of the characteristics of desktop
applications, typically delivered through web-browser plug-ins or independently via
sandboxes or virtual machines.
2. RIAs have always been about the user experience, it enhancing the end-user
experience in different ways.
3. RIAs can run faster and be more engaging. They can offer users a better visual
experience, better accessibility, usability and more interactivity than traditional
browser applications that use only HTML and HTTP.
4. A RIA can perform computation on both the client side and server side. User
Interface, its related activity and capability on the client side and the data
manipulation and operation on the application server side.
5. RIA is developed using various technologies such as Java, Silverlight, JavaFX,
JavaScript, REST/WS etc.
Characteristics of RIA:-

• Performance - RIAs can often perform better than traditional applications on the
basis of the characteristics of network and applications, performance of server also
improved by offloading possible processing work to the client system and also
perceived performance in terms of UI responsiveness and smoother visual
transitions and animations are key aspects of any RIA.
• Offline use - When connectivity is unavailable, it might still be possible to use an RIA.
An RIA platform let the user work with the application without connecting to the
Internet and synchronizing it automatically when the user goes live.
• Consistency of look and feel - With RIA tools, the user interface and experience with
different browsers, devices and operating systems can be more carefully controlled
and made consistent.
• Security - RIAs should be as secure as any other web application, and the framework
should be well equipped to enforce limitations appropriately when the user lacks the
required privileges, especially when running within a constrained environment such
as a sandbox.
• Advanced Communications - Sophisticated communications with supporting servers
through optimized network protocols can considerably enhance the user experience.
• Rapid Development - An RIA Framework should facilitate rapid development of a rich
user experience through its easy-to-use interfaces in ways that help developers.
• Direct Interaction - An RIA can use a wider range of controls that allow greater
efficiency and enhance the user experience. In RIAs, for example, users can interact
directly with page elements through editing or drag-and-drop tools. They can also do
things like pan across a map or other image.
• Better Feedback - Because of their ability to change parts of pages without reloading,
RIAs can provide the user with fast and accurate feedback, real-time confirmation of
actions and choices, and informative and detailed error messages.
14) Embedding Audio
• HTML5 supports <audio> tag which is used to embed sound content in an HTML or
XHTML document as follows.
<audio src = "foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>

• The current HTML5 draft specification does not specify which audio formats browsers
should support in the audio tag. But most commonly used audio formats are ogg, mp3
and wav.
• You can use <source&ggt; tag to specify media along with media type and many other
attributes. An audio element allows multiple source elements and browser will use the
first recognized format −
➢ <!DOCTYPE HTML>
➢ <html>
➢ <body>
➢ <audio controls autoplay>
➢ <source src = "/html5/audio.ogg" type = "audio/ogg" /> <source src =
"/html5/audio.wav" type = "audio/wav" /> Your browser does not support the
<audio> element.
➢ </audio>
➢ </body> </html>

15) Embedding Video


• Here is the simplest form of embedding a video file in your webpage −

<video src = "foo.mp4" width = "300" height = "200" controls> Your browser does not
support the <video> element.
</video>

• The current HTML5 draft specification does not specify which video formats browsers
should support in the video tag. But most commonly used video formats are −
• Ogg − Ogg files with Thedora video codec and Vorbis audio codec.
• mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec.
• You can use <source> tag to specify media along with media type and many other
attributes. A video element allows multiple source elements and browser will use the
first recognized format −
➢ <!DOCTYPE HTML>
➢ <html>
➢ <body>
➢ <video width = "300" height = "200" controls autoplay>
➢ <source src = "/html5/foo.ogg" type ="video/ogg" />
➢ <source src = "/html5/foo.mp4" type = "video/mp4" /> Your browser does not
support the <video> element.
➢ </video>
➢ </body> </html>

16) Window Object


• Window object is a top-level object in Client-Side JavaScript.
• Window object represents the browser's window.
• It represents an open window in a browser.
• It supports all browsers.
• The document object is a property of the window object. So, typing
window.document.write is same as document.write.
• All global variables are properties and functions are methods of the window object.

<!DOCTYPE html>
<html>
<head>
<title>Background Color Changer</title>
<script lang="text/javascript"> function bgcolor()
{ loopID = window.setTimeout("bgcolor()",500); // 500 milliseconds delay var index
= Math.floor(Math.random() * 10); var ColorValue = "FFFFFF"; // default color -
white (index = 0) if(index == 1)
ColorValue = "FFCCCC"; //peach if(index == 2)
ColorValue = "CCAFFF"; //violet if(index == 3)
ColorValue = "A6BEFF"; //lt blue if(index == 4)
ColorValue = "99FFFF"; //cyan if(index == 5)
ColorValue = "D5CCBB"; //tan if(index == 6)
ColorValue = "99FF99"; //lt green if(index == 7)
ColorValue = "FFFF99"; //lt yellow if(index == 8)
ColorValue = "FFCC99"; //lt orange if(index == 9)
ColorValue = "CCCCCC"; //lt grey
document.getElementsByTagName("body")[0].style.backgroundColor = "#" +
ColorValue;
} function stopcolor()
{ document.body.style.backgroundColor="white"; clearTimeout(loopID);
}
</script>
17) PHP String Functions
•A string is a collection of characters. String is one of the data types
supported by PHP.
• The PHP string functions are part of the PHP core. No installation is
required to use these functions.
• PHP has a vast selection of built-in string handling functions that allow
you to easily manipulate strings in almost any possible way.
• The most common string functions are as follows:
1. Function strlen() - To count the number of characters in a string strlen()
function is used.

<?php
$str = "Ques10"; echo "The length of string is:".strlen($str);
?>
// Displays: The length of string is:6

2. Function str_replace() - Replaces some characters in a string.


str_replace() is casesensitive, but we can also use its case-insensitive
sibling str_ireplace() to avoid casesensitiveness.

<?php
$oldstr = "The cat was black";
$newstr = str_replace("black", "white", $oldstr); echo
$newstr;
?>
// Displays: The cat was white

3. Functions strtoupper() & strtolower() - Converts a string into uppercase


and lowercase respectively.
<?php
$str1 = "Example of uppercase Function.";
$str2 = "Example of LOWERCASE Function.";
$case1 =
strtoupper($str1);
$case2 =
strtolower($str2);
echo $case1; echo
"<br>"; echo
$case2;
?>/* Displays: EXAMPLE OF UPPERCASE FUNCTION.example of lowercase
function.*/

4. Function ucwords() - This function capitalized the first letter of each


word.
<?php
$str = "example of PHP string function.";
$cased =
ucwords($str); echo
$cased;
?>
// Displays: Example Of PHP String Function.

5. Function str_repeat() - It is used to repeat same string for a specific


number of times.

<?php
$str = “Ques10 ”
Echo “The Repeated string is:”.str_repeat($str , 4);
?>
// Displays: The Repeated string is: Ques10 Ques10 Ques10 Ques10

6. Function strrev() - This reverses a string.

<?php
echo strrev("Hello world!");
?>
// Displays: !dlrow olleH
18) Javascript Built In Objects
JavaScript has several built-in or core language objects. These built-in objects are
available regardless of window content and operate independently of whatever page
your browser has loaded.
1. Array Object
• Multiple values are stored in a single variable using the Array object.
• In JavaScript, an array can hold different types of data types in a single slot,
which implies that an array can have a string, a number or an object in a single
slot.
2. Boolean Object
• The Boolean object is wrapper class and member of global objects.
• It is used to convert a non-Boolean value to a Boolean value (true or false).
• If the Boolean object has no initial value or if it is 0, -0, null, "", false,
undefined, or NaN, the object is set to false. Otherwise it is true (even with
the string "false")! Date Object
• At times when user need to access the current date and time and also past
and future date and times. JavaScript provides support for working with dates
and time through the Date object.
• The Date object provides a system-independent abstraction of dates and
times.
3. Math Object
• The Math object is used to perform simple and complex arithmetic
operations.
• The Math object provides a number of properties and methods to work with
Number values
4. Number Object
• The Number objects represents numerical date, either integers or floating-
point numbers.
• A Number objects are created using the Number() constructor var num = new
number(value);
5. String Object
• in JavaScript, all strings are represented as instances of the String object.
• The String object is wrapper class and member of global objects.
6. RegExp Object
• RegExp object used to validate the pattern of characters.
• RegExp define methods that use regular expressions to perform powerful
patternmatching and search and replace functions on text.
19) List And Explain Various Features Of React
React is a JavaScript Library created by Facebook for creating dynamic and interactive
applications and building better UI/UX design for web and mobile applications. React is an
open-source and component-based front-end library. React is responsible for the UI design.
React makes code easier to debug by dividing them into components.
Features of React:

• JSX (JavaScript Syntax Extension)


• Virtual DOM
• One-way data binding
• Performance
• Extensions
• Conditional statements
• Components
• Simplicity
1. JSX(JavaScript Syntax Extension): JSX is a combination of HTML and JavaScript. You can
embed JavaScript objects inside the HTML elements. JSX is not supported by the
browsers, as a result Babel compiler transcompile the code into JavaScript code. JSX
makes codes easy and understandable. It is easy to learn if you know HTML and
JavaScript.
2. Virtual DOM: DOM stands for Document Object Model. It is the most important part of
the web as it divides into modules and executes the code. Usually, JavaScript
Frameworks updates the whole DOM at once, which makes the web application slow.
But react uses virtual DOM which is an exact copy of real DOM. Whenever there is a
modification in the web application, the whole virtual DOM is updated first and finds the
difference between real DOM and Virtual DOM.
3. One-way Data Binding: One-way data binding, the name itself says that it is a one-
direction flow. The data in react flows only in one direction i.e. the data is transferred
from top to bottom i.e. from parent components to child components. The
properties(props) in the child component cannot return the data to its parent
component but it can have communication with the parent components to modify the
states according to the provided inputs
4. Performance: As we discussed earlier, react uses virtual DOM and updates only the
modified parts. So , this makes the DOM to run faster. DOM executes in memory so we
can create separate components which makes the DOM run faster. 5. Extension: React
has many extensions that we can use to create full-fledged UI applications. It supports
mobile app development and provides server-side rendering.
5. Conditional Statements: JSX allows us to write conditional statements. The data in the
browser is displayed according to the conditions provided inside the JSX. A servlet is a
Java programming language class that is used to extend the capabilities of servers that
host applications accessed by means of a request-response programming model.
20) Life Cycle of a Servlet (Servlet Life Cycle)
The web container maintains the life cycle of a servlet instance. Let's see
the life cycle of the servlet:

1. Servlet class is loaded.


2. Servlet instance is created.
3. init method is invoked.
4. service method is invoked.
5. destroy method is invoked.

As displayed in the above diagram, there are three states of a servlet: new, ready and end.
The servlet is in new state if servlet instance is created. After invoking the init() method,
Servlet comes in the ready state. In the ready state, servlet performs all the tasks. When the
web container invokes the destroy() method, it shifts to the end state.
1. Servlet class is loaded
The classloader is responsible to load the servlet class. The servlet class is loaded when the
first request for the servlet is received by the web container.

2. Servlet instance is created


The web container creates the instance of a servlet after loading the servlet class. The
servlet instance is created only once in the servlet life cycle.
3. init method is invoked

The web container calls the init method only once after creating the servlet instance. The
init method is used to initialize the servlet. It is the life cycle method of the
javax.servlet.Servlet interface. Syntax of the init method is given below:

• public void init (Servlet Config config) throws Servlet Exception


4. service method is invoked
The web container calls the service method each time when request for the servlet is
received. If servlet is not initialized, it follows the first three steps as described above then
calls the service method. If servlet is initialized, it calls the service method. Notice that
servlet is initialized only once. The syntax of the service method of the Servlet interface is
given below:

• public void service(ServletRequest request, ServletResponse response)


• throws ServletException, IOException
5. destroy method is invoked
The web container calls the destroy method before removing the servlet instance from the
service. It gives the servlet an opportunity to clean up any resource for example memory,
thread etc. The syntax of the destroy method of the Servlet interface is given below:

• public void destroy()


21) Servlet Architecture

Servlets are grouped under the Advanced Java tree that are used to create dynamic web
applications. Servlets are robust in nature, well scalable and are primarily used in developing
server-side applications. If we go a little back in time, we would be able to witness that
before the introduction of servlets, CGI (Common Gateway Interface) were used. Amid
several indigenous tasks that a servlet is capable of doing, dynamically performing client
requests and responses are most common. Other tasks that a servlet can do effectively are:

• Can easily manage/control the application flow.


• Suitable to implement business logic.
• Can effectively balance the load at the server-side.
• Easily generate dynamic web content.

Talking about the types of servlets, there are primarily two types, namely:
1. Generic Servlets
2. HTTP Servlets
There are three potential ways in which we can employ to create a servlet:

1. Implementing Servlet Interface


2. Extending Generic Servlet
3. Extending HTTP Servlet
Components of Servlet Architecture
Below is the high level architecture diagram of servlet. Let’s see in brief, how does each
component add to the working of a servlet.
Servlet Architecture
1. Client
The client shown in the architecture above is primarily working as a medium who is sending
out HTTP requests over to the web server and again processing the response it gets back
from the server. As we can see in the diagram, our client here is the web browser.
2. Web Server
Primary job of a web server is to process the requests and responses that a user sends over
time and maintain how a web user would be able to access the files that has been hosted
over the server. The server we are talking about here is a software which manages access to
a centralized resource or service in a network..
There are precisely two types of webservers:

1) Static web server


2) Dynamic web server
3. Web Container
Web container is another typical component in servlet architecture which is responsible for
communicating with the servlets. Two prime tasks of a web container are:

• Managing the servlet lifecycle


• URL mapping
Web container sits at the server-side managing and handling all the requests that are
coming in either from the servlets or from some JSP pages or potentially any other file
system.
22) How does a Servlet Request flow?
Every servlet should override the following 3 methods namely:
1) init()
2) service()
3) destroy()
These methods are used to process the request from the user.
Following are the steps in which a request flows through a servlet which can be
observed in the architecture diagram:
1) The client sends over a request.
2) The request is accepted by the web server and forwarded to the web
container.
3) In order to obtain the servlet’s address, the web container traces web.xml file
corresponding to the request URL pattern.
4) By the time above process takes place, the servlet should have been
instantiated and initialized. If the servlet has not been instantiated and
initialized, init() method is invoked to serve the purpose.
5) By passing ServletRequest and Response object, public service() method is
called by the container.
6) In the next step, the ServletRequest and ServletResponse objects are type-
casted to HttpServletRequest and HttpServletResponse objects by the public
service() method.
7) Now protected service() method is called by the public service() method.
8) The protected service() method dispatches the request to the correct handler
method based on the type of request.
9) When servlet container shuts down, it unloads all the servlets and calls
destroy() method for each initialized servlets.
23) xml http request.explain methods that are used to send
request to server using ajax
XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from
a URL without having to do a full page refresh. This enables a Web page to update just part
of a page without disrupting what the user is doing.
XMLHttpRequest is used heavily in AJAX programming.

EventTargetXMLHttpRequestEventTargetXMLHttpRequest
Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML.
If your communication needs to involve receiving event data or message data from a server,
consider using server-sent events through the EventSource interface. For fullduplex
communication, WebSockets may be a better choice
The XMLHttpRequest object is used to exchange data with a server.
Send a Request To a Server
To send a request to a server, we use the open() and send() methods of the
XMLHttpRequest object:

xhttp.open("GET", "ajax_info.txt", true); xhttp.send();

Method Description

open(method, url, async) Specifies the type of request method: the type of
request: GET or POST url: the server
(file)location async: true (asynchronous) or false (synchronous)

send() Sends the request to the server (used for GET)

send(string) Sends the request to the server (used for POST)


24) List And Explain Various Css Transition Properties In
Internet Programming
The transition property in CSS is used to make some transition effect. The transition
is the combination of four properties which are listed below:
1) transition-property
2) transition-duration
3) transition-timing-function
4) transition-delay
Note: The transition effect can be defined in two states (hover and active) using
pseudo-classes like : hover or: active or classes dynamically set by using JavaScript.
Syntax:
• transition: transition-property transition-duration transition-timing-function
transition-delay;
• Note: If any of the values are not defined then the browser assumes the
default values.
• Property Values:
• transition-property: It specifies the CSS properties to which a transition effect
should be applied.
• transition-duration: It specifies the length of time a transition animation
should take to complete.
• transition-timing-function: It specifies the speed of transition.
• transition-delay: It specifies the transition delay or time when transition
starts.
25) Session Tracking in Servlets
• Session Tracking
• Session Tracking Techniques
Session simply means a particular interval of time.
Session Tracking is a way to maintain state (data) of an user. It is also known as
session management in servlet.
Http protocol is a stateless so we need to maintain state using session tracking
techniques. Each time user requests to the server, server treats the request as the
new request. So we need to maintain the state of an user to recognize to particular
user.
HTTP is stateless that means each request is considered as the new request. It is
shown in the figure given below:

Cookies
A cookie is a unique ID assigned to clients when they first visit a website. Whenever
this client connects to the server again, it will send the cookie that was given earlier
by the server. The server will then recognize that it is the same user.
session Tracking tracks a user’s requests and maintains their state. It is a mechanism
used to store information on specific users and in order to recognize these user’s
requests when they connect to the web server.

You might also like