Created
March 15, 2021 18:45
-
-
Save AlekVolsk/da7e5a2bd7562434a61092006c90936a to your computer and use it in GitHub Desktop.
Ajax query function in native js using jquery syntax
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function ajax ({ // объект(!) | |
url, // url | |
type = 'GET', // *GET|POST | |
data = {}, // document.getElementById('formId') | FormData obj | serialized string | json | {} | |
dataType = 'json', // output format: *'json' | 'html' | 'formData' (FormData obj, return json from the backend!) | |
contentType = null, // Content-Type header string | |
before = () => {}, | |
success = (response) => {}, | |
error = (response, status) => {}, | |
after = () => {} | |
}) { | |
// before event | |
if (typeof (before) == 'function') { | |
before(); | |
} | |
// data processing | |
let formData; | |
if (data instanceof FormData) { | |
formData = data; | |
} else { | |
if (data.nodeName === 'FORM') { | |
formData = new FormData(data); | |
} else { | |
formData = new FormData(); | |
if (typeof (data) == 'string') { | |
try { | |
data = JSON.parse(data); | |
} catch (e) { | |
data = unserialize(data); | |
} | |
} | |
if (typeof (data) == 'object') { | |
for ( let key in data ) { | |
formData.append(key, data[key]); | |
} | |
} | |
} | |
} | |
// worker | |
let response = null; | |
let request = new XMLHttpRequest(); | |
request.onreadystatechange = function () { | |
if (this.readyState === 4) { | |
if (this.status === 200) { | |
try { | |
// success event | |
response = this.response; | |
if (typeof (success) == 'function') { | |
switch (dataType) { | |
case 'json': | |
response = JSON.parse(this.response); | |
break; | |
case 'formData': | |
let formResponse = JSON.parse(this.response); | |
response = new FormData(); | |
for ( let key in formResponse ) { | |
response.append(key, formResponse[key]); | |
} | |
break; | |
default: | |
} | |
success(response); | |
} | |
} catch (e) { | |
response = null; | |
console.error('AJAX():', e); | |
} | |
} else { | |
// error event | |
console.error('AJAX(): ' + this.status + ' ' + this.statusText); | |
if (typeof (error) == 'function') { | |
error(this.response, this.status); | |
} | |
} | |
// after event | |
if (typeof (after) == 'function') { | |
after(); | |
} | |
} | |
}; | |
// send | |
request.open(type, url); | |
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); | |
if (contentType) { | |
request.setRequestHeader('Content-Type', contentType); | |
} | |
request.send(formData); | |
} | |
function unserialize(s) { | |
a = s.split('&'); | |
out = {}; | |
for (let k in a) { | |
let b = a[k].split('='); | |
out[b[0]] = decodeURIComponent(b[1]) ?? ''; | |
} | |
return out; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment