JSOM, You can use the SharePoint client object model to retrieve, update, and manage data in SharePoint
For more information, use below link
Complete basic operations using JavaScript library code in SharePoint
REST : SharePoint introduces a Representational State Transfer (REST) service that is comparable to the existing SharePoint client object models. Now, developers can interact remotely with SharePoint data by using any technology that supports REST web requests. This means that developers can perform Create, Read, Update, and Delete (CRUD) operations from their SharePoint Add-ins, solutions, and client applications, using REST web technologies and standard Open Data Protocol (OData) syntax.
For more information, use below link
Get to know the SharePoint REST service
Retrieve the SharePoint list items using rest and caml query (Including caml query in the body) using below code
function restCallwithCaml(listName, caml) {
/// get the site url
var siteUrl = _spPageContextInfo.webAbsoluteUrl;
/// set request data
var data = { 'query' :{'__metadata': { 'type': 'SP.CamlQuery' }, 'ViewXml': caml}};
/// make an ajax call
$.ajax({
url: siteUrl+"/_api/Web/Lists/getByTitle(listName)/GetItems?$select=ID,Title",
method: "POST",
data: JSON.stringify(data),
headers: {
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
'content-type': 'application/json;odata=verbose',
'accept': 'application/json;odata=verbose',
},
success: function (response) {
alert('success');
console.log(response);
///do your code
},
error: function (data) {
alert('error');
///do your code
}
});
}
var caml = <camlquery>;
var list = <listname>;
restCallwithCaml(list, caml);
Retrieve the SharePoint list items using rest and caml query (Including caml query in the query string) using below code
var viewXml = {
ViewXml: "<camlquery-here>"
}
var call = jQuery.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/getByTitle('<listname-here>')/GetItems(query=@v1)?$select=Title,FileRef,EncodedAbsUrl&" +
"@v1=" + JSON.stringify(viewXml),
type: "POST",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
}
});
call.done(function (data) {
console.log(data);
jQuery.each(data.d.results, function (index, value) {
//console.log(value.Title);
});
});
call.fail(function (jqXHR) {
var response = "";
var response = "";
try {
var parsed = JSON.parse(jqXHR.responseText);
response = parsed.error.message.value;
} catch (e) {
response = jqXHR.responseText;
}
alert("Call failed. Error: " + response);
});
If you want improve the REST API performance, hope below link will be helpful
Improving REST API performance with JSON Light
If you have idea to improve my answer. Please do comment.
Thank you.