SlideShare a Scribd company logo
1 of 3
Download to read offline
How to Use jQuery’s $.ajax() Function
In our previous blog(What is AJAX and How it works ?), we discussed about AJAX and how to
implement the same using jQuery.
We did try to learn the same with the help of an basic example. In this tutorial, we are going to take
it from there and will try to understand about the various available parameter in ajax function.
Though we can’t cover all as it is a long list which you can read here but we shall cover the
important parameters.
But before that, let’s take another example.
var request = $.ajax({
type: "POST",
url: "submit.php",
data: { username: $('#username').val(), email: $('#email').val() }
});
request.done(function(response, textStatus, jqXHR)
{
alert( response );
});
request.fail(function(jqXHR, textStatus, errorThrown)
{
alert( "The following error occured (" + textStatus + "," + errorThrown +")." );
});
In this example, Success and fail cases have been implemented. Upon receiving a successful
response from server, request.done callback will be executed else request.fail will be executed.
There is another callback function named as “always()”, which will be executed irrespective of
successful and failed response.
jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });
.always() method replaces the deprecated .complete() method.
Till now, we have covered the success and fail method along with always method, using which you
can successfully implement your AJAX requests.
Now as we discussed in out previous blog () about the parameters of ajax function so let’s learn
more about them.
accepts: The content type sent in the request header that tells the server what kind of response it
will accept in return.
async: By default, all requests are asynchronous. If you need synchronous requests, set this option
to false.
beforeSend: A pre-request callback function that can be used to modify the jqXHR object before it
is sent.
cache: If set to false, it will force requested pages not to be cached by the browser.
complete: A function to be called when the request finishes (after success and error callbacks are
executed).
contents: An object of string/regular-expression pairs that determine how jQuery will parse the
response.
contentType: Set the content type of the data sent to the server.
context: An object to use as the context (this) of all Ajax-related callbacks.
converters: An object containing dataType-to-dataType converters.
crossDomain: If you want to make a crossDomain request then set this property to true
data: Data to be sent to the server. It is converted to a query string, if not already a string.
dataFilter: A function to be used to handle the raw response data of XMLHttpRequest. This is a
pre-filtering function to sanitize the response.
dataType: The type of data expected back from the server
error: A function to be called if the request fails
global: Whether to trigger global Ajax event handlers for this request
headers: An object of additional headers to send to the server
ifModified: Set this option to true if you want to force the request to be successful only if the
response has changed since the last request
isLocal: Set this option to true if you want to force jQuery to recognize the current environment as
“local”
Please visit jquery official documentation to learn more about the rest of parameters.
References:
[1].http://www.calipus.com/blog/how-to-use-jquerys-ajax-
function/
[2].http://api.jquery.com/jquery.ajax/

More Related Content

Viewers also liked

Dangers of Cell phones सेलफोन – फ्रैंडली पिजन या ब्रेन बग
Dangers of Cell phones   सेलफोन – फ्रैंडली पिजन या ब्रेन बगDangers of Cell phones   सेलफोन – फ्रैंडली पिजन या ब्रेन बग
Dangers of Cell phones सेलफोन – फ्रैंडली पिजन या ब्रेन बगOm Verma
 
Artifact 1 Powerpoint
Artifact 1 PowerpointArtifact 1 Powerpoint
Artifact 1 Powerpointjrweathe
 
Ensenyament Idiomes
Ensenyament IdiomesEnsenyament Idiomes
Ensenyament Idiomesfrancescfs
 
Oral lang ece aps (july 28 2014) (final)
Oral lang ece aps (july 28 2014) (final)Oral lang ece aps (july 28 2014) (final)
Oral lang ece aps (july 28 2014) (final)SVTaylor123
 
Process Of Double Page Spread - Image
Process Of Double Page Spread - ImageProcess Of Double Page Spread - Image
Process Of Double Page Spread - Imagerosheen29
 
Town of Princeton Show & Shine Princeton BC Canada July 05 2014
Town of Princeton Show & Shine Princeton BC Canada July 05 2014 Town of Princeton Show & Shine Princeton BC Canada July 05 2014
Town of Princeton Show & Shine Princeton BC Canada July 05 2014 P. Anna Paddon
 

Viewers also liked (11)

