Variable target file with Ajax - javascript

I'd like to start by saying that I would rather any suggestions didn't include JQuery; I don't like how JQuery has become a defacto standard within JavaScript.
So here's my problem:
I'd like to pass a variable to a function that then uses that variable as the path to the file in a .open(). Here's my code so far:
Example of function being called:
ajaxPost('chatlog.txt',null);
The function being called:
function ajaxPost(targetPath,toSend){
var getMessage;
if (window.XMLHttpRequest){
getMessage=new XMLHttpRequest();
}
else{
getMessage=new ActiveXObject("Microsoft.XMLHTTP");
alert("Stop using Internet Explorer.");
}
getMessage.open("POST",targetPath,true);
getMessage.onreadystatechange=function(){
if (getMessage.readyState==4 && getMessage.status==200){
alert(getMessage.responseText);
}
};
getMessage.send(toSend);
}
This unfortunately doesn't work, for some kabuki reason.


I see some logical issue in your code:
the whole idea of using POST method is to send any kind of data to a specific backend and do server side stuff based on that data, but here you are using POST method to actually GET the 'chatlog.txt'. so you had to use GET method, to begin with.
BUT if you still insist on using POST instead of GET, you should know that you can use POST method instead of GET and it does the same, but you would face with some unforeseen problems.
YOUR ACTUAL PROBLEM:
I loaded your actual page and saw your problem, you have a error in your console:
Failed to load resource: the server responded with a status of 405 (Method Not Allowed)
and as I said it means you have to change your method. I changed it like this:
function ajaxPost(targetPath,toSend){
var getMessage;
if (window.XMLHttpRequest){
getMessage=new XMLHttpRequest();
}
else{
getMessage=new ActiveXObject("Microsoft.XMLHTTP");
alert("Stop using Internet Explorer.");
}
getMessage.open("GET",targetPath,true);
getMessage.onreadystatechange=function(){
if (getMessage.readyState==4 && getMessage.status==200){
alert(getMessage.responseText);
}
};
getMessage.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
getMessage.send(toSend);
}
and it returned a data like this:
<b>Peck:</b> Hello World!<br/>#
<b>World:</b> Hello Peck!<br/>#


Add
getMessage.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
Before you send it. It tells the server how to process the POST stuff.


Using XMLHttpRequest is a very bad idea. If you are already using JQuery, try something like this:
$.post( "test.php", {name: "John", time: "2pm"}).done(function( data )
{
alert ("Succes! Data received: " + data);
});

Related

Parse JSON data from a website with HTTP request with javascript

I've used package sniffer to get a specific endpoint, which gave me a direct JSON url. Now I want to get for all usernames from this JSON format.For eg. it goes like this:
{"node":{"id":"1428809588","username":"kafeterijabg","full_name":"\u041a\u0430\u0444\u0435\u0442\u0435\u0440\u0438\u0458\u0430\u00ae","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/65f96409e2a6c5b9b72cda956aa0dfea/5E638B5F/t51.2885-19/s150x150/64620072_350924665805634_2914908438809018368_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"1428809588","expiring_at":1572193230,"has_pride_media":false,"latest_reel_media":1572095740,"seen":1572031349,"owner":{"__typename":"GraphUser","id":"1428809588","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/65f96409e2a6c5b9b72cda956aa0dfea/5E638B5F/t51.2885-19/s150x150/64620072_350924665805634_2914908438809018368_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"kafeterijabg"}}}}
I've tried sending requests and parsing it to console but I'm getting "undefined".
function Get(yourUrl){
var Httpreq = new XMLHttpRequest();
Httpreq.open("GET",yourUrl,false);
Httpreq.send(null);
return Httpreq.responseText;
}
var json_obj = JSON.parse(Get(MYURL));
console.log(json_obj.username);
I've never done anything similar before.
EDIT1:
It seems like I was using the wrong endpoint.But when I just try to get the output of the request without parsing it I'm getting only first two lines of It, even tho when I open the endpoint in browser I'm seeing all of it.
This is what I'm getting:
{"data":{"user":{"edge_follow":{"count":377,"page_info":{"has_next_page":false,"end_cursor":null},"edges":[]}}},"status":"ok"}
And here is what I expected to get.
{"data":{"user":{"edge_follow":{"count":377,"page_info":{"has_next_page":true,"end_cursor":"QVFBd2J1MzJKakRoNXI3bzVqR1hTYkRYRjJ0TGJrNjJxeFVnRmVsc0JwczZLR1d3VXloZDA4NXFiUFV6dXU4RlRfck93M0J5Z1ZINVdieEtwREVmWFZNaA=="},"edges":[{"node":{"id":"8752655712","username":"dragibravo","full_name":"Dragi Bravo \u00a9","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/5f53d36c1e430cbd5453478159c0a780/5E4CE6DD/t51.2885-19/s150x150/44656034_343135116439319_1392780490192191488_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"8752655712","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":1572123916,"seen":1572085057,"owner":{"__typename":"GraphUser","id":"8752655712","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/5f53d36c1e430cbd5453478159c0a780/5E4CE6DD/t51.2885-19/s150x150/44656034_343135116439319_1392780490192191488_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"dragibravo"}}}},{"node":{"id":"21396562691","username":"dete_devedesetih","full_name":"detedevedesetih","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/88d2c2221aaa75ca2ea16ab32d0f1578/5E42CEE5/t51.2885-19/s150x150/69694071_2580132948676320_8436138521869156352_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"21396562691","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":1572123552,"seen":null,"owner":{"__typename":"GraphUser","id":"21396562691","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/88d2c2221aaa75ca2ea16ab32d0f1578/5E42CEE5/t51.2885-19/s150x150/69694071_2580132948676320_8436138521869156352_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"dete_devedesetih"}}}},{"node":{"id":"14659853","username":"brittanya187","full_name":"Brittanya Razavi","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/f611badd19896aad1280c5743b4692d5/5E5907C2/t51.2885-19/s150x150/42002550_2204067873162229_8645854606632419328_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":true,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"14659853","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":1572121817,"seen":1572039263,"owner":{"__typename":"GraphUser","id":"14659853","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/f611badd19896aad1280c5743b4692d5/5E5907C2/t51.2885-19/s150x150/42002550_2204067873162229_8645854606632419328_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"brittanya187"}}}},{"node":{"id":"1465895116","username":"britnibrid","full_name":"neispavana lepotica","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/ce45b2702afa309ca3c581dbd99ba68f/5E5A1E14/t51.2885-19/s150x150/44828900_327180521439297_1922646860288229376_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"1465895116","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":null,"owner":{"__typename":"GraphUser","id":"1465895116","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/ce45b2702afa309ca3c581dbd99ba68f/5E5A1E14/t51.2885-19/s150x150/44828900_327180521439297_1922646860288229376_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"britnibrid"}}}},{"node":{"id":"1428809588","username":"kafeterijabg","full_name":"\u041a\u0430\u0444\u0435\u0442\u0435\u0440\u0438\u0458\u0430\u00ae","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/65f96409e2a6c5b9b72cda956aa0dfea/5E638B5F/t51.2885-19/s150x150/64620072_350924665805634_2914908438809018368_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"1428809588","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":1572107760,"seen":1572107760,"owner":{"__typename":"GraphUser","id":"1428809588","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/65f96409e2a6c5b9b72cda956aa0dfea/5E638B5F/t51.2885-19/s150x150/64620072_350924665805634_2914908438809018368_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"kafeterijabg"}}}},{"node":{"id":"13795435410","username":"jacobs_rs","full_name":"JacobsSrbija","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/4363dbdcf8e8a94bc65968dd4907ff60/5E64F5DB/t51.2885-19/s150x150/60911497_2333358360317600_4108961307611365376_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"13795435410","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":1572081948,"seen":1572081948,"owner":{"__typename":"GraphUser","id":"13795435410","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/4363dbdcf8e8a94bc65968dd4907ff60/5E64F5DB/t51.2885-19/s150x150/60911497_2333358360317600_4108961307611365376_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"jacobs_rs"}}}},{"node":{"id":"6706638255","username":"apartment_a6_kopaonik","full_name":"Apartment A6 Kopaonik \u00ae","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/db9d49897114fb812add6b89f60198da/5E54AB81/t51.2885-19/s150x150/45378715_351931902032023_3560095462486704128_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"6706638255","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":1572023751,"owner":{"__typename":"GraphUser","id":"6706638255","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/db9d49897114fb812add6b89f60198da/5E54AB81/t51.2885-19/s150x150/45378715_351931902032023_3560095462486704128_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"apartment_a6_kopaonik"}}}},{"node":{"id":"21433171875","username":"dugestaze_svilajnac","full_name":"DUGE STAZE","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/d5e220b083bfb4432cd6f4dda3a81ba7/5E47E625/t51.2885-19/s150x150/71523182_308405693359685_2542825728215351296_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"21433171875","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":null,"owner":{"__typename":"GraphUser","id":"21433171875","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/d5e220b083bfb4432cd6f4dda3a81ba7/5E47E625/t51.2885-19/s150x150/71523182_308405693359685_2542825728215351296_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"dugestaze_svilajnac"}}}},{"node":{"id":"280846376","username":"dekstroza","full_name":"dekstroza","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/838e15717ddeba3ff12d82657f3fa30e/5E5F3CCB/t51.2885-19/s150x150/70473686_396716634369751_3090030692306780160_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"280846376","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":1572101572,"seen":1572101572,"owner":{"__typename":"GraphUser","id":"280846376","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/838e15717ddeba3ff12d82657f3fa30e/5E5F3CCB/t51.2885-19/s150x150/70473686_396716634369751_3090030692306780160_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"dekstroza"}}}},{"node":{"id":"6619361585","username":"ozbiljne_teme","full_name":"Ozbiljne Teme","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/e56294e9abfe45f7c2ae2de54d208557/5E50CBDA/t51.2885-19/s150x150/53740023_372495643602512_1074420510437146624_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"6619361585","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":1572099187,"seen":1572099187,"owner":{"__typename":"GraphUser","id":"6619361585","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/e56294e9abfe45f7c2ae2de54d208557/5E50CBDA/t51.2885-19/s150x150/53740023_372495643602512_1074420510437146624_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"ozbiljne_teme"}}}},{"node":{"id":"706629897","username":"mylifeaskitty","full_name":"Marija Zdravkovi\u0107","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/ac6a53a0cb435d9900ee3984d153ae45/5E5C08E3/t51.2885-19/s150x150/66851574_2354137708132240_8606310035284295680_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"706629897","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":null,"owner":{"__typename":"GraphUser","id":"706629897","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/ac6a53a0cb435d9900ee3984d153ae45/5E5C08E3/t51.2885-19/s150x150/66851574_2354137708132240_8606310035284295680_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"mylifeaskitty"}}}},{"node":{"id":"192815961","username":"gordongram","full_name":"Gordon Ramsay","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/ca58f7dd68612bc05924e171092bcecf/5E579BFC/t51.2885-19/s150x150/26429265_1801356139896204_7973709430447407104_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":true,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"192815961","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":null,"owner":{"__typename":"GraphUser","id":"192815961","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/ca58f7dd68612bc05924e171092bcecf/5E579BFC/t51.2885-19/s150x150/26429265_1801356139896204_7973709430447407104_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"gordongram"}}}},{"node":{"id":"19841914826","username":"vandometa_vlog","full_name":"","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/2d6c970339a04d31010618e05763e7c1/5E431AE5/t51.2885-19/s150x150/67943135_2416133855379280_5169818650630160384_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"19841914826","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":null,"owner":{"__typename":"GraphUser","id":"19841914826","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/2d6c970339a04d31010618e05763e7c1/5E431AE5/t51.2885-19/s150x150/67943135_2416133855379280_5169818650630160384_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"vandometa_vlog"}}}},{"node":{"id":"203227483","username":"tommycashworld","full_name":"TOMM\u00a5 \u20acA$H","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/130807ffdb11359677afba2220b62875/5E617C39/t51.2885-19/s150x150/73307916_1416703575159030_5557531713581613056_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":true,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"203227483","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":null,"owner":{"__typename":"GraphUser","id":"203227483","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/130807ffdb11359677afba2220b62875/5E617C39/t51.2885-19/s150x150/73307916_1416703575159030_5557531713581613056_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"tommycashworld"}}}},{"node":{"id":"4060156840","username":"fourtwenty","full_name":"Four Twenty","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/2d1136bc4a84cfbf432655ebd98e4070/5E5EE4DC/t51.2885-19/s150x150/70594066_1368719939948662_8046432933394776064_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":true,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"4060156840","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":null,"owner":{"__typename":"GraphUser","id":"4060156840","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/2d1136bc4a84cfbf432655ebd98e4070/5E5EE4DC/t51.2885-19/s150x150/70594066_1368719939948662_8046432933394776064_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"fourtwenty"}}}},{"node":{"id":"6945680089","username":"lazybrain.ai","full_name":"LazyBrain Initiative","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/8b8324c443ffe3de2aa80641d2a9a8de/5E5BE2F3/t51.2885-19/s150x150/27879053_781778075349644_4543882190064189440_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"6945680089","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":null,"owner":{"__typename":"GraphUser","id":"6945680089","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/8b8324c443ffe3de2aa80641d2a9a8de/5E5BE2F3/t51.2885-19/s150x150/27879053_781778075349644_4543882190064189440_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"lazybrain.ai"}}}},{"node":{"id":"17100242394","username":"lifewith_crohn","full_name":"Mb.Crohn","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/916a9a84175036f50a6a598457759364/5E41A323/t51.2885-19/s150x150/66674988_2903343653224618_4794522445505626112_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"17100242394","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":null,"owner":{"__typename":"GraphUser","id":"17100242394","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/916a9a84175036f50a6a598457759364/5E41A323/t51.2885-19/s150x150/66674988_2903343653224618_4794522445505626112_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"lifewith_crohn"}}}},{"node":{"id":"5355293","username":"andy_mann","full_name":"Andy Mann","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/e12200c75630dc7e1b2b814cb649d066/5E5E764B/t51.2885-19/s150x150/68862836_2425862274407548_3512337272991121408_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":true,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"5355293","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":null,"owner":{"__typename":"GraphUser","id":"5355293","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/e12200c75630dc7e1b2b814cb649d066/5E5E764B/t51.2885-19/s150x150/68862836_2425862274407548_3512337272991121408_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"andy_mann"}}}},{"node":{"id":"47457589","username":"istrahinja","full_name":"BJJ SANDMAN","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/a378f9ecc6df8cd0018088b6cfc5a5f5/5E4FC0A4/t51.2885-19/s150x150/19051700_1874715819469896_2141424226534424576_a.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":true,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"47457589","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":null,"owner":{"__typename":"GraphUser","id":"47457589","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/a378f9ecc6df8cd0018088b6cfc5a5f5/5E4FC0A4/t51.2885-19/s150x150/19051700_1874715819469896_2141424226534424576_a.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"istrahinja"}}}},{"node":{"id":"2158133293","username":"mpudja21","full_name":"\u041c\u0438\u0445\u0430\u0438\u043b\u043e \u041f\u0443\u0452\u0430","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/881e653f5d56d596133577f67a4a7e11/5E55C1F8/t51.2885-19/s150x150/74693418_1328190550698806_2099261116705144832_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"2158133293","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":1572031575,"owner":{"__typename":"GraphUser","id":"2158133293","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/881e653f5d56d596133577f67a4a7e11/5E55C1F8/t51.2885-19/s150x150/74693418_1328190550698806_2099261116705144832_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"mpudja21"}}}},{"node":{"id":"3998316794","username":"nature","full_name":"Nature","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/2a4e907cbba6de380a178c95bc560376/5E49D099/t51.2885-19/s150x150/37130772_219216685405605_2651841279612157952_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"3998316794","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":null,"owner":{"__typename":"GraphUser","id":"3998316794","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/2a4e907cbba6de380a178c95bc560376/5E49D099/t51.2885-19/s150x150/37130772_219216685405605_2651841279612157952_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"nature"}}}},{"node":{"id":"1808243250","username":"dobrotamilica","full_name":"\u13a0\u273a\u266d\u053b\u273a\u0442\u0394","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/2b00e1cb3545393726a0bf1236e6c678/5E5DA2A1/t51.2885-19/s150x150/68908088_518976712264164_5633269725225025536_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":true,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"1808243250","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":1572114311,"seen":1572114311,"owner":{"__typename":"GraphUser","id":"1808243250","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/2b00e1cb3545393726a0bf1236e6c678/5E5DA2A1/t51.2885-19/s150x150/68908088_518976712264164_5633269725225025536_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"dobrotamilica"}}}},{"node":{"id":"8738182557","username":"majceezmajcee","full_name":"Marija Palurovic","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/ec6c203798b97791d8b0b6f1184f30d1/5E4FFACB/t51.2885-19/s150x150/57198888_414265232485760_3344820921243271168_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":true,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"8738182557","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":null,"owner":{"__typename":"GraphUser","id":"8738182557","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/ec6c203798b97791d8b0b6f1184f30d1/5E4FFACB/t51.2885-19/s150x150/57198888_414265232485760_3344820921243271168_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"majceezmajcee"}}}},{"node":{"id":"1637485905","username":"niinamilanovic","full_name":"\u2664 N I N A \u2664","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/ade9b86fc3985e70ab7c367b2cae4a26/5E50F5B7/t51.2885-19/s150x150/46354126_723371064697517_1754088811467374592_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","is_private":false,"is_verified":false,"followed_by_viewer":true,"requested_by_viewer":false,"reel":{"id":"1637485905","expiring_at":1572210555,"has_pride_media":false,"latest_reel_media":0,"seen":null,"owner":{"__typename":"GraphUser","id":"1637485905","profile_pic_url":"https://instagram.fbeg5-1.fna.fbcdn.net/vp/ade9b86fc3985e70ab7c367b2cae4a26/5E50F5B7/t51.2885-19/s150x150/46354126_723371064697517_1754088811467374592_n.jpg?_nc_ht=instagram.fbeg5-1.fna.fbcdn.net","username":"niinamilanovic"}}}}]}}},"status":"ok"}
EDIT 2:
Cookies were the problem, thats I was getting an empty JSON.
But I still dont know why
console.log(json_obj.node.username);
does not work.
It gives me this error:
Uncaught TypeError: Cannot read property 'username' of undefined
at :10:32
EDIT 3:
I've solved it with this code:
for (const node of json_obj.data.user.edge_follow.edges)
console.log(node.node.username);

in the json you posted above there is no tag username. To get to the user name you need to do json_obj.node.username

XMLHttpRequest is asynchronous, meaning that calling .open() and then .send() doesn't mean the request is complete after these calls.
Instead, you should set a function to the .onreadystatechange property like this:
var Httpreq = new XMLHttpRequest();
Httpreq.onreadystatechange = function() {
var json_obj = JSON.parse(this.responseText;
console.log(json_obj.username);
};
Httpreq.open("GET",yourUrl,false);
Httpreq.send(null);

Passing XMLHttpRequest to PHP results in empty $POST

So far, I have been working on some code, and have been troubleshooting for awhile and I'm pretty sure my syntax is correct. I've been having to work around a broken testing environment so I can't use normal breakpoints to test this on the backend.
I have the following function in javascript:
function ns_submit_form_inpage(path, data){
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4) {
alert("Message Sent");
}
}
request.open('POST', path, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
var temp_string = array_to_string(data);
alert("data:"+ temp_string);
request.send(data);
}
And the following code in PHP:
<?php
mail("my_email#example.com", "Array: ". print_r($_POST, true), "From:test#example.com");
?>
I call the function, pass my path in along with an array. I get an email and a proper alert, so I know my function is called and the right file is hit and fires. A also know that right before I send off the data, they data is properly in the keyed array (e.g. first_name::bob, last_name::doe). However, the email I receive reads "Array: Array()" and confirmation via my "Message Sent" alert.
I've narrowed down where I think my error could be, and I'm done to pretty much nothing left, it feels like the array is just disappearing into the ether of the internet.

