MODULE 5: jQuery and AJAX Integration in Django

We will be working with the leading Python web framework, Django, on the
Migrations Ajax
server side, and jQuery-powered andonForm Processing
the client side.
Ajax and the XMLHttpRequest object
Ajax is not a technology like JavaScript or CSS, but is more like an overlaid function.

Human speech: An overlaid function

• Human speech is an overlaid function.
• Ajax, which is not a technology in itself, but something overlaid on top of other
technologies.
• Ajax, stands for Asynchronous JavaScript and XML.
• Ajax is a way of using client-side technologies to talk with a server and perform
partial page updates. Updates may be to all or part of the page, or simply to
data handled behind the scenes.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 1

 MODULE 5: jQuery and AJAX Integration in Django
• Partial page updates, in Ajax, are associated with Web 2.0, t "Web 2.0" and
Migrations and
"Ajax" are not interchangeable. Form
Web 2.0 Processing
includes more decentralized control
and contributions besides Ajax
• while whole page updates are associated with Web 1.0;

Some of the key features common in Web 2.0 include:

• page updates with JavaScript communicating with a server and rendering to a
page
• An emphasis on user-centered design
• Enabling community participation to update the website
• Enabling information sharing as core to what this communication allows

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 2

 MODULE 5: jQuery and AJAX Integration in Django
The technologies Ajax is overlaid on
1. JavaScript
Migrations and Form Processing
• Ajax running JavaScript as its engine.
• application will have JavaScript working with XMLHttpRequest, JavaScript working
with HTML, XHTML, or HTML5; JavaScript working with the DOM, JavaScript
working with CSS, JavaScript working with XML or JSON
• "Write once, debug everywhere."
• XMLHttpRequest
• one of the services provided by a good JavaScript library is a much more uniform
behavior, so that you are programming for only one model, or as close as it can
manage, and not, for instance, pasting conditional boilerplate code to do simple
things that are handled differently by different browser versions, often rendering
surprisingly different interpretations of JavaScript.
• Python and JavaScript are both multiparadigm languages that support object-
oriented programming,
06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 3
 MODULE 5: jQuery and AJAX Integration in Django
• AJAX is a developer's dream, because you can:
• Migrations
Update a web page and the
without reloading Form
page Processing
• Request data from a server - after the page has loaded
• Receive data from a server - after the page has loaded
• Send data to a server - in the background

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 4

 MODULE 5: jQuery and AJAX Integration in Django

AJAX - The XMLHttpRequest

Migrations and Form Processing
The XMLHttpRequest Object
• All modern browsers support the XMLHttpRequest object.
• The XMLHttpRequest object can be used to exchange data with a server behind
the scenes. This means that it is possible to update parts of a web page,
without reloading the whole page.
The basic way that an XMLHttpRequest object is used:
• object is created or reused (the preferred practice usually being to reuse
rather than create and discard a large number),
• a callback event handler is specified,
• the connection is opened,
• the data is sent, and
• when the network operation completes, the callback handler retrieves the
response from XMLHttpRequest and takes an appropriate action.
06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 5
 MODULE 5: jQuery and AJAX Integration in Django

A bare-bones XMLHttpRequest object can be expected to have the following methods and
properties. Migrations and Form Processing
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 available, or a browser-dependent false value if the header is not
defined
4. XMLHttpRequest.open(method, URL),
XMLHttpRequest.open(method, URL, asynchronous),
XMLHttpRequest.open(method, URL, asynchronous, username),
XMLHttpRequest.open(method, URL, asynchronous, username, password)
06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 6
 MODULE 5: jQuery and AJAX Integration in Django

• The method is GET, POST, HEAD, or one of the other less frequently used
Migrations
methods defined for HTTP.
and Form Processing
• The URL is the relative or absolute URL to fetch.
• As a security measure for JavaScript running in browsers on trusted internal
networks, a same origin policy is in effect, prohibiting direct access to servers
other than one the web page came from.
• The asynchronous variable defaults to true, meaning that the method call
should return quickly in most cases, instead of waiting for the network
operation to complete.
• The last two arguments are the username and password as optionally specified
in HTTP. If they are not specified, they default to any username and password
defined for the web page.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 7

 MODULE 5: jQuery and AJAX Integration in Django
5. XMLHttpRequest.send(content) Content can be a string or a reference to a
document Migrations and Form Processing
Properties
1. XMLHttpRequest.onreadystatechange,XMLHttpRequest.readyState

In addition to the provided methods, the reference to one other method is

supplied by the developer as a property, XMLHttpRequest.onreadystatechange,
which is called without argument each time the ready state of XMLHttpRequest
changes.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 8

 MODULE 5: jQuery and AJAX Integration in Django
An XMLHttpRequest object can have five ready states:
Migrations and Form Processing
• Uninitialized, meaning that open() has not been called.
• Open, meaning that open() has been called but send() has not.
• Sent, meaning that send() has been called, and headers and status are
available, but the response is not yet available.
• Receiving, meaning that the response is being downloaded and
responseText has the portion that is presently available.
• 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.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 9

 MODULE 5: jQuery and AJAX Integration in Django

