AJAX
Basics
Data
DOM
Effects
Events
Forms
jQuery UI
Plug Ins
Traversing
Complete blueprint of an GET ajax call. Your callback functions will receive three arguments (all optional) from the call itself.
The optional callback parameter specifies a callback function to run when the given method is completed. The callback function can have three different parameters (name is mutable):
responseTxt
- contains the resulting content if the call succeedsstatusTxt
- contains the status of the callxhr
- contains the XMLHttpRequest objecthttps://api.jquery.com/jQuery.ajax/
View the console.
async function GetCityWithPointsOfInterest(cityId)
{
const ajaxConfig =
{
url: `https://city-info-api-prod.azurewebsites.net/api/v1.0/cities/${cityId}?includePointsOfInterest=true`,
type: "GET",
async: true, // default
dataType: "json", //what we expect back from server
headers: {
"Content-Type": "application/json",
"x-custom-header": "foobar"
}
};
let apiResults = await $.ajax(ajaxConfig)
.done(function (responseTxt, statusTxt, xhr)
{
// success code here
console.log("DONE callback function");
console.log("responseTxt");
console.dir(responseTxt);
console.log("statusTxt");
console.dir(statusTxt);
console.log("xhr");
console.dir(xhr);
if (statusTxt === "success")
{
console.log(" success! ");
}
})
.fail(function (xhr, statusTxt, errorThrown)
{
// fail code here
console.log("FAIL callback function");
console.log("xhr");
console.dir(xhr);
console.log("statusTxt");
console.dir(statusTxt);
console.log("errorThrown");
console.dir(errorThrown);
})
.always(function (responseTxt, statusTxt, xhr)
{
//always executed
// if success, you get back data, textStatus, jqXHR
// if fail, you get back XHR, textStatus, errorThrow
console.log("ALWAYS callback function");
console.log("responseTxt");
console.dir(responseTxt);
console.log("statusTxt");
console.dir(statusTxt);
console.log("xhr");
console.dir(xhr);
});
return apiResults;
}