Module-5
Jquery and Ajax integration with Dijango
Ajax
Ajax: Asynchronous JavaScript and XML
AJAX, which stands for asynchronous JavaScript and XML, is a set of technologies used
on the client-side to send and retrieve data from the server asynchronously.
• not a programming language; a particular way of using JavaScript
• downloads data from a server in the background
• allows dynamically updating a page without making the user wait
• avoids the "click-wait-refresh" pattern
Ajax
• JavaScript includes an XMLHttpRequest object that can fetch
files from a web server
• it can do this asynchronously (in the background,
transparent to user)
• the contents of the fetched file can be put into current web
page using the DOM
Synchronous web communication
Asynchronous web communication
Technologies used in Ajax
HTML/XHTML and CSS
DOM
XML or JSON
Django
XMLHttpRequest
Javascript
Javascript
JavaScript is a lightweight, cross-platform, single-
threaded, and interpreted compiled programming language. It is also
known as the scripting language for webpages. It is well-known for the
development of web pages, and many non-browser environments also
use it.
All popular web browsers support JavaScript as they provide built-in
execution environments.
It provides good control to the users over the web browsers.
JavaScript is a weakly typed language, where certain types are
implicitly cast (depending on the operation).
Javascript Events
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
DOM
REST API integrated with frontend technology using AJAX and JQuery
JSON vs XML
XML
Features of XML
XML focuses on data rather than how it
looks
Easy and efficient data sharing
Compatibility with other markup
language HTML
Supports platform transition
Allows validation
XML supports Unicode
JSON
JSON
JavaScript Object Notation
JSON is a lightweight format for storing and transporting data
JSON is often used when data is sent from a server to a web page
JSON is "self-describing" and easy to understand
Ajax workflow
1. user clicks, invoking an event handler
2. handler's code creates an XMLHttpRequest object
3. XMLHttpRequest object requests page from server
4. server retrieves appropriate data, sends it back
5. XMLHttpRequest fires an event when data arrives
this is often called a callback
you can attach a handler function to this event
6. your callback event handler processes the data and displays it
XMLHttpRequest Methods
JQuery
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.
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
• Utilities
Jquery Syntax
Jquery Selectors
Jquery selectors
Basic
Pure java script selectors
$(“*”)
$(“tag”)
getElementById()
$
JQuery- $()
(“*.class”)
$(“#id”)
Jquery Selectors
Jquery Selectors
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.com/data', true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
document.getElementById('result').innerHTML = xhr.responseText; // Update
element with id 'result'
} else {
// Handle errors
}
};
xhr.onerror = function() {
// Handle errors
};
xhr.send();
$.ajax({
url: 'example.com/data',
method: 'GET',
success: function(response) {
$('#result').html(response); // Update element with id
'result'
},
error: function(xhr, status, error) {
// Handle errors
}
});
Jquery Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Jquery Demo
Jquery
jQuery provides several methods for AJAX functionality.
With the jQuery AJAX methods, you can request text, HTML, XML, or JSON
from a remote server using both HTTP Get and HTTP Post - And you can load
the external data directly into the selected HTML elements of your web page!
The load() method loads data from a server and puts the returned data
into the selected element.
The $.get() method requests data from the server with an HTTP GET
request.
The $.post() method requests data from the server using an HTTP POST
request.
Jquery get example
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></
script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("demo_test.asp", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>Send an HTTP GET request to a page and get the result back</button>
</body>
</html>
Jquery post example
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("demo_test_post.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>Send an HTTP POST request to a page and get the result back</button>
</body>
</html>
REST APIs
Building Rest API using Dijango
Lab Program
Develop a registration page for student enrolment as
done in Module 2 but without page refresh using AJAX
Lab Program
Develop a search application in Django using AJAX that
displays courses enrolled by a student being searched.
