{"id":9849,"date":"2021-04-23T10:05:18","date_gmt":"2021-04-23T01:05:18","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=9849"},"modified":"2021-04-23T13:07:10","modified_gmt":"2021-04-23T04:07:10","slug":"how-ajax-works-using-the-jquery-library","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/9849","title":{"rendered":"How AJAX Works Using the jQuery Library"},"content":{"rendered":"\n

The jQuery ajax() method provides core functionality of AJAX in jQuery. It sends asynchronous HTTP requests to the server. <\/p>\n\n\n\n

The standard way of making an AJAX call using jQuery is rather simple \u2013 by using the $.ajax()<\/strong> function:<\/p>\n\n\n\n

<script>\n$.ajax(\n  '\/jquery\/getdata',\n  {\n      success: function(data) {\n        alert('AJAX call was successful!');\n        alert('Data from the server' + data);\n      },\n      error: function() {\n        alert('There was some error performing the AJAX call!');\n      }\n   }\n);\n<\/script><\/code><\/pre>\n\n\n\n
As you already known, the $ <\/strong>sign is used to refer to a jQuery object.<\/p>\n\n\n\n
In the above example, the first parameter is  string URL to which you want to submit or retrieve the data.<\/p>\n\n\n\n
The second parameter is the JSON format. By default, ajax() method performs http GET request if option parameter does not include method option. <\/p>\n\n\n\n
In most cases, we will need to specify the success and error callbacks. The success callback will be called after the successful completion of the Ajax call. On the other hand, the failure callback will be called if something goes wrong and there was an issue performing the AJAX call.<\/p>\n\n\n\n
Using Promises for AJAX with jQuery     <\/strong>     <\/h4>\n\n\n\n
$.ajax method supports JavaScript Promises as well.  <\/p>\n\n\n\n
.done()<\/strong> as replacement for .success()<\/strong><\/p>\n\n\n\n
.fail()<\/strong> as replacement for .error()<\/strong><\/p>\n\n\n\n
.always()<\/strong> as replacement for .complete()<\/strong><\/p>\n\n\n\n
$.ajax({\n       data: someData,\n       dataType: 'json',\n       url: '\/path\/to\/script'\n}).done(function(data) {\n      \/\/ If successful\n      console.log(data);\n}).fail(function(jqXHR, textStatus, errorThrown) {\n      \/\/ If fail\n      console.log(textStatus + ': ' + errorThrown);\n});<\/code><\/pre>\n\n\n\n
Chaining Works<\/strong><\/h4>\n\n\n\n
Assign the $.ajax()<\/strong> method to a variable, for which we can chain promise callbacks to. In this example, the $.ajax() method returns a promise object natively, which we can use chaining too:<\/p>\n\n\n\n
var ajaxCall = $.ajax({\n   context: $(element),\n   data: someData,\n   dataType: 'json',\n   url: '\/path\/to\/script'\n});\n\najaxCall.done(function(data) {\n    console.log(data);\n});<\/code><\/pre>\n\n\n\n
Multiple AJAX calls<\/strong><\/h4>\n\n\n\n
We can compound several AJAX calls with their status $.when()<\/strong>.<\/p>\n\n\n\n
var a1 = $.ajax({...}),\na2 = $.ajax({...});\n\n$.when(a1, a2).done(function(r1, r2) {\n  console.log(r1[0]);\n  console.log(r2[0]);\n});<\/code><\/pre>\n\n\n\n
Dependence chain of AJAX requests<\/h4>\n\n\n\n
We can also chain multiple AJAX request. For example, when the second AJAX call relies on returned data on the first call. <\/p>\n\n\n\n
var a1\u200a= $.ajax({\n             url: '\/path\/to\/file',\n             dataType: 'json'\n         }),\n\n    a2 = a1.then(function(data) {\n    \/\/ .then() returns a new promise\n           return $.ajax({\n              url: '\/path\/to\/another\/file',\n              dataType: 'json',\n              data: data.sessionID\n             });\n         });\n\na2.done(function(data) {\n    console.log(data);\n});<\/code><\/pre>\n\n\n\n
By Ami<\/p>\n
\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>