I found my issue. As mentioned, I was sending the data as an array. Although PHP reads the accepted data as an array, and I'm sending an array, the method by which the array is sent (application/x-www-form-urlencoded) doesn't USE an array. It uses a string. So, I had to change the array into a string following the format of "first_name=bob&last_name=doe&foo=bar". Now it works.

Get value from AJAX using Javascript and ASP

I am using this Ajax code. But I dont know how i will retrieve my value of value1 on my server-side asp using Javascript.
On my serverside I want to have something like
<%
var newdata = value1 ( which is the one from the serverside - which was send here)
%>
Please Help !!! thanks a million
I know it is possible with PHP but how do i do with javascript
<script>
function ajaxNow(_data)
{
var xmlHttp;
try
{
/* Firefox, Opera 8.0+, Safari */
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
/* newer IE */
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
/* older IE */
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser is old and does not have AJAX support!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
/* this puts the value into an alert */
alert("Value read is: "+xmlHttp.responseText);
}
}
xmlHttp.open("GET","ajax_file.asp?value1="+_data,true);
xmlHttp.send(null);
}
</script>

Client-side Javascript can't query server-based databases for obvious reasons. Based on what you appear to be doing, I would suggest you code an ASP which performs the actual query using VBA / C# / whatever, and you can then parse the results in your client-side ajax call as normal.

