AJAX

Source : https://www.tutorialspoint.com/ajax/index.htm
What is AJAX?

 AJAX stands for Asynchronous JavaScript and XML.

 AJAX is a web development technique for creating interactive web applications.
 If you know JavaScript, HTML, CSS, and XML, then you need to spend just one hour to start with AJAX
Why to Learn Ajax?

 AJAX is a new technique for creating better, faster, and more interactive web applications with the help of
XML, HTML, CSS, and Java Script
 Ajax uses CSS for presentation, along with Document Object Model and JavaScript for dynamic content
display.
 Conventional web applications transmit information to and from the sever using synchronous requests. It
means you fill out a form, hit submit, and get directed to a new page with new information from the server.
 With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, and
update the current screen. In the purest sense, the user would never know that anything was even transmitted
to the server.
 AJAX is a web browser technology independent of web server software
 A user can continue to use the application while the client program requests information from the server in
the background.
 Intuitive and natural user interaction. Clicking is not required, mouse movement is a sufficient event trigger.
What is AJAX?

 AJAX is not a programming language or technology, but it is a combination of multiple web-related

technologies like HTML, XHTML, CSS, JavaScript, DOM, XML, XSLT and XMLHttpRequest object.
 The AJAX model allows web developers to create web applications that are able to dynamically interact with
the user. It will also be able to quickly make a background call to web servers to retrieve the required
application data. Then update the small portion of the web page without refreshing the whole web page.
What is AJAX? (continued)

 AJAX applications are much more faster and responsive as compared to traditional web applications.
 It creates a great balance between the client and the server by allowing them to communicate in the
background while the user is working in the foreground.
 In the AJAX applications, the exchange of data between a web browser and the server is asynchronous
means AJAX applications submit requests to the web server without pausing the execution of the application
and can also process the requested data whenever it is returned.
 For example, Facebook uses the AJAX model so whenever we like any post the count of the like button
increase instead of refreshing the whole page.
Working of AJAX.

 Traditional web applications are created by adding loosely web pages through links in a predefined order.
 Where the user can move from one page to another page to interact with the different portions of the
applications.
 Also, HTTP requests are used to submit the web server in response to the user action.
 After receiving the request the web server fulfills the request by returning a new webpage which, then
displays on the web browser.
 This process includes lots of pages refreshing and waiting
 AJAX change this whole working model by sharing the minimum amount of data between the web browser
and server asynchronously.
Working of AJAX. (continued)

 It speedup up the working of the web applications.

 It provides a desktop-like feel by passing the data on the web pages or by allowing the data to be displayed
inside the existing web application.
 It will replace loosely integrated web pages with tightly integrated web pages.
 AJAX application uses the resources very well.
Working of AJAX. (continued)

 It creates an additional layer known as AJAX engine in between the web application and web server due to
which we can make background server calls using JavaScript and retrieve the required data, can update the
requested portion of a web page without casing full reload of the page.
 It reduces the page refresh timing and provides a fast and responsive experience to the user.
 Asynchronous processes reduce the workload of the web server by dividing the work with the client
computer.
 Due to the reduced workload web servers become more responsive and fast.
Advantages of AJAX

 It creates responsive and interactive web applications.

 It supports the development of patterns and frameworks that decrease the development time.
 It makes the best use of existing technology and feature instead of using some new technology.
 It makes an asynchronous call to the web server which means the client doesn't have to wait for the data to
arrive before starting rendering.
Disadvantages of AJAX

 AJAX is fully dependent on JavaScript. So if anything happens with JavaScript in the browser AJAX will
not support.
 The debugging of AJAX applications is difficult.
 If one request can fail then it can fail the load of the whole webpage.
 If JavaScript is disabled in your web browser then you are not able to run the AJAX webpage
Dynamic Versus Static Website

Static Website Dynamic Website

The content of the website can not be changed at The content of the website can be changed at runtime.
runtime
There is no interaction with the database. It interacts with the database very efficiently.
It loads faster on the web browser as compared to a It loads slower on the web browser as compared to a
dynamic website. static website.
Development cost is cheap. Development cost is high.
It delivers the same data/content every time the page It can deliver different content/data every time the
loads. page loads.
Etc.
AJAX Technologies

 It is a combination of web technologies that allows to establish asynchronous communication between the
web server and the web browser.
 It creates a dynamic application that updates the content of the webpage dynamically without reloading the
whole page.
 AJAX is not a programming language or script language, but it combines multiple web-related technologies
like HTML, XHTML, CSS, JavaScript, DOM, XML, XSLT and XMLHttpRequest object.
1. Javascript

 Javascript − It is an important part of AJAX. It allows you to create client-side functionality. Or we can say
that it is used to create AJAX applications.
2. XML or JSON

 XML or JSON − XML stands for extensible markup language whereas JSON stands for JavaScript Object
Notation. Both JSON and XML are used on the client side to exchange data between the web server and the
client.
3. XMLHttpRequest

 The XMLHttpRequest − It is used to perform asynchronous data exchange between a web browser and a
