jQuery and AJAX Integration in Django

 Ajax (Asynchronous JavaScript and XML )

 Ajax, which is not a technology in itself, but something overlaid on top of other
technologies

 Ajax is a way of using client-side technologies to talk with a server and perform partial
page updates.
 The concept of "partial page updates" using Ajax to just load the change would be faster
than reloading the entire page for every minor change in web applications
 Ajax which allows web pages to update asynchronously by exchanging data to and from the
server.
 This means you can update parts of a web page without reloading the complete web page.
 It involves a combination of a browser built-in XMLHttpRequest object, JavaScript, and
HTML DOM.
•A browser built-in XMLHttpRequest object (to request data from a web server)
•JavaScript and HTML DOM (to display or use the data)
•AJAX applications might use XML to transport data, but it is equally common to transport data
as plain text or JSON text
 How AJAX Works
1.An event occurs on a web page, such as an initial page load, form submission, link or button click, etc.
2.An XMLHttpRequest object is created and sends the request to the server .
3.The server responds to the request.
4.The response is captured and then server respond back with response data.
There are many scenarios to make GET and POST requests to load and post data from the server asynchronously,
this enables web applications to be more dynamic and reduces page load time.
 JavaScript
 What is JavaScript?
 JavaScript is a versatile, high-level programming language primarily used to create interactive
effects within web browsers.
 It's an essential part of web development alongside HTML and CSS.
 JavaScript is a scripting or programming language that allows you to implement complex
features on web pages
 Ajax running JavaScript as its engine
 application will have JavaScript working with XMLHttpRequest,
 JavaScript working with HTML, XHTML, or HTML5;
 JavaScript working with CSS, XML or JSON, DOM,
 Key Features of JavaScript
•Event Handling: Responds to user interactions like clicks, form submissions, and mouse movements.
•DOM Manipulation: Allows dynamic changes to the HTML structure and styling of web pages.
•Asynchronous Programming: Manages tasks like API calls without blocking the main thread using promises,
async/await, and callbacks.
•Data Types: Includes numbers, strings, booleans, objects, arrays, and more.
•Functions: Supports first-class functions, closures, and arrow functions

Common Libraries and Frameworks

•jQuery: Simplifies HTML DOM tree traversal and manipulation.
•React: A library for building user interfaces, especially single-page applications.
•Angular: A platform for building mobile and desktop web applications.
•Vue.js: A progressive framework for building user interfaces.
XMLHttpRequest object can be expected to have the following methods
1. XMLHttpRequest.abort()
This cancels any active request.
2. XMLHttpRequest.getAllResponseHeaders()
This returns all HTTP response headers sent with the response.
3. XMLHttpRequest.getResponseHeader(headerName)
This returns the requested header if
4. XMLHttpRequest.open(method, URL, asynchronous, username, password) method is GET,
POST, HEAD
5. XMLHttpRequest.send(content)
Content can be a string or a reference to a document.
 Properties
1. XMLHttpRequest.onreadystatechange,XMLHttpRequest.readyState:

XMLHttpRequest.onreadystatechange, which is called without argument each time the ready state of
XMLHttpRequest changes

XMLHttpRequest object can have five ready states

1Uninitialized, meaning that open() has not been called.

2.Open, meaning that open() has been called but send() has not.
3.Sent, meaning that send() has been called, and headers and status are available, but the response
is not yet available.
4.Receiving, meaning that the response is being downloaded and responseText has the portion that is
presently available.
5.Loaded, meaning that the network operation has completed. If it has completed successfully (that
is, the HTTP status stored in XMLHttpRequest.status is 200), this is when the web page would be
updated based on the response.
2. XMLHttpRequest.responseText, XMLHttpRequest.responseXML
(XMLHttpRequest object is commonly used to fetch not only XML but XHTML, HTML, plain text, and
JSON, among others. )
3. XMLHttpRequest.status, XMLHttpRequest.statusText
(The status field contains the HTTP code, such as 200 for OK; the statusText field has a short text
description, like OK )
 How AJAX Works in Django
 In Django, AJAX is used to create dynamic web applications by updating parts of a web
page without reloading the whole page.
 Here's a basic overview of how to implement AJAX in a Django project:
 Steps to Implement AJAX in Django
•Setup Django Project: Make sure you have a Django project and app set up.
. •Create a View: Define a view that processes AJAX requests.
•This view will handle data from the frontend and return a JSON response
AJAX in Template: Use JavaScript to send an AJAX request from your
HTML template.

jQuery is a lightweight, "write less, do more", JavaScript library.

