{"id":15561393,"url":"https://github.com/usernane/ajaxrequestjs","last_synced_at":"2025-08-27T05:13:12.888Z","repository":{"id":37941909,"uuid":"118725580","full_name":"usernane/AJAXRequestJs","owner":"usernane","description":"A JavaScript class library that can help in managing AJAX requests in simple way.","archived":false,"fork":false,"pushed_at":"2023-07-19T07:39:58.000Z","size":186,"stargazers_count":5,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T01:15:55.662Z","etag":null,"topics":["ajax","ajax-request","csrf","hacktoberfest","javascript","web"],"latest_commit_sha":null,"homepage":"https://ajaxrequestjs.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/usernane.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-24T06:55:01.000Z","updated_at":"2023-07-06T23:17:18.000Z","dependencies_parsed_at":"2024-10-21T12:49:59.852Z","dependency_job_id":null,"html_url":"https://github.com/usernane/AJAXRequestJs","commit_stats":{"total_commits":164,"total_committers":3,"mean_commits":"54.666666666666664","dds":"0.12804878048780488","last_synced_commit":"cc1a751e39dad41d2fd66883d55c264ee9de8b0f"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/usernane/AJAXRequestJs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usernane%2FAJAXRequestJs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usernane%2FAJAXRequestJs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usernane%2FAJAXRequestJs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usernane%2FAJAXRequestJs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/usernane","download_url":"https://codeload.github.com/usernane/AJAXRequestJs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usernane%2FAJAXRequestJs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272294094,"owners_count":24908760,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-27T02:00:09.397Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","ajax-request","csrf","hacktoberfest","javascript","web"],"created_at":"2024-10-02T16:07:54.641Z","updated_at":"2025-08-27T05:13:12.837Z","avatar_url":"https://github.com/usernane.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AJAXRequest.js\nA light weight JavaScript class library that can help in making AJAX requests much simpler task. \n\n\u003cp align=\"left\"\u003e\n\u003cimg alt=\"jsDelivr hits (GitHub)\" src=\"https://img.shields.io/jsdelivr/gh/hm/usernane/AJAXRequestJs\"\u003e\n\u003c/p\u003e\n\n## Table of Content\n* \u003ca href=\"#main-features\"\u003eMain Features\u003c/a\u003e\n* \u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\n* \u003ca href=\"#basic-usage\"\u003eBasic Usage\u003c/a\u003e\n* \u003ca href=\"#properties-accessable-in-callbacks\"\u003eProperties Accessable in Callbacks\u003c/a\u003e\n* \u003ca href=\"#types-of-callbacks\"\u003eTypes of Callbacks\u003c/a\u003e \n  * \u003ca href=\"#before-ajax\"\u003eBefore AJAX\u003c/a\u003e\n  * \u003ca href=\"#after-ajax\"\u003eAfter AJAX\u003c/a\u003e\n  * \u003ca href=\"#on-success\"\u003eOn Success\u003c/a\u003e\n  * \u003ca href=\"#on-client-error\"\u003eOn Client Error\u003c/a\u003e\n  * \u003ca href=\"#on-server-error\"\u003eOn Server Error\u003c/a\u003e\n  * \u003ca href=\"#on-disconnected\"\u003eOn Disconnected\u003c/a\u003e\n  * \u003ca href=\"#on-error\"\u003eOn Error\u003c/a\u003e\n* \u003ca href=\"#sending-parameters-to-server\"\u003eSending Parameters to Server\u003c/a\u003e\n* \u003ca href=\"#adding-custom-headers\"\u003eAdding Custom Headers\u003c/a\u003e\n* \u003ca href=\"#csrf-token\"\u003eCSRF Token\u003c/a\u003e\n* \u003ca href=\"#customizing-callback-options\"\u003eCustomizing Callback Options\u003c/a\u003e\n  * \u003ca href=\"#custom-id\"\u003eCustom ID\u003c/a\u003e\n  * \u003ca href=\"#enabling-or-disabling\"\u003eEnabling or Disabling\u003c/a\u003e\n  * \u003ca href=\"#binding-properties\"\u003eBinding Properties\u003c/a\u003e\n* \u003ca href=\"#retry\"\u003eRetry\u003c/a\u003e\n* \u003ca href=\"#verbose-mode\"\u003eVerbose Mode\u003c/a\u003e\n* \u003ca href=\"#api-reference\"\u003eAPI Docs\u003c/a\u003e\n* \u003ca href=\"#usage-examples\"\u003eUsage Examples\u003c/a\u003e\n* \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n\n## Main features:\n* Assign multiple callbacks to execute before sending AJAX, on success, client error, server error, on disconnected or after AJAX is completed.\n* Get server response as a JSON, plain text or XML.\n* Enable and disable callbacks as needed based on conditions.\n* Adding custom headers to the request.\n* Automatic CSRF token extraction.\n\n## Installation\nIn order to use the library, you must first include the JavaScript file in your head tag of your web page. To have the latest v2.x.x release, include the following tag:\n``` html\n\u003chead\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/gh/usernane/AJAXRequestJs@2.x.x/AJAXRequest.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\nIt is possible to use the minified version of the libray by including the following JavaScript:\n\n``` html\n\u003chead\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/gh/usernane/AJAXRequestJs@2.x.x/AJAXRequest.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n\n## Basic Usage\nThe following code sample shows the most basic usage of the library.\n``` javascript\n// Use the global instance 'ajax'. Another option is to create new instance of the class [`AJAXRequest`](https://github.com/usernane/AJAXRequestJs/blob/master/AJAXRequest.js)\najax.setMethod('get');\n\n//The URL that will receive the request.\najax.setURL('https://api.github.com/repos/usernane/AJAXRequestJs');\n\n//enable verbose mode for development to get more informative messages in the console\najax.verbos = true;\n\n//Adds one callback to execute on success. We can add more.\najax.setOnSuccess(function(){\n    //The response might be stored as JSON object\n    if(this.jsonResponse){\n        console.log(this.jsonResponse);\n    } else {\n        //Or, it can be plain\n        console.log(this.response);\n    }\n});\n    \najax.send();\n\n```\n## Configuration\nWhen creating an instance of the class `AJAXRequest`, there are configuration options which are optional. They can be used to initialize the attributes of the instance.\n\n``` javascript\n{\n    /**\n     * The base URL that will receive the request.\n     */\n    base:string,\n    \n    /**\n     * The URL that will receive the request or the path part of the URL if base is set.\n     */\n    url:string,\n    \n    /**\n     * Request method. If not provided, 'GET' is used.\n     */\n    method:string,\n    \n    /**\n     * Parameters which will be send with the request. It can be an object, a \n     * `FormData` object or string in the form `key1=value1\u0026key2=value2`.\n     */\n    params:object|string|FormData,\n    \n    /**\n     * A boolean which is used to enable or disable AJAX.\n     */\n    enabled:true,\n    \n    /**\n     * If this one is set to true, more informative messages will appear in the console.\n     */\n    verbose:boolean,\n    \n    /**\n     * Extra headers to send with the request.\n     */\n    headers:{},\n    \n    /**\n     * A set of callbacks. The enabled ones will be executed before AJAX request is sent.\n     * The developer can use them to collect user inputs or intrupt AJAX request and disable it before \n     * Sending it to server.\n     */\n    beforeAjax:array|function, \n    \n    /**\n     * A set of callbacks. The enabled ones executed when the request is finished with status code 2xx or 3xx.\n     */\n    onSuccess:array|function, \n    \n    /**\n     * A set of callbacks. The enabled ones executed when the request is finished with status code 4xx.\n     */\n    onClientErr:array|function, \n    \n    /**\n     * A set of callbacks. The enabled ones executed when the request is finished with status code 5xx.\n     */\n    onServerErr:array|function, \n    \n    /**\n     * A set of callbacks. The enabled ones executed when there is no interned connection.\n     */\n    onDisconnected:array|function, \n    \n    /**\n     * A set of callbacks. The enabled ones executed when the request is finished without \n     * looking at the status of the response.\n     */\n    afterAjax:array|function, \n    \n    /**\n     * A set of callbacks. The enabled ones executed when an exception is thrown by \n     * any callback in the 'beforeAjax', 'afterAjax', 'onSuccess', 'onClientErr',\n     * 'onServerErr' and 'onDisconnected'.\n     */\n    onErr:array|function,\n}\n```\n\n## Properties Accessable in Callbacks\nInside the callback that will be executed, developer will have access to the properties of AJAX request and its response. The developer can use the keyword `this` to access them. The available properties are as follows:\n\n``` javascript\nfunction () {\n    \n    //The instance of the class. Can be used to modify the attributes of the object within the callback.\n    this.AJAXRequest;\n    \n    //Response status code such as 200 or 404.\n    this.status;\n    \n    //Server response as string.\n    this.response;\n    \n    //If the server sent the response as JSON, this attribute is set to JSON object. \n    //If not sent as JSON, it will be set to null.\n    this.jsonResponse;\n    \n    //If the server sent the response as XML, this one will be set to a \n    //string that represents the received xml tree.\n    this.xmlResponse\n    \n    //An object that contains response headers. The keys of the object are headers \n    //names and the values are headers values.\n    this.responseHeaders;\n    \n    //An object that holds binded object information.\n    this.props\n}\n```\nNote that for the callbacks which are set to be executed before the AJAX request is sent to the server only the property `this.AJAXRequest` is available. The other ones will be `undefined`. For the `onErr` callbacks, there is additional property which has the name `e` that represents the thrown [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) and can be accessed in same manner.\n\n## Types of Callbacks\nOne of the features of the library is the ability to set functions to execute in specific cases. In this section, we explain the available callbacks and how to use them.\n\n### Before AJAX\nUsually, before sending AJAX request to the server, checking for user inputs validation happens in this callback. A callback of this type can be set using the method `AJAXRequest.setBeforeAjax()`. Also, it can be part of the configuration that is used to initialize the `AJAXRequest` instance. This type of callback works as an interceptor. \n\n```  javascript\najax.setMethod('get');\najax.setBase('https://api.github.com/repo');\najax.setURL('url:'usernane/AJAXRequestJs');\n\n//A call back can be added as an object or a function.\n//Add as an object for customizing options.\najax.setBeforeAjax({\n  id:'Update Name',\n  callback:function(){\n       // Collect user inputs, validate them, etc...\n       var firstName = document.getElementById('name-input').value.trim();\n       if (firstName.length === 0) {\n           this.AJAXRequest.setEnabled(false);\n           console.log('Missing name.');\n       } else {\n           this.AJAXRequest.setEnabled(true);\n       }\n       this.AJAXRequest.setParams({\n           name:firstName\n       });\n   }\n});\n\n//Note that the callback will not override the existing one.\n//It will be added beside the existng one.\nvar id = ajax.setBeforeAjax(function() {\n    // Do something else\n});\n```\n### After AJAX\nThis type of callback will be executed after AJAX response is received. It will get executed regradless of response code of the server. This acts like the `finally` in a `try-catch` statement. If the developer would like to handle server response in case of error and success, he can use this callback.\n``` javascript\n//Creating new instance instead of using global 'ajax' constant.\nvar ajaxObj = new AJAXRequest({\n    method:'get',\n    base:'https://api.github.com/repos',\n    url:'usernane/AJAXRequestJs',\n    \n    afterAjax:function(){\n         console.log('Status code: '+this.status);\n         if (this.status \u003c 400) {\n             console.log('No Errors');\n         } else if (this.status \u003e= 400) {\n             console.error('Error')\n         }\n     }\n});\n\nvar id = ajaxObj.setAfterAjax(function() {\n    // Do something else\n});\n```\n\n### On Success\nThe on success callback is executed when the server sends a 2xx or 3xx response code.\n``` javascript\nvar ajaxObj = new AJAXRequest({\n    method:'get',\n    url:'https://api.github.com/repos/usernane/AJAXRequestJs',\n    \n    onSuccess:function(){\n         console.log('Status code: '+this.status);\n         if (this.jsonResponse !== null) {\n             console.log('Received server response as JSON.');\n             console.log(this.jsonResponse);\n         } else if (this.xmlResponse !== null) {\n             console.log('Received server response as XML.');\n             console.log(this.xmlResponse);\n         } else {\n             console.log('Received server response as plain text.');\n             console.log(this.response);\n         }\n     }\n});\n\nvar id = ajaxObj.setOnSuccess(function() {\n    // Do something else\n});\n```\n### On Client Error\nThe on client callback is executed when the server sends a 4xx response code.\n\n``` javascript\nvar ajaxObj = new AJAXRequest({\n    method:'get',\n    url:'https://api.github.com/repos/usernane/AJAXRequestJs',\n    \n    onClientErr:function(){\n         console.log('Status code: '+this.status);\n         if (this.jsonResponse !== null) {\n             console.log('Received server response as JSON.');\n             console.log(this.jsonResponse);\n         } else if (this.xmlResponse !== null) {\n             console.log('Received server response as XML.');\n             console.log(this.xmlResponse);\n         } else {\n             console.log('Received server response as plain text.');\n             console.log(this.response);\n         }\n     }\n});\n\nvar id = ajax.setOnClientError(function() {\n    // Do something else\n});\n```\n### On Server Error\nThe on server error callback is executed when the server sends a 5xx response code. \n``` javascript\nvar ajaxObj = new AJAXRequest({\n    method:'get',\n    url:'https://api.github.com/repos/usernane/AJAXRequestJs',\n    \n    onServerErr:[\n        function(){\n            console.log('Status code: '+this.status);\n            if (this.jsonResponse !== null) {\n                console.log('Received server response as JSON.');\n                console.log(this.jsonResponse);\n            } else if (this.xmlResponse !== null) {\n                console.log('Received server response as XML.');\n                console.log(this.xmlResponse);\n            } else {\n                console.log('Received server response as plain text.');\n                console.log(this.response);\n            }\n        }\n    ]\n});\n\nvar id = ajaxObj.setOnServerError(function() {\n    // Do something else\n});\n```\n\n### On Disconnected\nThe on disconnected callback is executed when the class detects that there is no internet connection is available. \n``` javascript\nvar ajaxObj = new AJAXRequest({\n    method:'get',\n    url:'https://api.github.com/repos/usernane/AJAXRequestJs',\n    \n    onDisconnected:[\n        function(){\n            console.log('Status code: '+this.status);\n            console.error('No internet connection! Make sure that you are connected to the internet.');\n        }\n    ]\n});\n\nvar id = ajaxObj.setOnDisconnected(function() {\n    // Do something else\n});\n```\n\n### On Error\nThis type of callback will be executed only when an exception is thrown by any callback which is included in the `beforeAjax`, `afterAjax`, `onSuccess`, `onClientErr`, `onServerErr` or `onDisconnected`. Think of it as the `catch` block of the AJAX request.\n\n``` javascript\nvar ajaxObj = new AJAXRequest({\n    method:'get',\n    url:'https://api.github.com/repos/usernane/AJAXRequestJs',\n    \n    onErr:function(){\n         console.log('An error in the code');\n         console.log(this.e);\n     }\n});\n\nvar id = ajaxObj.setOnError(function() {\n    // Do something else\n});\n```\n\n## Sending Parameters to Server\nThe class does support sending data using `GET`, `POST`, or `DELETE` request methods. The data can be a simple string, an object or a `DataForm` object. \n\n### As a String\nThe following sample code shows how to send parameters to the server as an object. We use `packagist.org` public API in this example.\n``` javascript\n var ajax = new AJAXRequest({\n    method:'get',\n    url:'https://packagist.org/packages/list.json',\n    params:'vendor=webfiori',\n    onSuccess: [\n        function(){\n            if (this.jsonResponse) {\n                // We must know the format of JSON object to get data.\n                for(var x = 0 ; x \u003c this.jsonResponse.packageNames.length ; x++) {\n                    console.log('Package #'+x+' Name: '+this.jsonResponse.packageNames[x]);\n                }\n            } else {\n              console.warn('No JSON data was received.');\n            }\n        }\n    ]\n}).send();\n```\n\n### As an Object\nThe following sample code shows how to send parameters to the server as a JavaScript object. This time, we are using the methods of the class `AJAXRequest` instead of using the configuration object.\n``` javascript\n var ajaxObj = new AJAXRequest({\n    method:'get',\n    url:'https://packagist.org/search.json'\n});\n\n// Adds a custom parameter.\nvar searchString = 'webfiori';\nvar seachObj = {\n    q:searchString\n};\najaxObj.setParams(seachObj);\najaxObj.setOnSuccess(function(){\n    if (this.jsonResponse) {\n        console.warn('Printing Search Results:');\n        for(var x = 0 ; x \u003c this.jsonResponse.results.length ; x++) {\n            var searchResult = this.jsonResponse.results[x];\n            console.warn('Result #'+x+' Info:');\n            console.log('Package Name: '+searchResult.name);\n            console.log('Description: '+searchResult.description);\n            console.log('Link: '+searchResult.url);\n            console.log('Total Downloads: '+searchResult.downloads);\n        }\n    } else {\n        console.warn('No JSON data was received.');\n    }\n});\najaxObj.send();\n```\n### As a `FormData` Object\n`FormData` is usually used to send data to the server using `POST` or `PUT` to modify something in the database. Also, it can be used to upload files to the server. Simply, we create the object `FormData`, add the attributes and use the method `AJAXRequest.setParams()`. This time, we collect user input on a callback which is executed before sending the request. Let's assume that we have the following HTML code.\n``` html \n\u003cdiv id=\"search-form\"\u003e\n  \u003clabel for=\"search-input\"\u003eType in Search Term:\u003c/label\u003e\n  \u003cinput type=\"text\" name=\"search-term\"\u003e\n  \n  //Notice how we call the 'send' method.\n  \u003cinput type=\"submit\" onclick=\"window.ajax.send()\"\u003e\n\u003c/div\u003e\n\u003cdiv id=\"search-result-display\"\u003e\n    \u003c!--search results will appear here--\u003e\n\u003c/div\u003e\n```\nThe following JavasScript code can be used to handel the search action.\n\n``` javascript\nvar ajaxObj = new AJAXRequest({\n    url:'https://example.com/search',\n    beforeAjax:[\n        function () {\n            var searchTerm = document.getElementById('search-term-input').value;\n            var form = new FormData();\n            form.append('search-term',searchTerm);\n            \n            //We set the parameters inside the callback.\n            this.AJAXRequest.setParams(form);\n            \n            document.getElementById('search-result-display').innerHTML = 'Searching for \"'+searchTerm+'\"....';\n        }\n    ],\n    onSuccess: [\n        function () {\n            document.getElementById('search-result-display').innerHTML = this.response;\n        }\n    ]\n});\n```\n\n## Adding Custom Headers\nIt is possible to add custom headers to the request in two ways. One way is to use the configuration variable `headers` and the second one is to use the method `AJAXRequest.addHeader()`. The following example shows how to add headers using first way.\n``` javascript\nvar ajaxObj = new AJAXRequest({\n    url:'https://example.com/api',\n    method:'post',\n    headers:{\n        //The request will be sent with two additional headers.\n        'custom-header-1':'Header value',\n        'token':'Some token'\n    },\n    onSuccess:[\n        function () {\n            //...\n        }\n    ]\n}).send();\n```\n\nThe next example shows how to use second way.\n\n``` javascript\nvar ajaxObj = new AJAXRequest({\n    url:'https://example.com/api',\n    method:'post',\n    onSuccess:[\n        function () {\n            //...\n        }\n    ]\n});\najaxObj.addHeader('custom-header-1','Header value');\najaxObj.addHeader('token','Some token');\najaxObj.send();\n```\n\n## CSRF Token\nThe library can extract CSRF token from the DOM and send it with request headers automatically. In order for this to happen, the token must be stored somewhere. There are 3 ways at which the token can be kept in the client side:\n* As a `meta` tag with `name=\"csrf-token` and `content=\"the_token\"`.\n* As an input element with `name=\"csrf-token` and `value=\"the_token\"`.\n* As a `window.csrfToken` variable. \nIf one of the 3 is met, the token will be sent to the server in the headers. The name of the header will be `X-CSRF-TOKEN`. Note that the token must be created and set by the server. Also, note that it will be only sent with unsafe request methods (`PUT`,`POST` and `DELETE`).\n\n## Customizing Callback Options\n\nWhen adding new callback, it can be added as a function or as an object. The later way can be used to customize callback options and how it behave. When adding a callback as an object, the object can have following properties:\n\n``` javascript\n{\n //An ID for the callback.\n id:'My Callback',\n \n //A boolean or a function that evaluate to true. Used to decide if the callback will be executed or not.\n call:true,\n \n //An optional object that holds properties at which they can be accessed withen the callback\n props:{}\n \n //The callback function\n callback:function\n}\n``` \n\n### Custom ID\nThe ID is used to distinguish callbacks from each other in one pool. This means it is not possible to have two callbacks with same IDs set for a case such as `on-success`. The property that is used to set custom ID has the name `id`. \n\n\n``` javascript\n// This is not allowed. The second callback will not be added since one with same ID was added.\najax.setOnSuccess({\n id:'Update User',\n callback:function () {\n  //...\n }\n});\najax.setOnSuccess({\n id:'Update User',\n callback:function () {\n  //...\n }\n});\n```\n\nOn the other hand, it is possible to have two callbacks in two pools with same ID. This can help in grouping callbacks in different pools and enable or disable them using one ID.\n\n``` javascript\n// This is allowed.\n\najax.setOnSuccess({\n id:'Update User',\n callback:function () {\n  //...\n }\n});\najax.setOnClientError({\n id:'Update User',\n callback:function () {\n  //...\n }\n});\najax.setOnServerError({\n id:'Update User',\n callback:function () {\n  //...\n }\n});\n\n// Now can enable or disable them in one batch\najax.setCallsEnabled('Update User', false);\n```\n\n### Enabling or Disabling\n\nOne feature that the developer can use is the ability to disable or enable callback based on function expression. If the function evaluate to true, then the callback will be executed. Other than that, it will be skipped.\n\nThe property that is used to set if the callback is enabled or disabled has the name `call`.\n\n``` javascript\najax.setOnServerError({\n id:'Update User',\n call:function() {\n  if (this.status === 505) {\n   return true;\n  }\n  return false;\n },\n callback:function () {\n  //...\n }\n});\n\n```\n\n### Binding Properties \n\nThe developer might want to access properties which are not in the scope of the function. One way to do it is to have global variables. Another way which is the recomended way is to bind the variables with properties while adding the callback and later access them.\n\n``` javascript\nvar obj = {username:'Ibrahim'};\n\najax.setOnServerError({\n id:'Update User',\n props: obj\n callback:function () {\n //Will print the value of 'obj.username' which is 'Ibrahim'.\n  console.log(this.props.username);\n }\n```\n\nIf the value of the property is changed inside the callback, it will be also changed in the referenced objec.\n\nAnother way to bind an object to multiple callbacks is to use the method `AJAXRequest.bind()`. The method can be used to bind an object to multipe callbacks in multiple pools or to specific callback in specific pool.\n\n``` javascript\nvar o1 = {\n name:'Hassan'\n};\n//Bind with all callbacks\najax.bind(o1);\n\n//Bind with any callback with ID = 'AJAX Success' on all pools.\najax.bind(o1, 'AJAX Success');\n\n//Bind with all callbacks on the pool 'success'.\najax.bind(o1, null, 'success');\n\n//Bind with all callback with ID = 'AJAX Success' on the pool 'success'.\najax.bind(o1, 'AJAX Success', 'success');\n```\n## Retry\nOne of the features of the library is to have it retry to send AJAX request in case there was no internet connection. The developer can use the method `AJAXRequest.setRetry()` to specify retry attributes. The method has 4 parameters, `times`, `timeBetweenEachTryInSeconds`, `func` and , `props`. The parameter `times` represents how many times to attempt AJAX request before stopping. The parameter `timeBetweenEachTryInSeconds` represents number of seconds to wait before attemting to send the request again. The `func` is a callback to execute in case of retry event. The last parameter is an object that holds extra parameters to pass to the callback.\n\nThe callback will have two parameters, first one is number of seconds remaining before retrying and, second one is pass number (current retry attempt number).\n\nThe following code sample shows basic use case for this functionality.\n\n``` javascript\n\najax.setRetry(4, 14, function (remainingSec, passNum) {\n  console.log('Pass number: '+passNum);\n  console.log('Retry after '+remainingSec);\n});\n\n```\n\n## Verbose Mode\nVerbose mode is used in development. It shows more informative messages in the console regarding the execution. To enable or disable verbose mode, the developer must change the value of the property `verbose` of the instance as follows:\n\n``` javascript\n// Enabled\najax.verbose = true;\n\n// Disabled\najax.verbose = false;\n```\n\n## API Reference\nIf you would like to read the API reference of the library, please check \u003ca href=\"https://github.com/usernane/AJAXRequestJs/blob/master/docs/README.md\"\u003ehere\u003c/a\u003e.\n\n## Usage Examples\nIf you are looking for example on how to use the library, please check \u003ca href=\"https://github.com/usernane/AJAXRequestJs/tree/master/examples\"\u003ehere\u003c/a\u003e.\n\n## License\nThe project is licensed under MIT license.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusernane%2Fajaxrequestjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fusernane%2Fajaxrequestjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusernane%2Fajaxrequestjs/lists"}