How to make an AJAX call using JavaScript, without using jQuery?
-
22Please note that whilst a lot of the answers here suggest listening for _readystatechange_, modern browsers now support the _load_, _abort_, _progress_ and _error_ events for _XMLHttpRequest_ (you'll probably only care about _load_ though). – Paul S. Mar 31 '15 at 16:27
-
2@ImadoddinIbnAlauddin for instance when it's main functionality (DOM traversing) not needed. – SET Jul 10 '15 at 22:05
-
8http://youmightnotneedjquery.com/ a lot of pure js examples incl. ajax for ie8+, ie9+ and ie10+ – Sanya_Zol May 23 '16 at 18:12
-
1w3schools have a nice step by step introduction into ajax without jquery: https://www.w3schools.com/js/js_ajax_intro.asp – eli Sep 29 '17 at 11:31
-
You can also use EHTML: https://github.com/Guseyn/EHTML Use e-json element for fetching json and mapping it to the html element – Guseyn Ismayylov Nov 20 '19 at 11:22
23 Answers
With "vanilla" JavaScript:
<script type="text/javascript">
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
if (xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
else if (xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
alert('something else other than 200 was returned');
}
}
};
xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();
}
</script>
With jQuery:
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
-
1@Fractaliste If you simply call the callbacks after the if blocks relating to the xmlhttp.status, then just call them there and you're done. – Jay Jun 18 '15 at 20:30
-
6@Wade I think Gokigooooks is saying when he read _With "vanilla" JavaScript_ he thought it was a JavaScript library that he needed to download. He might also be referencing [Vanilla JS](http://vanilla-js.com/). – Trisped Jun 19 '15 at 22:05
Using the following snippet you can do similar things pretty easily, like this:
ajax.get('/test.php', {foo: 'bar'}, function() {});
Here is the snippet:
var ajax = {};
ajax.x = function () {
if (typeof XMLHttpRequest !== 'undefined') {
return new XMLHttpRequest();
}
var versions = [
"MSXML2.XmlHttp.6.0",
"MSXML2.XmlHttp.5.0",
"MSXML2.XmlHttp.4.0",
"MSXML2.XmlHttp.3.0",
"MSXML2.XmlHttp.2.0",
"Microsoft.XmlHttp"
];
var xhr;
for (var i = 0; i < versions.length; i++) {
try {
xhr = new ActiveXObject(versions[i]);
break;
} catch (e) {
}
}
return xhr;
};
ajax.send = function (url, callback, method, data, async) {
if (async === undefined) {
async = true;
}
var x = ajax.x();
x.open(method, url, async);
x.onreadystatechange = function () {
if (x.readyState == 4) {
callback(x.responseText)
}
};
if (method == 'POST') {
x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
x.send(data)
};
ajax.get = function (url, data, callback, async) {
var query = [];
for (var key in data) {
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async)
};
ajax.post = function (url, data, callback, async) {
var query = [];
for (var key in data) {
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
ajax.send(url, callback, 'POST', query.join('&'), async)
};
![](../../users/profiles/268074.webp)
- 42,792
- 26
- 149
- 203
-
1This is a really great jumpstart, but I think you're missing something that features in @3nigma's answer. That is, I'm not sure how much it makes sense to make certain requests (all get and some post) without returning the server response. I added another line at the end of the send method -- `return x.responseText;` -- and then return each of the `ajax.send` calls. – Sam Aug 13 '14 at 10:37
-
3@Sam you [typically] can't return as its an asynchronous request. You should handle the response in a callback. – Petah Aug 13 '14 at 11:18
-
@Sam there is an example in there: `ajax.get('/test.php', {foo: 'bar'}, function(responseText) { alert(responseText); });` – Petah Aug 13 '14 at 21:22
-
Nice snippet. However, shouldn't it be `query.join('&').replace(/%20/g, '+')` instead? – afsantos Sep 13 '14 at 12:47
-
@afsantos http://stackoverflow.com/questions/1634271/url-encoding-the-space-character-or-20 – Petah Sep 14 '14 at 02:56
-
@Petah - I think that something is wrong with your API. First at all, parameter named sync in open method can be called async because of signature of open method (http://www.w3.org/TR/XMLHttpRequest/#the-open()-method). Second one is a question. What's the point of callback if AJAX call is synchronized? – zblago Oct 28 '14 at 14:40
-
Hi nice answer. What's the purpose of `x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');`? Looks like the only line of voodoo in there apart from the activeX stuff (which I guess is for old versions of InternetEviscerator?) – JonnyRaa Dec 17 '14 at 13:44
-
@Shark It's not synchronous unless you explicitly make it synchronous. – Gabriel Tomitsuka Jun 03 '15 at 17:09
-
I am not much of an expert, so dont really know the reason why chrome threw error "{Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.} " at the line {x.open(method, url, sync);} – user1517108 Dec 25 '15 at 20:30
-
@user1517108 I saw the same issue in Chrome and updated the code with a fix: an omitted `async` parameter (like in the code sample) will now execute asynchronously. – Mike Jan 18 '16 at 16:06
-
3Please include CORS request also by including this line as an option. 'xhr.withCredentials = true;' – Akam Mar 02 '16 at 11:48
I know this is a fairly old question, but there is now a nicer API available natively in newer browsers. The fetch()
method allow you to make web requests.
For example, to request some json from /get-data
:
var opts = {
method: 'GET',
headers: {}
};
fetch('/get-data', opts).then(function (response) {
return response.json();
})
.then(function (body) {
//doSomething with body;
});
See here for more details.
![](../../users/profiles/90033.webp)
- 3,328
- 2
- 30
- 44
![](../../users/profiles/752756.webp)
- 5,693
- 4
- 22
- 28
-
11Actually, it would be incorrect to claim the Fetch API works in "newer browsers", since IE and Edge do not support it. (Edge 14 requires the user to specifically enable this function) http://caniuse.com/#feat=fetch – saluce Apr 12 '16 at 16:08
-
8There should be a mention of GitHub's polyfill here. https://github.com/github/fetch – TylerY86 Sep 29 '16 at 02:02
-
10
-
8@saluce Now it's enabled by default in Edge 14 (and IE is not "new" browser any more :-) – Supersharp Oct 01 '16 at 16:15
-
1Don't use Fetch on mobile. It has HTTP header lower-casing issue on Android. Works well on iOS. – Kenny Lim Jan 19 '17 at 05:35
-
1
You can use the following function:
function callAjax(url, callback){
var xmlhttp;
// compatible with IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
callback(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
You can try similar solutions online on these links:
![](../../users/profiles/905801.webp)
- 7,590
- 8
- 48
- 80
-
Also would be nice to add some input variable for request ( will be used in xmlhttp.send(request); ) – Pavel Perna Oct 18 '16 at 10:43
-
2@PavelPerna, since the example here is a `GET`, so you can just add them to the request, but to be more general, I'm with you, I really thought of updating the answer to accept request parameters as a parameter to the function here, & also to pass the method (`GET` or `POST`), but what stopped me is that I want to keep the answer here as simple as possible for folks to try it as quick as possible. Actually, I hated some other answers for being toooo long because they are trying to be perfect :) – AbdelHady Oct 19 '16 at 14:11
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
![](../../users/profiles/4575671.webp)
- 2,792
- 1
- 24
- 34
![](../../users/profiles/413670.webp)
- 30,236
- 5
- 64
- 98
-
60
-
3
-
4@kenansulayman What's wrong with synchronous call? Sometimes it fits the best. – tellnobody Feb 02 '14 at 17:00
-
@Andrey: nothing, as far as you realize you're stopping execution of everything until the response from the server returns. Nothing exceptionally bad, but maybe not exactly adequate for some uses. – mrówa Feb 17 '14 at 16:52
-
1Also, if the server actually never responds for some reason, the rest of your code will never run. – Random Elephant Jan 28 '20 at 10:14
How about this version in plain ES6/ES2015?
function get(url) {
return new Promise((resolve, reject) => {
const req = new XMLHttpRequest();
req.open('GET', url);
req.onload = () => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText));
req.onerror = (e) => reject(Error(`Network Error: ${e}`));
req.send();
});
}
The function returns a promise. Here is an example on how to use the function and handle the promise it returns:
get('foo.txt')
.then((data) => {
// Do stuff with data, if foo.txt was successfully loaded.
})
.catch((err) => {
// Do stuff on error...
});
If you need to load a json file you can use JSON.parse()
to convert the loaded data into an JS Object.
You can also integrate req.responseType='json'
into the function but unfortunately there is no IE support for it, so I would stick with JSON.parse()
.
![](../../users/profiles/1612318.webp)
- 31,464
- 14
- 87
- 93
-
2Using `XMLHttpRequest` you make an asynchronous attempt to load a file. That means your code execution will go on, while your file loads in the background. In order to use the content of the file in your script you need a mechanism that tells your script when the file finished loading or failed loading. That's where *promises* come in handy. There are other ways to solve this problem, but I think *promises* are most convenient. – Rotareti Aug 29 '16 at 11:08
-
-
Only newer browser versions support it. A common practice is to write your code in latest ES6/7/.. and use Babel or alike to transpile it back to ES5 for better browser support. – Rotareti Jan 24 '17 at 17:34
-
2@Rotareti Can you also explain why this would be more convenient than a 'simple' callback? Is this convenience worth the extra effort to transpile it for old browser support? – lennyklb Apr 24 '17 at 12:13
-
@LennartKloppenburg I think this answer explains it well: http://stackoverflow.com/a/14244950/1612318 *"Is this convenience worth the extra effort to transpile it for old browser support?"* Promises are just one of **many** features that came with ES6/7. If you use a transpiler you can write up-to-date JS. It's worth it! – Rotareti Apr 24 '17 at 15:25
Use XMLHttpRequest.
Simple GET request
httpRequest = new XMLHttpRequest()
httpRequest.open('GET', 'http://www.example.org/some.file')
httpRequest.send()
Simple POST request
httpRequest = new XMLHttpRequest()
httpRequest.open('POST', 'http://www.example.org/some/endpoint')
httpRequest.send('some data')
We can specify that the request should be asynchronous(true), the default, or synchronous(false) with an optional third argument.
// Make a synchronous GET request
httpRequest.open('GET', 'http://www.example.org/some.file', false)
We can set headers before calling httpRequest.send()
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
We can handle the response by setting httpRequest.onreadystatechange
to a function before calling httpRequest.send()
httpRequest.onreadystatechange = function(){
// Process the server response here.
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
![](../../users/profiles/3446655.webp)
- 6,098
- 4
- 26
- 30
You can get the correct object according to the browser with
function getXmlDoc() {
var xmlDoc;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlDoc = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlDoc;
}
With the correct object, a GET might can be abstracted to:
function myGet(url, callback) {
var xmlDoc = getXmlDoc();
xmlDoc.open('GET', url, true);
xmlDoc.onreadystatechange = function() {
if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
callback(xmlDoc);
}
}
xmlDoc.send();
}
And a POST to:
function myPost(url, data, callback) {
var xmlDoc = getXmlDoc();
xmlDoc.open('POST', url, true);
xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlDoc.onreadystatechange = function() {
if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
callback(xmlDoc);
}
}
xmlDoc.send(data);
}
![](../../users/profiles/2813347.webp)
- 555
- 4
- 5
I was looking for a way to include promises with ajax and exclude jQuery. There's an article on HTML5 Rocks that talks about ES6 promises. (You could polyfill with a promise library like Q) You can use the code snippet that I copied from the article.
function get(url) {
// Return a new promise.
return new Promise(function(resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function() {
// This is called even on 404 etc
// so check the status
if (req.status == 200) {
// Resolve the promise with the response text
resolve(req.response);
}
else {
// Otherwise reject with the status text
// which will hopefully be a meaningful error
reject(Error(req.statusText));
}
};
// Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};
// Make the request
req.send();
});
}
Note: I also wrote an article about this.
![](../../users/profiles/54288.webp)
- 7,650
- 7
- 49
- 87
A small combination from a couple of the examples below and created this simple piece:
function ajax(url, method, data, async)
{
method = typeof method !== 'undefined' ? method : 'GET';
async = typeof async !== 'undefined' ? async : false;
if (window.XMLHttpRequest)
{
var xhReq = new XMLHttpRequest();
}
else
{
var xhReq = new ActiveXObject("Microsoft.XMLHTTP");
}
if (method == 'POST')
{
xhReq.open(method, url, async);
xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhReq.send(data);
}
else
{
if(typeof data !== 'undefined' && data !== null)
{
url = url+'?'+data;
}
xhReq.open(method, url, async);
xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhReq.send(null);
}
//var serverResponse = xhReq.responseText;
//alert(serverResponse);
}
// Example usage below (using a string query):
ajax('http://www.google.com');
ajax('http://www.google.com', 'POST', 'q=test');
OR if your parameters are object(s) - minor additional code adjustment:
var parameters = {
q: 'test'
}
var query = [];
for (var key in parameters)
{
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]));
}
ajax('http://www.google.com', 'POST', query.join('&'));
Both should be fully browser + version compatible.
![](../../users/profiles/1804013.webp)
- 9,576
- 4
- 48
- 51
If you don't want to include JQuery, I'd try out some lightweight AJAX libraries.
My favorite is reqwest. It's only 3.4kb and very well built out: https://github.com/ded/Reqwest
Here's a sample GET request with reqwest:
reqwest({
url: url,
method: 'GET',
type: 'json',
success: onSuccess
});
Now if you want something even more lightweight, I'd try microAjax at a mere 0.4kb: https://code.google.com/p/microajax/
This is all the code right here:
function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}return false};this.postBody=(arguments[2]||"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest");C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};
And here's a sample call:
microAjax(url, onSuccess);
![](../../users/profiles/217867.webp)
- 6,765
- 9
- 44
- 81
![](../../users/profiles/1530754.webp)
- 4,164
- 4
- 29
- 31
-
1I think there is a problem with microAjax, when you call it twice (because of the numerous “this”, I think, there must be a collision). I don't know if calling two “new microAjax” is a good workaround, is it? – Jill-Jênn Vie May 24 '15 at 13:47
Old but I will try, maybe someone will find this info useful.
This is the minimal amount of code you need to do a GET
request and fetch some JSON
formatted data. This is applicable only to modern browsers like latest versions of Chrome, FF, Safari, Opera and Microsoft Edge.
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json'); // by default async
xhr.responseType = 'json'; // in which format you expect the response to be
xhr.onload = function() {
if(this.status == 200) {// onload called even on 404 etc so check the status
console.log(this.response); // No need for JSON.parse()
}
};
xhr.onerror = function() {
// error
};
xhr.send();
Also check out new Fetch API which is a promise-based replacement for XMLHttpRequest API.
![](../../users/profiles/4534457.webp)
- 1,158
- 10
- 17
XMLHttpRequest()
You can use the XMLHttpRequest()
constructor to create a new XMLHttpRequest
(XHR) object which will allow you to interact with a server using standard HTTP request methods (such as GET
and POST
):
const data = JSON.stringify({
example_1: 123,
example_2: 'Hello, world!',
});
const request = new XMLHttpRequest();
request.addEventListener('load', function () {
if (this.readyState === 4 && this.status === 200) {
console.log(this.responseText);
}
});
request.open('POST', 'example.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
fetch()
You can also use the fetch()
method to obtain a Promise
which resolves to the Response
object representing the response to your request:
const data = JSON.stringify({
example_1: 123,
example_2: 'Hello, world!',
});
fetch('example.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
},
body: data,
}).then(response => {
if (response.ok) {
response.text().then(response => {
console.log(response);
});
}
});
navigator.sendBeacon()
On the other hand, if you are simply attempting to POST
data and do not need a response from the server, the shortest solution would be to use navigator.sendBeacon()
:
const data = JSON.stringify({
example_1: 123,
example_2: 'Hello, world!',
});
navigator.sendBeacon('example.php', data);
![](../../users/profiles/4283581.webp)
- 19,410
- 15
- 108
- 135
-
1I really like your answers, because you cover most of the cases even for Internet Explorer with XMLHttpRequest, but I would recommend to change the: "const data = ..." to be: "var data = ..." on that example (XMLHttpRequest) so it is fully compatible with it – Dazag Jul 09 '19 at 07:13
From youMightNotNeedJquery.com + JSON.stringify
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(JSON.stringify(data));
![](../../users/profiles/1355416.webp)
- 4,092
- 5
- 29
- 45
This may help:
function doAjax(url, callback) {
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
callback(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
![](../../users/profiles/1562258.webp)
- 2,870
- 2
- 15
- 26
Well it is just a 4 step easy proceess,
I hope it helps
Step 1.
Store the reference to the XMLHttpRequest object
var xmlHttp = createXmlHttpRequestObject();
Step 2.
Retrieve the XMLHttpRequest object
function createXmlHttpRequestObject() {
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// if running Internet Explorer
if (window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xmlHttp = false;
}
}
// if running Mozilla or other browsers
else {
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
xmlHttp = false;
}
}
// return the created object or display an error message
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
Step 3.
Make asynchronous HTTP request using the XMLHttpRequest object
function process() {
// proceed only if the xmlHttp object isn't busy
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
// retrieve the name typed by the user on the form
item = encodeURIComponent(document.getElementById("input_item").value);
// execute the your_file.php page from the server
xmlHttp.open("GET", "your_file.php?item=" + item, true);
// define the method to handle server responses
xmlHttp.onreadystatechange = handleServerResponse;
// make the server request
xmlHttp.send(null);
}
}
Step 4.
Executed automatically when a message is received from the server
function handleServerResponse() {
// move forward only if the transaction has completed
if (xmlHttp.readyState == 4) {
// status of 200 indicates the transaction completed successfully
if (xmlHttp.status == 200) {
// extract the XML retrieved from the server
xmlResponse = xmlHttp.responseText;
document.getElementById("put_response").innerHTML = xmlResponse;
// restart sequence
}
// a HTTP status different than 200 signals an error
else {
alert("There was a problem accessing the server: " + xmlHttp.statusText);
}
}
}
![](../../users/profiles/4281711.webp)
- 3,383
- 3
- 34
- 45
<html>
<script>
var xmlDoc = null ;
function load() {
if (typeof window.ActiveXObject != 'undefined' ) {
xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
xmlDoc.onreadystatechange = process ;
}
else {
xmlDoc = new XMLHttpRequest();
xmlDoc.onload = process ;
}
xmlDoc.open( "GET", "background.html", true );
xmlDoc.send( null );
}
function process() {
if ( xmlDoc.readyState != 4 ) return ;
document.getElementById("output").value = xmlDoc.responseText ;
}
function empty() {
document.getElementById("output").value = '<empty>' ;
}
</script>
<body>
<textarea id="output" cols='70' rows='40'><empty></textarea>
<br></br>
<button onclick="load()">Load</button>
<button onclick="empty()">Clear</button>
</body>
</html>
![](../../users/profiles/979928.webp)
- 972
- 8
- 12
in plain JavaScript in the browser:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE ) {
if(xhr.status == 200){
console.log(xhr.responseText);
} else if(xhr.status == 400) {
console.log('There was an error 400');
} else {
console.log('something else other than 200 was returned');
}
}
}
xhr.open("GET", "mock_data.json", true);
xhr.send();
Or if you want to use Browserify to bundle your modules up using node.js. You can use superagent:
var request = require('superagent');
var url = '/mock_data.json';
request
.get(url)
.end(function(err, res){
if (res.ok) {
console.log('yay got ' + JSON.stringify(res.body));
} else {
console.log('Oh no! error ' + res.text);
}
});
![](../../users/profiles/3709775.webp)
- 17,405
- 18
- 82
- 100
Here's a JSFiffle without JQuery
http://jsfiddle.net/rimian/jurwre07/
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
var url = 'http://echo.jsontest.com/key/value/one/two';
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
} else if (xmlhttp.status == 400) {
console.log('There was an error 400');
} else {
console.log('something else other than 200 was returned');
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
};
loadXMLDoc();
![](../../users/profiles/63810.webp)
- 32,654
- 13
- 106
- 109
var load_process = false;
function ajaxCall(param, response) {
if (load_process == true) {
return;
}
else
{
if (param.async == undefined) {
param.async = true;
}
if (param.async == false) {
load_process = true;
}
var xhr;
xhr = new XMLHttpRequest();
if (param.type != "GET") {
xhr.open(param.type, param.url, true);
if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
}
else if (param.contentType != undefined || param.contentType == true) {
xhr.setRequestHeader('Content-Type', param.contentType);
}
else {
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
}
else {
xhr.open(param.type, param.url + "?" + obj_param(param.data));
}
xhr.onprogress = function (loadTime) {
if (param.progress != undefined) {
param.progress({ loaded: loadTime.loaded }, "success");
}
}
xhr.ontimeout = function () {
this.abort();
param.success("timeout", "timeout");
load_process = false;
};
xhr.onerror = function () {
param.error(xhr.responseText, "error");
load_process = false;
};
xhr.onload = function () {
if (xhr.status === 200) {
if (param.dataType != undefined && param.dataType == "json") {
param.success(JSON.parse(xhr.responseText), "success");
}
else {
param.success(JSON.stringify(xhr.responseText), "success");
}
}
else if (xhr.status !== 200) {
param.error(xhr.responseText, "error");
}
load_process = false;
};
if (param.data != null || param.data != undefined) {
if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
xhr.send(param.data);
}
else {
xhr.send(obj_param(param.data));
}
}
else {
xhr.send();
}
if (param.timeout != undefined) {
xhr.timeout = param.timeout;
}
else
{
xhr.timeout = 20000;
}
this.abort = function (response) {
if (XMLHttpRequest != null) {
xhr.abort();
load_process = false;
if (response != undefined) {
response({ status: "success" });
}
}
}
}
}
function obj_param(obj) {
var parts = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
}
}
return parts.join('&');
}
my ajax call
var my_ajax_call=ajaxCall({
url: url,
type: method,
data: {data:value},
dataType: 'json',
async:false,//synchronous request. Default value is true
timeout:10000,//default timeout 20000
progress:function(loadTime,status)
{
console.log(loadTime);
},
success: function (result, status) {
console.log(result);
},
error :function(result,status)
{
console.log(result);
}
});
for abort previous requests
my_ajax_call.abort(function(result){
console.log(result);
});
![](../../users/profiles/3462686.webp)
- 1,120
- 11
- 17
HTML :
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","1.php?id=99freebies.blogspot.com",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
PHP:
<?php
$id = $_GET[id];
print "$id";
?>
![](../../users/profiles/2466565.webp)
- 107
- 1
- 2
-
Single line ifs don't need curly brackets, Noone uses IE6, This was probably copy pasted, use onload instead of onreadystatechange, catch errors for possible recursive calls, xmlhttp is a terrible variable name, just call it x. – Dec 21 '15 at 10:00
A verry good solution with pure javascript is here
/*create an XMLHttpRequest object*/
let GethttpRequest=function(){
let httpRequest=false;
if(window.XMLHttpRequest){
httpRequest =new XMLHttpRequest();
if(httpRequest.overrideMimeType){
httpRequest.overrideMimeType('text/xml');
}
}else if(window.ActiveXObject){
try{httpRequest =new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
httpRequest =new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
if(!httpRequest){return 0;}
return httpRequest;
}
/*Defining a function to make the request every time when it is needed*/
function MakeRequest(){
let uriPost ="myURL";
let xhrPost =GethttpRequest();
let fdPost =new FormData();
let date =new Date();
/*data to be sent on server*/
let data = {
"name" :"name",
"lName" :"lName",
"phone" :"phone",
"key" :"key",
"password" :"date"
};
let JSONdata =JSON.stringify(data);
fdPost.append("data",JSONdata);
xhrPost.open("POST" ,uriPost, true);
xhrPost.timeout = 9000;/*the time you need to quit the request if it is not completed*/
xhrPost.onloadstart = function (){
/*do something*/
};
xhrPost.onload = function (){
/*do something*/
};
xhrPost.onloadend = function (){
/*do something*/
}
xhrPost.onprogress =function(){
/*do something*/
}
xhrPost.onreadystatechange =function(){
if(xhrPost.readyState < 4){
}else if(xhrPost.readyState === 4){
if(xhrPost.status === 200){
/*request succesfull*/
}else if(xhrPost.status !==200){
/*request failled*/
}
}
}
xhrPost.ontimeout = function (e){
/*you can stop the request*/
}
xhrPost.onerror = function (){
/*you can try again the request*/
};
xhrPost.onabort = function (){
/*you can try again the request*/
};
xhrPost.overrideMimeType("text/plain; charset=x-user-defined-binary");
xhrPost.setRequestHeader("Content-disposition", "form-data");
xhrPost.setRequestHeader("X-Requested-With","xmlhttprequest");
xhrPost.send(fdPost);
}
/*PHP side
<?php
//check if the variable $_POST["data"] exists isset() && !empty()
$data =$_POST["data"];
$decodedData =json_decode($_POST["data"]);
//show a single item from the form
echo $decodedData->name;
?>
*/
/*Usage*/
MakeRequest();
![](../../users/profiles/6320551.webp)
- 428
- 5
- 6