The purpose of jQuery is to make it much easier to use JavaScript on
your website.
 HTML/XHTML

 HTML (Hyper Text Markup Language) is used to create web pages and web applications.
 HTML's primary purpose is to display content, given in a text-based document,
 XML allows different applications to exchange and store data , XML supports information
exchange between computer systems such as websites, databases, and third-party
applications.
 XML Does Not Use Predefined Tags
 HTML works with predefined tags like <p>, <h1>, <table>, etc.
<!DOCTYPE html>
<html>

<head>
<title>GeeksforGeeks</title>
</head>

<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p>
A Computer Science portal for geeks
</p>
</body>

</html>
Example
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

note is a note to Tove from Jani, stored as XML

The XML above is quite self-descriptive:
•It has sender information
•It has receiver information
•It has a heading
•It has a message body
 JSON
 JSON simply takes advantage of how an object would be specified in JavaScript.
 JSON is a text format for storing and transporting data.
 JSON is a lightweight data-interchange format
 JSON is plain text written in JavaScript object notation

Why Use JSON?

 The JSON format is similar to the code for creating JavaScript objects.
 Because of this, a JavaScript program can easily convert JSON data into JavaScript objects.
 Since the format is text only, JSON data can easily be sent between computers, and used by any programming
language.
 JavaScript has a built in function for converting JSON strings into JavaScript objects:
JSON.parse()
 JavaScript also has a built in function for converting an object into a JSON string:
JSON.stringify()
 Storing Data
 When storing data, the data has to be a certain format, and regardless of where you choose to
store it, text is always one of the legal formats.
 JSON makes it possible to store JavaScript objects as text.

JSON Syntax Rules

JSON syntax is derived from JavaScript object notation syntax:
•Data is in name/value pairs
•Data is separated by commas
•Curly braces hold objects
•Square brackets hold arrays
In JSON, values must be one of the following data types:
•a string
•a number
•an object
•an array
•a boolean
•null
In JavaScript values can be all of the above, plus any other valid JavaScript expression, including:
•a function
•a date
•Undefined

Example
In JSON, string values must be written with double quotes:
JSON
{"name":"John"}
In JavaScript, We can write string values with double or single quotes:
JavaScript
{name:'John'}
 The DOM

What is DOM?
 DOM, or Document Object Model, is a programming interface that represents structured documents like
HTML and XML as a tree of objects.
 It defines how to access, manipulate, and modify document elements using scripting languages like JavaScript.

Why is DOM Required?

 HTML is used to structure the web pages and Javascript is used to add behavior to our web pages.
 When an HTML file is loaded into the browser, the JavaScript can not understand the HTML document
directly.
 So it interprets and interacts with the Document Object Model (DOM), which is created by the browser based
on the HTML document.
 Methods of Document Object

write(“string”) Writes the given string on the document.

getElementById() Returns the element having the given id value.

getElementsByName() Returns all the elements having the given name value.

getElementsByTagName() Returns all the elements having the given tag name.

getElementsByClassName() Returns all the elements having the given class name.
 iframes and other Ajax variations

 iframes, or inline frames, are HTML elements used to embed another HTML document
within a webpage.
 They allow to display content like videos, maps, or other web pages inside your page

Example
<iframe src="https://www.example.com" width="600" height="400"></iframe>

Key Attributes:

• src: URL of the page to embed.

• width and height: Size of the iframe.
• frameborder: Specifies whether or not to display a border.
• allowfullscreen: Allows the iframe to go fullscreen.
 Using iframes with AJAX involves dynamically loading content into an iframe, which
can be useful for embedding pages or handling cross-domain request
 (Cross-domain requests occur when a web page hosted on one domain requests data from
a resource located on another domain.)

 Basic Concept

1. AJAX Request: Use AJAX to fetch content from a server.

2. Iframe Update: Insert the fetched content into an iframe.

 Steps

 1. AJAX Call: Use JavaScript (often with libraries like jQuery) to make an AJAX request.
 2. Modify Iframe: Use JavaScript to change the src attribute of the iframe or directly
insert content.
 jQuery and Basic AJAX

 Query is a lightweight, "write less, do more", JavaScript library.

 The purpose of jQuery is to make it much easier to use JavaScript on your website.
 jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them
into methods that you can call with a single line of code.
 jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
 The jQuery library contains the following features:
•HTML/DOM manipulation
•CSS manipulation
•HTML event methods
•Effects and animations
•AJAX
Basic syntax is: $(selector).action()
•A $ sign to define/access jQuery
•A (selector) to "query (or find)" HTML elements
•A jQuery action() to be performed on the element(s)
 jQuery Ajax facilities
jQuery provides good facilities both for Ajax and other JavaScript usage.

$.ajax()
Context
Closures