Develop Reference

Ajax function with a Form variable

What is wrong with this ajax function.
<script>
function loadDoc() {
var a=document.data.fitem.value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "master_find.jsp?val="+a) ;
xhttp.send();
}
</script>
I tried so many ways to supply a variable to the master_find.jsp script to retrieve the main item from a table., no success.

unable to get response from rest api using XMLHttpRequest

i want to call get rest api using XMLHttpRequest, but I'm getting error -
"Uncaught SyntaxError: Unexpected end of JSON input".
rest api json response data
{
"timestamp": "2018-06-08T16:52:50.509Z",
"dataFrame": "AQAAKCoAAQgFKgABBg==",
"fcnt": 825,
"freq": 865572000,
"port": 2,
"rssi": -115,
"snr": -16,
"sf_used": 12,
"id": 1528476770509,
"dr_used": "SF12BW125",
"decrypted": true
}
code
<script>
function UserAction() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "url", true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.setRequestHeader("Authorization", "Basic a2Vyb==");
xhttp.send();
var response = JSON.parse(xhttp.responseText);
}
</script>
Edit:
code
<script>
function userAction() {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
let response = JSON.parse(xhttp.responseText);
var dataFrame = response.dataFrame;
/** code that handles the response **/
}
};
xhttp.open("GET", "url", true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.setRequestHeader("Authorization", "Basic a2VybmVsc==");
xhttp.send();
</script>
HTML
<button type="submit" onclick="userAction()">Search</button>
<h1 id="data"></h1>

You should listen to the XMLHTTPRequest.onreadystatechange event for your request, so that the result is only parsed once the request is done:
functio userAction() {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let response = JSON.parse(xhttp.responseText);
document.getElementById("data").innerHTML = response.dataFrame;
}
};
xhttp.open("GET", "filename", true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.setRequestHeader("Authorization", "Basic a2Vyb==");
xhttp.send();
}

You need to set the xhttp.onreadystate property to a callback function to handle the various states and then process the response when it's been received.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange

You should check the status of the request before outputting it.
function UserAction() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "url", true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.setRequestHeader("Authorization", "Basic a2Vyb==");
xhttp.onload = function(){
if(xhttp.status ==200){
var response = JSON.parse(xhttp.responseText);
}
}
xhttp.send();
}

Get across cross domain policy javascript

This is my code
function load() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("change").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "https://www.example.com/xyz.txt", true);
xhttp.send();
}
The url for the xhttp.open is an example url to another domain with a txt file. What can I add to my code for this to work? Thanks.

The best way to do this is with CORS.

DIV changing onclick with external page as a variable

I have this code that is changing the content of the DIV based on an external page:
external page
and
function loadexternalPage() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('main_frame').innerHTML =
xmlhttp.responseText;
}}
xmlhttp.open("GET", "externalpage.html", true);
xmlhttp.send();
}
How can I update this code in the way the function get a variable as an external page instead?
something like this??
Link to external page
function loadexternalPage(externalpage) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('main_frame').innerHTML = xmlhttp.responseText;
} }
xmlhttp.open("GET", externalpage, true);
xmlhttp.send();
}
or with method:
$(document).ready(function () {
loadxtPage("popup.html");
$("#main_frame").click(loadxtPage("externalpage.html"));
})

You can use the href attribute:
Pass the event here:
Link to external page
Use the events' attribute to get the URL:
function loadexternalPage(event) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('main_frame').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", event.target.href, true);
xmlhttp.send();
}
This is one possible solution. It really depends on where you need to specify the URL.

How can I send more than one variable to a php file using ajax and a get request?

I am trying to send an I.D. value and a name value to a php file using ajax. I can send just the I.D. variable just fine but when I try to add the name variable, the function stops working. How can I send both?
This works:
function click() {
var name = clickedelement.getElementsByTagName('input')[0].value;
var id = clickedelement.getElementsByTagName('input')[1].value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("popupBox").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "friends2.php?id="+id, true);
xmlhttp.send();
};
But when I try to add the name variable, it dosnt work.
function click() {
var name = clickedelement.getElementsByTagName('input')[0].value;
var id = clickedelement.getElementsByTagName('input')[1].value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("popupBox").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "friends2.php?id="+id"&name="+name, true);
xmlhttp.send();
};

change to "friends2.php?id="+id+"&name="+name you just have a missing +

"friends2.php?id="+id+"&name="
// missing plus sign here ^