2. XMLHttpRequest.responseText,
Migrations XMLHttpRequest.responseXML
and Form Processing
• While there have been problems encountered with using XMLHttpRequest to
fetch raw binary data, the XMLHttpRequest object is commonly used to fetch
not only XML but XHTML, HTML, plain text, and JSON, among others.
• it would make excellent sense to name it "TextHttpRequest." Once the
request reaches a ready state of 4 ("loaded"), the responseText field will
contain the text that was served up, whether the specific text format is XML
or anything else.
• the responseXML field will hold a parsed XML document

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 10

 MODULE 5: jQuery and AJAX Integration in Django

3. XMLHttpRequest.status,
MigrationsXMLHttpRequest.statusText
and Form Processing
• The status field contains the HTTP code, such as 200 for OK;
• the statusText field has a short text description, like OK.
• The callback event handler should ordinarily check XMLHttpRequest.readyState and wait before
acting on server-provided data until the readyState IS 4
• If the server-response has been transmitted successfully, the readyState will be 4 and the status
will be 200.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 11

 MODULE 5: jQuery and AJAX Integration in Django
HTML/XHTML
Migrations and Form Processing
HTML and XHTML make up the bedrock markup language for the web. JavaScript and CSS were
introduced in relation to HTML

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 12

 MODULE 5: jQuery and AJAX Integration in Django

XML Migrations and Form Processing

eXtensible Markup Language (XML) is tied to an attempt to clean up
early HTML.
Standard Generalized Markup Language (SGML)
XML works for exchanging information, and it works where many of
its predecessors had failed: it provides interoperability between
different systems after a long history of failed attempts at automating
B2B communication and failed attempts at automated conversion
between text data formats.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 13

 MODULE 5: jQuery and AJAX Integration in Django
JSON
Migrations and Form Processing
• JSON is clear, simple, and concise enough that not only is it a format of
choice for JavaScript, but it is gaining traction in other languages, and it is
being used for communication between languages that need a (simple,
added) parser to parse JSON.
• The other languages can't use eval() to simply run JSON, and in JavaScript
you should have JSON checked to make sure it does not contain malicious
JavaScript you should not eval().

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 14

 MODULE 5: jQuery and AJAX Integration in Django

CSS Migrations and Form Processing

• Cascading Style Sheets (CSS) may have introduced some new possibilities for
presentation, but quite a lot of presentation was already possible beforehand
• CSS did not so much add styling capabilities, as it added good engineering to
styling ,and make the combination of semantic markup and attractive
appearance a far more attainable goal.
• It allows parlor tricks such as in-place rebranding of websites: making changes
in images and changing one stylesheet is, at least in principle, enough to reskin
an extensive website without touching a single character of its HTML/XHTML
markup.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 15

 MODULE 5: jQuery and AJAX Integration in Django

The DOM Migrations and Form Processing

• Document Object Model (DOM) is the "deserialized object," or better, the "live
form" of what we really deliver to people.
• The DOM defines a standard for accessing and manipulating document
• document.write() and document.getElementById().innerHTML() still have a place
in web development.
• The HTML DOM defines a standard way for accessing and manipulating HTML
documents. It presents an HTML document as a tree-structure.
• The XML DOM defines a standard way for accessing and manipulating XML
documents. It presents an XML document as a tree-structure.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 16

 MODULE 5: jQuery and AJAX Integration in Django

iframes and other Migrations

Ajax variations and Form Processing
• A (i)frame really loads a complete HTML page in area into the browser. Whether the page is on the same or
another domain, for pure viewing, doesn't matter.
• Ajax only describes a system to facilitate JavaScript to talk with (and with current security restriction across
browser, only with) the server from which you document within which you generated the JavaScript call from.
• The (i)frame technology loads and renders a complete HTML page from any URL given. Certain security
restrictions accessing other documents from other domains with JavaScript still apply.

• Ajax includes several variations; Comet for instance

• an XMLHttpRequest object's connection to a server is kept open and streaming indefinitely, or a new
connection is opened whenever an old one is closed, creating an Ajax environment in which the server as
well as the client can push material.
• If you click around on the page for a Gmail account, you will see partial page refreshes that look
consistent with Ajax DOM manipulations: Compose Mail,

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 17

 MODULE 5: jQuery and AJAX Integration in Django

JavaScript/Ajax Libraries
Migrations and Form Processing
JavaScript libraries offer several advantages. They can reduce chores and
boilerplate code, significantly lessening the pain of JavaScript, and provide a
more uniform interface. They can also provide (for instance) ready-made
widgets; we will be working with a jQuery slider later on in this book. And on a
broad scale, they can let the JavaScript you write be higher-level and a little more
Pythonic.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 18

 MODULE 5: jQuery and AJAX Integration in Django

Django templating kickstart

Migrations and Form Processing
Let us briefly go through how to install Django, create a sample project, and create and use a basic
template that can serve as a basis for further tinkering.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 19

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 20

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 21

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 22

 MODULE 5: jQuery and AJAX Integration in Django
