Ajax function with a Form variable - javascript

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.

Related

Replace InnerHTML With Cookie Logging

I've got some javascript code for replacing innerHTML of a element when clicked. Now i've got the code for that and it does work great! But one small issue is that, I want the webserver to remember the change when innerHTML of an element was replaced. So the webserver remembers the change and doesn't return to its default state. Whether with database or in Cookie, sessionStorage, localStorage.
document.getElementById("replace1").innerHTML = localStorage.getItem("replace1");
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
localStorage.setItem("replace1",this.responseText);
}
};
xhttp.open("GET", "https://natevanghacks.com/replacements/yoinkexecutor2.html", true);
xhttp.send();
}
Try something like this in AJAX:
localStorage.setItem("replace1",this.responseText);
And after body onload:
document.getElementById("replace1").innerHTML = localStorage.getItem("replace1");
Edit:
function loadSavedData(){
var data=localStorage.getItem("replace1");
document.getElementById("replace1").innerHTML = data?data:'No Data found';
}
function deleteData(){
localStorage.removeItem("replace1");
}
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
localStorage.setItem("replace1",this.responseText);
document.getElementById("replace1").innerHTML =this.responseText;
console.log(this.responseText);
}
};
xhttp.open("GET", "filename.html", true); //put your filename here...
xhttp.send();
}
<button onclick="loadDoc()">Send request and load Data
</button>
<button onclick="loadSavedData()">load Saved Data
</button>
<button onclick="deleteData()">Delete saved Data
</button>
<br>
<div id="replace1">
</div>
Note: You should run this file on http:// or https:// protocols only

Javascript ajax return wrong value

Issue : if i call ajax function i can't able to get return value.
Below is my simple javascript and ajax file.
Javascript Ajax
<script type="text/javascript">
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
return this.responseText;
}
};
xhttp.open("GET", "testAjax.php", true);
xhttp.send();
}
alert(loadDoc());
</script>
PHP
<?php
echo "Hello World !!!";
?>
Can synchronous or asynchronous concept are useful to this problem ?
Thank you.
The problem is the asynchronous nature of ajax requests and the execution flow of code. The callback that is invoked when the conditions of onreadystatechange are met is not guaranteed to complete before the end of the main function has been reached. To achieve a return from the ajax function you need to use Promises
let oPromise = new Promise( ( resolve, reject ) => {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
resolve( this.response );
}
};
xhttp.open('GET', 'testAjax.php', true);
xhttp.send();
});
oPromise.then( ( data ) => {
alert('Whoohoo! -> ' + data );
});
To some the syntax of the above will be unfamiliar and perhaps a little confusing - it could be rewritten in a more familar/tradional way like this:
let oPromise = new Promise( function( resolve,reject ){
var xhr = new XMLHttpRequest();
xhr.onload=function(){
resolve( this.response )
};
xhr.onerror=function(){
reject( this.readyState )
};
xhr.open('GET', 'testAjax.php', true);
xhr.send();
});
oPromise.then( function( response ){
alert('Whoohoo! -> ' + response );
});
You need to change your logic like this:
function doJobWhenAjaxResultIsReturned(ajaxData){
// alrt(ajaxData);
}
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
doJobWhenAjaxResultIsReturned(this.responseText);
}
};
xhttp.open("GET", "testAjax.php", true);
xhttp.send();
}
loadDoc();
then do what you want in doJobWhenAjaxResultIsReturned().

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.

Multiple Ajax calls sometimes fail

I have a PHP script which queries a database and returns a table, depending on the input, e.g.results.php?f=1.
I am trying to call it multiple times from JavaScript:
function go(n,divid) {
document.getElementById(divid).innerHTML = "<img src=\"load.gif\">";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(divid).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", n, true);
xmlhttp.send();
}
Call later
go('results.php?print=1&nh=1','d1');
go('results.php?print=2&nh=1','d2');
go('results.php?print=3&nh=1','d3');
go('results.php?print=4&nh=1','d4');
The PHP code connects to a SQLite3 database. The problem with the above is that sometimes it works, but sometimes one of the queries fails to be prepared by SQLite3::prepare().
What could be wrong? A sqlite race condition? A javascript issue?
When results.php is called just once, the query always succeeds.
Thanks.
Use xhttp instead of xmlhttp.
function go(n,divid) {
var xhttp = new XMLHttpRequest();
document.getElementById(divid).innerHTML = "<img src=\"load.gif\">";
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById(divid).innerHTML = xhttp.responseText;
}
}
xhttp.open("GET", n, true);
xhttp.send();
}
go('results.php?print=1&nh=1','d1');

XMLHttpRequest is sending "null" content type

I have following javascript code which is sending a null in content type
<script>
var xhttp;
if (window.XMLHttpRequest){
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var clientToken;
xhttp.onreadystatechange = function(){
if (xhttp.readyState == 4 && xhttp.status == 200){
clientToken = xhttp.responseText.content;
}
};
xhttp.open("GET", "http://localhost:8080/client/123/token", true);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.send();
braintree.setup(clientToken, "dropin", {
container: "payment-form"
});
</script>
I am accessing this file outside of any server i.e., in browser I am putting

Categories

Resources