Scribd
Upload
3 views17 pages

Ajax With JQuery

AJAX, or Asynchronous JavaScript and XML, allows for the exchange of data with a server and updates parts of a web page without reloading it, enhancing user experience. jQuery simplifies AJAX functionality with methods like load(), get(), and post() to request and manipulate data from servers. While AJAX improves performance and reduces server traffic, it has limitations such as security concerns, issues with search engine indexing, and challenges with browser navigation.

Uploaded by

pgovindulla
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
3 views17 pages

Ajax With JQuery

AJAX, or Asynchronous JavaScript and XML, allows for the exchange of data with a server and updates parts of a web page without reloading it, enhancing user experience. jQuery simplifies AJAX functionality with methods like load(), get(), and post() to request and manipulate data from servers. While AJAX improves performance and reduces server traffic, it has limitations such as security concerns, issues with search engine indexing, and challenges with browser navigation.

Uploaded by

pgovindulla
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/ 17

Ajax with jQuery

Introduction
• AJAX is the art of exchanging data with a server, and updating
parts of a web page - without reloading the whole page.
• AJAX = Asynchronous JavaScript and XML.
• In short; AJAX is about loading data in the background and
display it on the webpage, without reloading the whole page.
• Examples of applications using AJAX: Gmail, Google Maps,
Youtube, and Facebook tabs.
• AJAX is a developer's dream, because you can:
• Update a web page without reloading the page
• 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
• AJAX is not a programming
language.
• AJAX just uses a
combination of:
• A browser built-in
XMLHttpRequest object (to
request data from a web
server)
• JavaScript and HTML DOM
(to display or use the data)
• 1.An event occurs in a web page (the
page is loaded, a button is clicked)
• 2. An XMLHttpRequest object is created
by JavaScript
• 3. The XMLHttpRequest object sends a
request to a web server
• 4. The server processes the request
• 5. The server sends a response back to
the web page
• 6. The response is read by JavaScript
• 7. Proper action (like page update) is
performed by JavaScript
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>
• 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!

• jQuery load() Method


• The jQuery load() method is a simple, but powerful AJAX method.
• The load() method loads data from a server and puts the returned
data into the selected element.
• Syntax:
• $(selector).load(URL,data,callback);

• The required URL parameter specifies the URL you wish to load.
• The optional data parameter specifies a set of querystring key/value
pairs to send along with the request.
• The optional callback parameter is the name of a function to be
executed after the load() method is completed.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt #p1");
});
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>
• The optional callback parameter specifies a callback function to run
when the load() method is completed. The callback function can have
different parameters:

• responseTxt - contains the resulting content if the call succeeds


• statusTxt - contains the status of the call
• xhr - contains the XMLHttpRequest object
<!DOCTYPE html><html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
});
</script></head><body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button></body></html>
• The jQuery get() and post() methods are used to request
data from the server with an HTTP GET or POST request.
• HTTP Request: GET vs. POST
• Two commonly used methods for a request-response
between a client and server are: GET and POST.
• GET - Requests data from a specified resource
• POST - Submits data to be processed to a specified
resource
• GET is basically used for just getting (retrieving) some data
from the server. Note: The GET method may return cached
data.
• POST can also be used to get some data from the server.
However, the POST method NEVER caches data, and is often
used to send data along with the request.
• jQuery $.get() Method
• The $.get() method requests data from the server with an HTTP GET
request.
• Syntax:
$.get(URL,callback);
• The required URL parameter specifies the URL you wish to request.
• The optional callback parameter is the name of a function to be executed if
the request succeeds.
• The first parameter of $.get() is the URL we wish to request
("demo_test.asp").

• The second parameter is a callback function. The first callback parameter


holds the content of the page requested, and the second callback
parameter holds the status of the request.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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() Method
• The $.post() method requests data from the server using an HTTP POST
request.
• Syntax:
• $.post(URL,data,callback);
• The required URL parameter specifies the URL you wish to request.
• The optional data parameter specifies some data to send along with the
request.
• The optional callback parameter is the name of a function to be executed if
the request succeeds
The first parameter of $.post() is the URL we wish to request
("demo_test_post.asp").

Then we pass in some data to send along with the request (name and city)..
<!DOCTYPE html>
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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>
Advantages of AJAX

Reduce server traffic and increase speed


• The first and foremost advantage of Ajax is its ability to improve the performance and usability of web applications.
• To explain more detailedly, Ajax techniques allow applications to render without data, which reduces the server traffic inside
requests. That being said, web developers can lower the time consumption on both side’s responses significantly.
• As a result, your web’s visitors will never have to see a white window and wait for pages to refresh with Ajax implementation.
Enable asynchronous calls
• Ajax benefits web developers in how its framework can be used for lazy loading. Those who don’t know what Lazy Loading is are
an optimization technique that’s widely used for online content.
• In essence, Ajax allows its users to make asynchronous calls to the web server without reloading the whole web page. As a web
visitor, you don’t have to wait for the entire page to load entirely in order to access the entire page content.
• The concept of lazy loading assists in loading only the required section and delays the remaining, until it is needed by users. Thus,
Ajax Lazy Loading not only improves a web page load it also has a positive impact on user experience and conversion rates.
XMLHttpRequest
• XMLHttpRequest is a request type widely used for sending a request to Ajax pages. You can also call it with a different name:
Asynchronous HTTP request. It plays a vital role in the implementation of Ajax techniques for web development.
• XMLHttpRequest transfers and manipulates the XML data to and from a web service using HTTP. Its purpose is to establish an
independent connection between the webpage’s client-side and server.
Reduce bandwidth usage
• One more advantage of Ajax comes from the bandwidth usage. This action is effective in improving web performance and load
speed as well.
• Ajax makes the best use of the server’s bandwidth by fetching particle contents instead of transmitting the entire page’s content.
This means that you can bring data from the database and store it into the database to perform background without reloading the
page.
Form Validation
• In contrast to traditional form submission, where client-side validations occur after submission, the AJAX method enables precise
and immediate form validation. AJAX provides speed, which is also one of its significant benefits.
Disadvantages/Limitations of Ajax
• Open-source. View source is allowed, and anyone can view the code source
written for Ajax, which makes it less secure compared to other
technologies
• Search Engines cannot index Ajax pages can not be indexed by Google as
well as other search engines
• The usage of Ajax can cause difficulties for your web pages to debug as well
as make them prone to possible security issues in the future
• Most importantly, Ajax has a considerable dependency on JavaScript, so
only browsers that support Javascripts or XMLHttpRequest can use pages
with Ajax techniques
• Users will find it challenging to bookmark a specific state of the application
due to the dynamic web page
• From the users’ perspective, when you click the back button on the
browser, you may not return to the previous state of the page but the
entire page. This happens because the pages with successive Ajax requests
are unable to register with the browser’s history

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy