We Keep Coding

AJAX for reuse with different data? (NO jQuery) [duplicate]

How can I make an AJAX call using JavaScript, without using jQuery?

With "vanilla" (plain) 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();
}
With jQuery:
$.ajax({
url: "test.html",
context: document.body,
success: function() {
$(this).addClass("done");
}
});

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)
};

There is now a nicer Fetch API available natively in modern browsers. The fetch() method allows you to make web requests.
For example, to request some JSON from /get-data:
let options = {
method: 'GET',
headers: {}
};
fetch('/get-data', options)
.then(response => response.json())
.then(body => {
// Do something with body
});
See MDN Web Docs: Using the Fetch API for more details.

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:
https://www.w3schools.com/xml/tryit.asp?filename=tryajax_first
https://www.w3schools.com/xml/tryit.asp?filename=tryajax_callback

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

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().

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.');
}
}
}

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);
}

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.

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.

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);

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);

Try using the Fetch Api (Fetch API)
fetch('http://example.com/movies.json').then(response => response.json()).then(data => console.log(data));
Its really clear, and 100% vanilla.

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.

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));

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();
}

<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>

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);
}
}
}

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);
}
});

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();

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);
});

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";
?>

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();

Fast code fetch without jQuery
async function product_serach(word) {
var response = await fetch('<?php echo base_url(); ?>home/product_search?search='+word);
var json = await response.json();
for (let [key, value] of Object.entries(json))
{
console.log(json)
}
}

How to GET simple data from these sites properly without CORS error

I have a problem getting data from this two sites:
http://app.lotto.pl/wyniki/?type=dl
and
Eurolottery.
I know that the problem is associated with CORS and I managed to get data using Chrome CORS extension and that code:
var HttpClient = function() {
this.get = function(aUrl, aCallback) {
var anHttpRequest = new XMLHttpRequest();
anHttpRequest.onreadystatechange = function() {
if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
aCallback(anHttpRequest.responseText);
}
anHttpRequest.open( "GET", aUrl, true );
anHttpRequest.send( null );
}
}
var client = new HttpClient();
client.get('http://app.lotto.pl/wyniki/?type=dl', function(response) {
var currentDraw = response;
x = currentDraw.split("\n").slice(1, 7).sort().join(" ");
console.log(x);
}
);
And I tried to use CORS tutorial code with that:
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// CORS not supported.
xhr = null;
}
return xhr;
}
// Helper method to parse the title tag from the response.
function getTitle(text) {
return text.match('<title>(.*)?</title>');
}
// Make the actual CORS request.
function makeCorsRequest() {
// This is a sample server that supports CORS.
var url = 'http://api.bentasker.co.uk/lottopredict/?action=LatestResults&key=751fbf6ddfb7c3857d898c21bfdc2b22&game=3&draws=Any';
var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
}
// Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
var title = getTitle(text);
console.log(text.split("\n"));
};
xhr.onerror = function() {
alert('Woops, there was an error making the request.');
};
xhr.send();
}
makeCorsRequest();
But in both situations it doesn't work properly.
What is the easiest way to get data from sites posted above using javascript?

If you don't have control to the Host, you will need to use a proxy (ie: CORS-Anywhere) to remove the CORS policy.
var HttpClient = function() {
this.get = function(aUrl, aCallback) {
var anHttpRequest = new XMLHttpRequest();
anHttpRequest.onreadystatechange = function() {
if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
aCallback(anHttpRequest.responseText);
}
anHttpRequest.open( "GET", aUrl, true );
anHttpRequest.send( null );
}
}
var client = new HttpClient();
client.get('https://cors-anywhere.herokuapp.com/http://app.lotto.pl/wyniki/?type=dl', function(response) {
var currentDraw = response;
x = currentDraw.split("\n").slice(1, 7).sort().join(" ");
console.log(x);
}
);
More ways to handle the CORS Policy locally are available here.

If you don't want to setup your own server you could use something like https://cors-anywhere.herokuapp.com/ - it works pretty well for simple cases.

XMLHttpRequest not well-formed in Firefox

I have this code to form get XMLHttpRequest:
var makeRequest = function () {
var xmlhttp = getXmlHttp();
var params = 'name=' + encodeURIComponent('123') + '&surname=' + encodeURIComponent('surname')
xmlhttp.open("GET", 'site.html?' + params, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.send(null)
}
And I have this cross-browser function:
getXmlHttp = function () {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
makeRequest()
All code is in the local file. No server side.
But Firefox says in console this:
'not well-formed'
So what's wrong?
UPD: I have added this xmlhttp.overrideMimeType("text/html");
It doesn'throw an error now but i still can't see it in a web inspector in a firefox
But i can see it in chrome.

It might help if you specified the MIME type.
xmlhttp.overrideMimeType("text/html");
or maybe site.html really is incorrectly formed - check opening tags, closing tags, etc...

XMLHttpRequest and setRequestHeader in IE returns an error

I try to make Cross Domain POST requests and get back JSON encoded responses,
everything works fine except in IE 7, 8, 9.
I have try those solutions but i get this error:
Object doesn't support property or method 'setRequestHeader'
Function createXMLHTTPObject() - attempt 1
function createXMLHTTPObject() {
var xmlhttp = false;
var is_IE = window.XDomainRequest ? true : false;
if (is_IE) {
xmlhttp = new window.XDomainRequest();
} else {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlhttp;
}
Function createXMLHTTPObject() - attempt 2
var XMLHttpFactories = [
function() { return new XMLHttpRequest() },
function() { return new ActiveXObject("Msxml2.XMLHTTP") },
function() { return new ActiveXObject("Msxml3.XMLHTTP") },
function() { return new ActiveXObject("Microsoft.XMLHTTP") }
];
function createXMLHTTPObject() {
var xmlhttp = false;
for (var i=0; i<XMLHttpFactories.length; i++) {
try {
xmlhttp = XMLHttpFactories[i]();
}
catch(e) {
continue;
}
break;
}
return xmlhttp;
}
Function send()
Here it returns the error, at: req.setRequestHeader('User-Agent', 'XMLHTTP/1.0');
function send(postData, callback) {
var url = 'http://domain.com/ajax-processing.php'; //url overlap
var req = createXMLHTTPObject();
if (!req) return;
var method = (postData) ? "POST" : "GET";
req.open(method, url, true);
req.setRequestHeader('User-Agent', 'XMLHTTP/1.0');
if (postData) {
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
req.onreadystatechange = function() {
if (req.readyState != 4) return;
if (req.status != 200 && req.status != 304) {
console.log('HTTP error ' + req.status);
return;
}
callback(req);
}
if (req.readyState == 4) return;
req.send(postData);
}
Here i call the send function
var insert = 'id=1&type=insert';
CLib.send(insert, function(data) {
console.log(data);
});
Is it possible to make Cross Domain requests in IE?
How i can leave behind this part, without using any other library like jQuery?

Thanks a lot #Esailija who inform me that i can't make set request headers with the XDomainRequest.
So i tried other methods and solutions also and i finally came back with a simpler method:
changed the POST requests to GET and everything working fine after some small changes.

Firefox Extension - Multiple XMLHttpRequest calls per page

I am trying to create a Firefox extension that can run multiple XMLHttpRequests per page. The code is below (my main function calls the makeRequest on different URLs). My problem is that it always returns (at the "alert('Found ...')" for debugging purposes) the same URL instead of displaying the different responses. I think the issue is that I should somehow pass the http_request instance to the alertContents() function instead of just using http_request directly, but not sure how or if this is correct. Thank you.
function makeRequest(url,parameters) {
http_request = false;
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url + parameters, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert('Found: ' + http_request.responseText);
} else {
alert('There was a problem with the request.');
}
}
}

Your problem is you've only got one http_request identifier which is reused every time the makeRequest function is called. Here is one simple adjustment:-
function makeRequest(url,parameters) {
var http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = function() {
alertContents(http_request)
};
http_request.open('GET', url + parameters, true);
http_request.send(null);
return http_request;
}
function alertContents(http_request) {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert('Found: ' + http_request.responseText);
} else {
alert('There was a problem with the request.');
}
http_request.onreadystatechange = fnNull;
}
}
function fnNull() { };
The http_request identifier is local to each makeRequest execution. The correct instance of XHR is then passed to alerrContents each time onreadystatechange is fired by using a capture.
BTW, why separate url from parameters? Since the caller has to ensure the parameters argument is correctly url encoded it doesn't seem like a very useful abstraction. In addition the caller can simply pass a URL containing a querystring anyway.

this function can be further improved with cross browser functionality:
function makeRequest(method, url, parameters) {
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
http_request.overrideMimeType('text/xml');
//http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = function() {
alertContents(http_request);
}
url += (method=="GET")?parameters:"";
http_request.open(method, url, true);
if (method == "POST") {
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
}
http_request.send((method=="GET")?null:parameters);
}

Yes, you should use the same XMLHttpRequest.
Infact, try using this code and see if it works :
function makeRequest(url,parameters) {
http_request = false;
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = function () {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert('Found: ' + http_request.responseText);
} else {
alert('There was a problem with the request.');
}
}
};
http_request.open('GET', url + parameters, true);
http_request.send(null);
}
In the code above, I simply attached the function directly to the onreadystatechange event .