Dangers of Cell phones सेलफोन – फ्रैंडली पिजन या ब्रेन बग
Dangers of Cell phones   सेलफोन – फ्रैंडली पिजन या ब्रेन बगDangers of Cell phones   सेलफोन – फ्रैंडली पिजन या ब्रेन बग
Dangers of Cell phones सेलफोन – फ्रैंडली पिजन या ब्रेन बग
 
Marc0s
Marc0sMarc0s
Marc0s
 
final19
final19final19
final19
 
MAIORINO
MAIORINOMAIORINO
MAIORINO
 
Boletim (14)
Boletim (14)Boletim (14)
Boletim (14)
 
Artifact 1 Powerpoint
Artifact 1 PowerpointArtifact 1 Powerpoint
Artifact 1 Powerpoint
 
Ensenyament Idiomes
Ensenyament IdiomesEnsenyament Idiomes
Ensenyament Idiomes
 
Oral lang ece aps (july 28 2014) (final)
Oral lang ece aps (july 28 2014) (final)Oral lang ece aps (july 28 2014) (final)
Oral lang ece aps (july 28 2014) (final)
 
Animals
AnimalsAnimals
Animals
 
Process Of Double Page Spread - Image
Process Of Double Page Spread - ImageProcess Of Double Page Spread - Image
Process Of Double Page Spread - Image
 
Town of Princeton Show & Shine Princeton BC Canada July 05 2014
Town of Princeton Show & Shine Princeton BC Canada July 05 2014 Town of Princeton Show & Shine Princeton BC Canada July 05 2014
Town of Princeton Show & Shine Princeton BC Canada July 05 2014
 

Recently uploaded

UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 

Recently uploaded (20)

UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 

Ajax jquery

  • 1. How to Use jQuery’s $.ajax() Function In our previous blog(What is AJAX and How it works ?), we discussed about AJAX and how to implement the same using jQuery. We did try to learn the same with the help of an basic example. In this tutorial, we are going to take it from there and will try to understand about the various available parameter in ajax function. Though we can’t cover all as it is a long list which you can read here but we shall cover the important parameters. But before that, let’s take another example. var request = $.ajax({ type: "POST", url: "submit.php", data: { username: $('#username').val(), email: $('#email').val() } }); request.done(function(response, textStatus, jqXHR) { alert( response ); }); request.fail(function(jqXHR, textStatus, errorThrown) { alert( "The following error occured (" + textStatus + "," + errorThrown +")." );
  • 2. }); In this example, Success and fail cases have been implemented. Upon receiving a successful response from server, request.done callback will be executed else request.fail will be executed. There is another callback function named as “always()”, which will be executed irrespective of successful and failed response. jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { }); .always() method replaces the deprecated .complete() method. Till now, we have covered the success and fail method along with always method, using which you can successfully implement your AJAX requests. Now as we discussed in out previous blog () about the parameters of ajax function so let’s learn more about them. accepts: The content type sent in the request header that tells the server what kind of response it will accept in return. async: By default, all requests are asynchronous. If you need synchronous requests, set this option to false. beforeSend: A pre-request callback function that can be used to modify the jqXHR object before it is sent. cache: If set to false, it will force requested pages not to be cached by the browser. complete: A function to be called when the request finishes (after success and error callbacks are executed). contents: An object of string/regular-expression pairs that determine how jQuery will parse the response. contentType: Set the content type of the data sent to the server. context: An object to use as the context (this) of all Ajax-related callbacks. converters: An object containing dataType-to-dataType converters. crossDomain: If you want to make a crossDomain request then set this property to true data: Data to be sent to the server. It is converted to a query string, if not already a string. dataFilter: A function to be used to handle the raw response data of XMLHttpRequest. This is a pre-filtering function to sanitize the response. dataType: The type of data expected back from the server error: A function to be called if the request fails global: Whether to trigger global Ajax event handlers for this request
  • 3. headers: An object of additional headers to send to the server ifModified: Set this option to true if you want to force the request to be successful only if the response has changed since the last request isLocal: Set this option to true if you want to force jQuery to recognize the current environment as “local” Please visit jquery official documentation to learn more about the rest of parameters. References: [1].http://www.calipus.com/blog/how-to-use-jquerys-ajax- function/ [2].http://api.jquery.com/jquery.ajax/