web server. It is a JavaScript object that performs asynchronous operations

 Where using a new keyword along with XMLHttpRequest() constructor we can be able to create a new
XMLHttpRequest object.
 This object must be created before calling the open() function to initialise it before calling send() function to
send the request to the web server.
4. HTML and CSS

 HTML and CSS − It is used to provide markup and style to the webpage text.
5. DOM

 DOM − It is used to interact with and alter the webpage layout and content dynamically.
 Or we can say that DOM is used to create a logical representation of the elements that are used to markup
HTML pages
 It is not a part of JavaScript, but using javaScript we can access the methods and the properties of DOM
objects.
 Using DOM methods and properties we can create or modify HTML pages.
AJAX - Action

 This part of AJAX-ACTION gives you a clear picture of the exact steps of AJAX operation.
 Steps of AJAX Operation
1. A client event occurs.
2. An XMLHttpRequest object is created.
3. The XMLHttpRequest object is configured.
4. The XMLHttpRequest object makes an asynchronous request to the Webserver.
5. The Webserver returns the result containing XML or JSON document.
6. The XMLHttpRequest object calls the callback() function and processes the result.
7. The HTML DOM is updated.
AJAX - XMLHttpRequest

 In AJAX, XMLHttpRequest plays a very important role.

 XMLHttpRequest is used to exchange data to or from the web server in the background while the user/client
working in the foreground and then update the part of the web page with the received data without reloading
the whole page.
 We can also say that XMLHttpRequest (XHR) can be used by various web browser scripting languages like
JavaScript, JScript, VBScript, etc., to exchange XML data to or from the web server with the help of HTTP.
 Apart from XML, XMLHttpRequest can also fetch data in various formats like JSON, etc.
 It creates an asynchronous connection between the client side and the server side.
XMLHttpRequest Object Methods

1. new XMLHttpRequest(): It is used to create an XMLHttpRequest() object

2. getAllResponseHeaders(): It is used to get the header information
3. getResponseHeader(): It is used to get the specific header information
4. open(method, url, async, user, psw): It is used to initialise the request parameters.
• method: request type GET or POST or Other types
• url: file location
• async: for the asynchronous set to true or for synchronous set to false
• user: for optional user name
• psw: for optional password
 XMLHttpRequest Object Methods (contniued)

5. send(): It is used to send requests to the web server. It is generally used for GET requests.
6. send(string): It is used to send requests to the server. It is generally used for POST requests.
7. setRequestHeader(): It is used to add key/value pair to the header
AJAX - Database Operations

 AJAX can be used for interactive communication with a database

 The following example will demonstrate how a web page can fetch information from a database with AJAX
 Class DEMO
AJAX - Security

 AJAX is the most commonly used web technique to send and receive data to and from the web server
asynchronously without disturbing the functionality of the other components of the client-side application.
 Although AJAX itself does not provide any security vulnerabilities, still we have to keep some security
measurements while implementing AJAX
 Security measurements set to follow
1. Cross-Site Scripting(XSS)

 AJAX applications should be vulnerable to XSS attacks.

 If proper input validation and output encoding are not implemented, then a hacker can easily inject malicious
scripts inside the AJAX response.
 These malicious scripts are used to steal sensitive data from the system or can manipulate the content.
 So always create an AJAX application which is safe from this attack using proper validation and sanitization
before displaying data on the web page.
2. Cross-Site Request Forgery(CSRF)

 In this attack, the attacker tricks the browser by doing unwanted actions with the help of an authentication
session.
 It can exploit the AJAX request and can perform unauthorized actions.
 So to prevent this attack we have to implement CSRF protection techniques like generation and validating
random tokens Or can use the same origin policy.
 3. Insecure Direct Object References(IDOR)

 The request generally accesses the specified resource from the server with the help of a unique identifier.
 But if the attacker gets this identifier then it can easily manipulate or can access unauthorized resources.
 So to prevent this avoid exposing sensitive information.
 Also, check the user authorization for the specified resource of the developers, in the server side.
4. Content Security Policies(CSP)

 It is a policy which helps users/developers to save themselves from malicious activities or unauthorized
access.
 It provides a permitted source for secure scripts and other resources.
5. Server-Side validation

 Server-side validation is very important because it ensures that the submitted data meets the specified criteria
and it is safe for further process.
 We can not bypass or manipulate server-side validation but we can bypass client-side validation.
6. Secure Session Management

 The AJAX application should properly maintain user sessions and session tokens to save the session from
attacks.
 Always check that the session tokes are generated properly, and securely transmitted and can logout if the
invalidation or session expiration happens
7. Input Validation and Sanitization

 Server should perform validation and sanitization of the data received from the client side to prevent attacks.
8. Regular Update and Security

 As we know that AJAX uses external libraries or frameworks.

 So keeping them up to date is an important task.
 To avoid various vulnerabilities and improve the security of the application.
AJAX - Issues

 Every technology in this world has its bright side and its dark side similarly AJAX is a powerful technique