Setting JavaScript and other static content in place
Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 23

 MODULE 5: jQuery and AJAX Integration in Django
jQuery and basic Ajax
• Let's look at a "Hello,Migrations
world!" in Ajax. and Form Processing
• A request containing one variable, text, is sent to the server, and the server responds with
"Hello, [contents of the variable text]!" which is then put into the innerHTML of a paragraph
with ID result:

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 24

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 25

 MODULE 5: jQuery and AJAX Integration in Django

With the simpler, "virtual high-level language" of jQuery, you accomplish more or less the
same with only:
Migrations and Form Processing
$("#result").load("/project/server.cgi", "text=world");
$() selects a wrapped set. This can be a CSS designation, a single HTML entity referenced
by ID as we do here, or some other things.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 26

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 27

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 28

 MODULE 5: jQuery and AJAX Integration in Django
jQuery Ajax facilities
$.ajax()
Migrations and Form Processing
The most foundational and low-level workhorse in jQuery is $.ajax().

Syntax
$.ajax({name:value, name:value, ... })
The parameters specifies one or more name/value pairs for the AJAX request.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 29

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 30

 MODULE 5: jQuery and AJAX Integration in Django
Context
Migrations
The context, available and Form
as the variable Processing
this, can be used to give access to
variables in callbacks, even if they have fallen out of scope. The following code
prompts for the user's name and e-mail address and provides them in a
context, anonymously, so that the data are available to the callback function but
are never a part of the global namespace.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 31

 MODULE 5: jQuery and AJAX Integration in Django

Closures
Migrations
The principle at play is and Form Processing
the principle of closures.
Closures represent a key concept in core JavaScript, along with other things such as functions,
objects, and prototypes. Closures are part of the conceptual landscape and not only because
they are the basis on how to effectively create an object with private fields.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 32

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 33

 MODULE 5: jQuery and AJAX Integration in Django

Prototypes and prototypal inheritance

Migrations and Form Processing
Prototypes and prototypal inheritance are a basis for object-oriented
programming, with inheritance, but without classes. In Java, certain features of a
class are fixed. In Python, an object inherits from a class but features that are
fixed in Java cannot be overridden.
In JavaScript, an object's prototype is set by, for instance:
customer.prototype = employee;

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 34

 MODULE 5: jQuery and AJAX Integration in Django
data
This is the form data to Migrations
pass, whether givenand Form
as a string Processing
as it would appear in a GET URI, as follows:

query=pizza&page=2
or given as a dictionary, as follows:
{page: 2, query: "pizza"}

dataFilter
This is a reference to a function that will be passed two arguments: the raw response given by an
XMLHttpRequest, and a type (xml, json, script, or html). This offers an important security hook:
JSON can be passed to an eval(), but malicious JavaScript that is passed in place of JSON data can
also be passed to an eval()

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 35

 MODULE 5: jQuery and AJAX Integration in Django
dataType
Migrations
This is something you should and Form
specify, and provide Processing
a default specified value via $.ajaxSetup(),
for example:
$.ajaxSetup({dataType: "text"});
error(XMLHttpRequest, textStatus, errorThrown)

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 36

 MODULE 5: jQuery and AJAX Integration in Django

success(data, textStatus, XMLHttpRequest)

Migrations and Form Processing
A callback for success that also takes up to three arguments, but in different order.

type
The type of the request, for example GET, POST, and so on. The default is GET, but this is only
appropriate in very limited cases and it may make sense to simply always use POST.

url
The URL to submit to; this defaults to the current page.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 37

 MODULE 5: jQuery and AJAX Integration in Django
$.aj0axSetup()
Migrations
This takes the same arguments asand Form
$.ajax(). Processing
All arguments are optional, but you
can use this to specify default values. In terms of DRY, if something can be
appropriately offloaded to $.ajaxSetup(), it probably should be offloaded to
$.ajaxSetup().

Sample invocation
A sample invocation is as follows: $.ajaxSetup({dataType: "text", type: "POST"});

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 38

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 39

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 40

 MODULE 5: jQuery and AJAX Integration in Django
Using jQuery UI Autocomplete in Django Templates
Migrations and Form Processing
Adding autocomplete: first attempt
autocomplete and other plugins require some theme such as jQuery UI Themeroller provides.

http://jqueryui.com/themeroller/

When you have made any customizations and downloaded a theme, you can unpack it under
your static content directory

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 41

 MODULE 5: jQuery and AJAX Integration in Django
Progressive enhancement, a best practice
Migrations and Form Processing
"Progressive enhancement," means that as much as possible you build a system
that works without JavaScript or CSS, with semantic markup and similar
practices, then add appearance with CSS, and then customize behavior with
JavaScript.

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 42

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 43

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 44

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 45

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 46

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 47

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 48

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 49

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 50

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 51

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 52

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 53

 MODULE 5: jQuery and AJAX Integration in Django

Migrations and Form Processing

06/08/2024 Nagarathna C, Asst.Prof, Dept.of CSE,SCE 54