URL encode _data and nbquestions variables. Request.QueryString("param1") will decode them for you.
JavaScript URLEncode:
escape(_data);
Also you can use Server.URLEncode() methods from VB script.

xmlHttp.send correctly writen
It doesn't check that you have a 200 status before trying to deal with the data.
It fails to encode the data to make sure it is URL safe
I would suggest using a library to handle XHR stuff, instead of reinventing the wheel. Microjs has a list of lots of small libraries if you aren't using one of the large ones (such as YUI or jQuery).
how do I get the values on the server-side using Javascript.
It is just query string data, so it will be in Request.QueryString.

Whatever the server-side script outputs will be picked up by the AJAX request. So if the AJAX requests something, the server-side does the legwork and fetches the result from the database and then outputs it.
There are loads and loads of tutorials on how to do exactly this. Just ensure that you secure your script properly so that it's not open to abuse.

you can make the asp page write the result as JSON format read in directly via XMLHttpRequest Object and later processing:
example of JSON
var myJSONObject = {"bindings": [
{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
{"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
{"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
]
};
then you can use native parsers in web browsers or eval() (NOT RECOMENDED, SERIOUSLY!!!) to parse the data written in your asp page and use it in your javascript client code.
More information about JSON basic info
JSON in browsers:
Internet Explorer 8+
Mozilla Firefox/Sea Monkey
in Opera, Chrome, Safari works too

//(javascript, ajax = xmlHttp)
if your response text is an array you can use this.
var myArray = eval(xmlHttp.responseText);
or if it is a just text you can use .
var value = xmlHttp.responseText
Another approach.This is just a template. If you use jquery, you can use this approach. i hope it solve your problem or give an idea.
html part:
<div id="willupdate"></div>
<div id="willupdate2"></div>
JQuery part:
$(document).ready(function() {
getValue("serverurl",updateName)
getValue("serverurl",updateSurName)
});
function updateName(name){
$("#willupdate").text(name)
}
function updateSurName(name){
$("#willupdate2").text(name)
}
function updateSurName(name){
$("#willupdate").text(name)
}
function getValue(url,opt_onRecieved){
if( !url || url == ""){
alert("request url error");
return;
}
$.ajax({
type:"POST",
url: url,
dataType:"json",
success: function(data){
opt_onRecieved(data);
}
});
}

When your Ajax-Request succeeds you will have the querystring-variables in the QueryString-Collection of the Request-Object.
Could work like this on the server side:
<% var newdata = Request.QueryString("value1"); %>

Here is a very good ajax tutorial. There is everything explained. https://developer.mozilla.org/en/AJAX/Getting_Started
You forget a double quote:
xmlHttp.open("post","CmsAjax.asp",true)
To get the data:
/* this puts the value into an alert */
alert(xmlHttp.responseText);

You need to encode the data on the server and then decode them in the client. You can use JSON-RPC for this.
Here are few links:
Official Website
Wikipedia Article about JSON-RPC
Implementations of JSON-RPC Service in different languages
But you don't need to use JSON-RPC if you have only one value you can encode as JSON in ASP and then decode it in JavaScript
var array = JSON.parse(xmlHttp.responseText);

Using AJAX to access to the Twitter API

I'm thinking about adding some twitter functions in my web-application, so I started doing some tests. I checked the way to call the search twitter URL (more info in: http://dev.twitter.com/doc/get/search) in order to get tweets that contains the searched word/sentence. I realized that you can do it in php just getting the JSON file that the search URL returns with the file_get_contents() function. Also you can do it directly in JavaScript creating a script object, appending it to the body and use the callback parameter of the search URL to process the data.
Different ways to do, but that's the way I finally did it:
MAIN HTML FILE:
<title>Twitter API JSON</title>
<script type="text/javascript">
//function that created the AJAX object
function newAjax(){
var xmlhttp=false;
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;
}
//function that search the tweets containing an specific word/sentence
function gettweets(){
ajax = newAjax();
//ajax call to a php file that will search the tweets
ajax.open( 'GET', 'getsearch.php', true);
// Process the data when the ajax object changes its state
ajax.onreadystatechange = function() {
if( ajax.readyState == 4 ) {
if ( ajax.status ==200 ) { //no problem has been detected
res = ajax.responseText;
//use eval to format the data
searchres = eval("(" + res + ")");
resdiv = document.getElementById("result");
//insert the first 10 items(user and tweet text) in the div
for(i=0;i<10;i++){
resdiv.innerHTML += searchres.results[i].from_user+' says:<BR>'+searchres.results[i].text+'<BR><BR>';
}
}
}
}
ajax.send(null);
} //end gettweets function
</script>
#search_word Tweets
<input type="button" onclick="gettweets();"value="search" />
<div id="result">
<BR>
</div>
</html>
PHP WHERE WE GET THE JSON DATA:
$jsonurl = "http://search.twitter.com/search.json?q=%23search_word&rpp=10";
$json = file_get_contents($jsonurl,0,null,null);
echo $json;
And that's it, in this way it works fine. I call the PHP file, it returns the JSON data retrieved from the search URL, and in the main HTML JavaScript functions I insert the tweets in the div. The problem is that at the first time, I tried to do it directly in JavaScript, calling the search URL with Ajax, like this:
MAIN HTML FILE:
//same code above
//ajax call to a php file that will search the tweets
ajax.open( 'GET', 'http://search.twitter.com/search.json?q=%23search_word&rpp=10', true);
//same code above
I thought it should return the JSON data, but it doesn't. I'm wondering why not and that is what I would like to ask. Does someone have any idea of why I can't get JSON data using the Ajax object? If the search URL http://search.twitter.com/search.json?q=%23search_word&rpp=10 returns JSON data, it should be obtained in the ajax object, right?

XHR requests are generally limited to same-domain requests; e.g, if you're on bertsbees.com, you can't use an Ajax method to pull data from twitter.com.
That said, Twitter's API supports a popular data transport method known as JSON-P, which is really just a glorified injection technique. You simply pass it a callback method, and the data returned will be wrapped in your desired function, so it gets eval'd and passed in.

You cannot make a cross domain request using javascript, unless you are doing from an browser addon.

Why is my code failing to pass parameters from JavaScript to JSP using XMLHttpRequest?

I am trying to write JavaScript code which, on a mouse click event, sends some parameter (id) to the server-side JSP code. The JSP code then returns a string to the JavaScript.
...and the response text will be a string returned from JSP specified in out.println(substring);.
This code is not working. Sorry if I am doing something silly; I am new to coding for the web.

XMLHttpRequest is an asynchronous request by default, meaning that after you call send, the next line of code is executed before the request has finished. The code to be executed when the request finished goes into your "state change" handler. You're already assigning a state change handler here:
xmlHttp.onreadystatechange = handleRequestStateChange
But you never define what handleRequestStateChange actually is. You should probably read about ready states and the onreadystatechange event.
Try the following code instead:
<button type="button" onClick="handleButtonClick();">Click Me!</button>
<script type="text/javascript">
function handleButtonClick()
{
// Declare the variables we'll be using
var xmlHttp, handleRequestStateChange;
// Define the function to be called when our AJAX request's state changes:
handleRequestStateChange = function()
{
// Check to see if this state change was "request complete", and
// there was no server error (404 Not Found, 500 Server Error, etc)
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var substring=xmlHttp.responseText;
// Do something with the text here
alert(substring);
}
}
xmlhttp = new XMLHttpRequest();
xmlHttp.open("GET", "http://csce:8080/test/index.jsp?id=c6c684d9cc99476a7e7e853d77540ceb", true);
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
}
</script>
This code assigns to handleRequestStateChange a function which will be called when the ready state of the XMLHttpRequest changes. The function checks to see if the ready state is 4 (request finished and response is ready) and if so, the you will be able to access the responseText property of the request which will contain the response from the JSP page.
As a suggestion for the future, when you've learned how AJAX request work, you may find a helper library like jQuery makes tasks like this much easier!

In your case (GET method) you need to pass the variables in the open method directly (at the end of the url)
xhr.open("GET", "http://csce:8080/test/index.jsp?id=c6c684d9cc99476a7e7e853d77540ceb", true);
xhr.send(null);
Goyuix's technic is only correct in the case of the POST method:
xhr.open("POST", "http://csce:8080/test/index.jsp", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("id=c6c684d9cc99476a7e7e853d77540ceb");
You might want to use the uri encoding global function as a good practice in case you have spaces or other special characters in your parameter:
POST method:
var myVar1 = encodeURIComponent("c6c684d9cc99476a7e7e853d77540ceb");
xhr.open("POST", "http://csce:8080/test/index.jsp", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("id=" + myVar1);
GET method:
var myVar1 = encodeURIComponent("c6c684d9cc99476a7e7e853d77540ceb");
xhr.open("GET", "http://csce:8080/test/index.jsp?id=" + myVar1, true);
FYI, this is how you retrieve the parameters passed to the JSP page:
We are using JSP's core library (this lib must be in your web app's /WEB-INF/lib/ directory) to output the value of the parameter called "id".
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:out value="${param.id}"/>

Rather than pass null in the send method, try passing something like "key=value" which should then show up in your JSP Request object, and you can access it by calling something like:
string myValue = request.getParameter("key");

Categories

Resources