which is used to develop dynamic and interactive web applications but it also has some challenges and issues
1. Cross-Domain Requests

 In AJAX, the requests generally work with the same-origin policy.

 This policy restricts requests to the same domain for security purposes which means if you try to make an
AJAX request in a different domain you will get a CORS error.
 So to overcome this error you need to reconfigure your system and allow cross-domain requests with the
help of JSONP or proxy servers.
2. Security Vulnerability

 In AJAX, the requests can be attacked using XSS(cross-site scripting) or CSRF(cross-site request forgery).
 So to avoid such types of vulnerabilities we have to use input validation, output encoding, and CSRF protect
tokens
3. Performance Impact

 If we do not optimize the AJAX request properly then it will affect the performance.
 If we transfer excessive data, unnecessary requests, frequent requests, or inefficient server-side processing
these activities are responsible for slowing down the page loading time and can increase the load of the
server.
 So always make a proper and optimized request.
4. Search Engine Optimization(SEO)

 Search engines often face challenges in indexing AJAX-driven content because old web crawlers do not
execute JavaScript.
 It will affect the ranking and discovery of the web page in the search engines
5. Testing and Debugging

 Due to the asynchronous behaviour of the request it is hard to debug AJAX codes.
 So to overcome this issue we have to use good debugging tools that can identify the issues and resolve them
correctly
6. JavaScript Dependency

 AJAX is generally dependent upon JavaScript.

 So if JavaScript is disabled in the web browser, we will not be able to use AJAX functionalities.
 So always enable JavaScript in the web browser for a better experience.
JSON vs XML

 Both JSON and XML can be used to receive data from a web server. The following JSON and XML
examples both define an employees object, with an array of 3 employees:
JSON vs XML (continued)

JSON XML

<employees>
<employee>
<firstName>John</
{"employees":[ firstName> <lastName>Doe</lastName>
{ "firstName":"John", "lastName": </employee>
"Doe" }, <employee>
{ "firstName":"Anna", "lastName" <firstName>Anna</
:"Smith" }, firstName> <lastName>Smith</lastName>
{ "firstName":"Peter", "lastName": </employee>
"Jones" } <employee>
]} <firstName>Peter</
firstName> <lastName>Jones</lastName>
</employee>
</employees>
JSON is Like XML Because

 Both JSON and XML are "self describing" (human readable)

 Both JSON and XML are hierarchical (values within values)
 Both JSON and XML can be parsed and used by lots of programming languages
 Both JSON and XML can be fetched with an XMLHttpRequest
JSON is Unlike XML Because

 JSON doesn't use end tag

 JSON is shorter
 JSON is quicker to read and write
 JSON can use arrays
 The biggest difference is:
 XML has to be parsed with an XML parser. JSON can be parsed by a standard JavaScript function.
 Why JSON is Better Than XML
 XML is much more difficult to parse than JSON.
 JSON is parsed into a ready-to-use JavaScript object.
JSON is faster and easier than XML

 For AJAX applications, JSON is faster and easier than XML:

 Using XML
 Fetch an XML document
 Use the XML DOM to loop through the document
 Extract values and store in variables
 Using JSON
 Fetch a JSON string
 JSON.Parse the JSON string
JSON format

 In JSON, objects refer to dictionaries, which are enclosed in curly brackets, i.e., { }.
 These objects are written in key/value pairs, where the key has to be a string and values have to be a valid
JSON data type such as string, number, object, Boolean or null.
 Here the key and values are separated by a colon, and a comma separates each key/value pair.
JSON Data Types

Data Type Description Example

String A string is always written in double-quotes. It may consist of numbers, "student", "name", "1234", "Ver_1"
alphanumeric and special characters.

Number Number represents the numeric characters. 121, 899

Boolean It can be either True or False. true

Null It is an empty value.

JSON vs BSON

 BSON is a Binary Javascript Object notation.

 It is not in the human readable format as it is in the binary format.
 In MongoDB, BSON is used to encrypt the JSON data.
 It provides additional data types over the JSON data.
 It is also a language independent, and can be easily parsed.
 It supports the adding of documents and arrays within other documents and arrays.
BSON has following three characteristics

 Lightweight: When used over the network, the JSON keeps the overhead involved in processing extra
header data to a minimum.
 Traversable: It is designed to traverse easily across the network. This helps in its role as the primary data
representation for MongoDB.
 Efficient: It allows C data types that allow easy and quick encoding and decoding of data.
Differences between JSON and BSON

JSON BSON

JSON is javascript object notation. BSON is Binary Javascript Object notation.

JSON contains some basic data types like string, numbers, Boolean, null. BSON contains some additional data types like date, timestamp, etc.

Databases like AnyDB, redis, etc. stores the data into the JSON format. The data in MongoDB is stored in a BSON format.

JSON requires less space as compared to BSON. BSON requires more space as compared to JSON.

It is used for the transmission of data. It is used for the storage of data.

It does not have encoding and decoding technique. It has faster encoding and decoding technique.