hi I wrote simple AJAX call to php file I am getting error in my console . Request should go to the server and return back in the html input field . i am not able to solve
Below is my Code
HTML:
<label>Input your text: </label><input type="text" id="user_text" onkeyup="update1()"/></br></br>
<label>Response here: </label><input type="text" id="server_response" readonly/>
Javascript:
function update1(){
var current_text = document.getElementById("user_text").value;
var http = new XMLHttpRequest();
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
var response = http.responseText;
document.getElementById('server_response').value = response;
}
http.open("GET" , "http://localhost/inderstand_Ajax/server.php?user_text="+current_text , true);
http.send();
}
};
PHP:
<?php
$data = $_GET;
$user_text = $_GET['user_text'];
$response = strtoupper($user_text)
echo $response;
?>
Error in the console :
Uncaught (in promise) Object {message: "Invalid method piSession.buildPageInteractionSession", stack: "Error: Invalid method piSession.buildPageInteracti…on↵ at true-key://data/scripts/core.js:10:8889"}
Your code is wrong.
It should be:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("server_response").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "http://localhost/inderstand_Ajax/server.php?user_text="+current_text, true);
xhttp.send();
and not:
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
var response = http.responseText;
document.getElementById('server_response').value = response;
}
http.open("GET" , "http://localhost/inderstand_Ajax/server.php?user_text="+current_text , true);
http.send();
}
you cannot send the request inside onreadystatechange.
This problem occurred also for me today.
I removed true-key from my chrome-browser and now the error in the console is gone.
Try remove true-key from your chrome-browser and tell if the error still occurs in the console.
This is a problem with the latest version (at time of writing) of the True Key chrome extension.
Related
I have a browserside javascript file that's supposed to be asking the serverside php file for a string with an ajax request. The php file seems to have the correct string, but for some reason the ajax request is returning the string 'false'.
This is the php file, named test.php:
<?php
$dir = "site/uploads";
$a = scandir($dir);
$b = json_encode($a);
echo $b;
?>
This is the js file:
function load(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.responseType = "text";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log('test' + xmlhttp.responseText);
console.log('test' + JSON.parse(xmlhttp.responseText));
}
};
xmlhttp.open("GET", "test.php", 'false');
xmlhttp.send();
var xmlhttp2 = new XMLHttpRequest();
xmlhttp2.responseType = "text";
xmlhttp2.onreadystatechange = function() {
if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) {
console.log('test2' + xmlhttp2.responseText);
console.log('test2' + JSON.parse(xmlhttp2.responseText));
}
};
xmlhttp2.open("GET", "test2.php", 'false');
xmlhttp2.send();
}
when i open the website in my browser and run load(), the console reads:
testfalse
testfalse
test2false
test2false
and has no errors. What am I doing wrong here? Thanks!
scandir() in the php-file is probably returning false, because of an error.
https://www.php.net/manual/de/function.scandir.php (Check the return values)
There are multiple possiblities for this to happen:
The folder doesn't exist
The path is incorrect (Try using absolute paths)
The folder isn't accessible, because of missing permissions
i am using php and ajax together to access data from user and insert into database.problem is that it works fine with small string but when i try to send data on 10000 characters browser prompts an error saying url to long.. i can make change in php but i want it to be dynamic so i have to it using this way only.. help me plz.
function submitQuestion(){
var x=document.forms['Ask']['title'].value;
var y=document.forms['Ask']['description'].value;
if(x.length == 0 || y.length == 0){
alert('Insufficient Data');
}else{
startLoading();
console.log(y);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status==200){
console.log(this.responseText);
if(this.responseText == "All Done"){
clearInterval(startLoadingClearInt);
alert("data Inserted");
// window.location.replace('../profile/userprofile.php');
}
}
};
//here x is very inn some cases and produces an error
xhttp.open("POST","./submitQuestion.php?title="+x+"&description="+y, true);
xhttp.send();
}
}
You cannot transfer large data via url (as messerbill said). You have to send them in the Body:
function submitQuestion(){
var x=document.forms['Ask']['title'].value;
var y=document.forms['Ask']['description'].value;
if(x.length == 0 || y.length == 0){
alert('Insufficient Data');
}else{
startLoading();
console.log(y);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status==200){
console.log(this.responseText);
if(this.responseText == "All Done"){
clearInterval(startLoadingClearInt);
alert("data Inserted");
// window.location.replace('../profile/userprofile.php');
}
}
};
//here x is very inn some cases and produces an error
xhttp.open("POST","./submitQuestion.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("title="+x+"&description="+y");
}
}
inside the PHP-Script you get the data via the $_POST Array, not via the $_GET Array!
this is my second post, I hope to be luckier than last time end get some reply. 🙂
I’m trying to make a Rapidapi api request working with javascript ”XMLHttpRequest”
I must say that the api works perfectly with ios siri shortcut.
this is the code provided from apirapit site on the "XMLHttpRequest" section:
var data = null;
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
console.log(this.responseText);
}
});
xhr.open("GET", "https://download-video-youtube1.p.rapidapi.com/mp3/medPORJ8KO0");
xhr.setRequestHeader("x-rapidapi-host", "download-video-youtube1.p.rapidapi.com");
xhr.setRequestHeader("x-rapidapi-key", "[my key here]");
xhr.send(data);
And this is my code:
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.withCredentials = true;
url='https://download-video-youtube1.p.rapidapi.com/mp3/xF5t2jOsCt8';
xhttp.onreadystatechange = function() {
if ((this.readyState == 4 && this.status == 200 )||(this.readyState === this.DONE)) {
document.getElementById("demo").innerHTML = "ciao" + this.responseText;
}
};
xhttp.open("GET", url);
xhttp.setRequestHeader("x-rapidapi-host", "download-video-youtube1.p.rapidapi.com");
xhttp.setRequestHeader("x-rapidapi-key", "[my key here]");
xhttp.send();
}
</script>
</body>
</html>
Just to testing I created a simply bank html page to have the JSON response beneath the button just after pressing it. The result is just the string “ciao” i set before the this.responseText. If I remove the apikey or modify it with a wrong value an JSON error message appear ( so like the case posted, as I intentionally removed it).
Otherwise as said noting but “ciao” string
Is there any syntax error? Is there a logical reason why it behave like this?
Thanks
Franco
Trying adding a data variable as null. That's what RapidAPI provides in their code snippet.
function loadDoc() {
const data = null
var xhttp = new XMLHttpRequest();
xhttp.withCredentials = true;
url='https://download-video-youtube1.p.rapidapi.com/mp3/xF5t2jOsCt8';
xhttp.onreadystatechange = function() {
if ((this.readyState == 4 && this.status == 200 )||(this.readyState === this.DONE)) {
document.getElementById("demo").innerHTML = "ciao" + this.responseText;
}
};
xhttp.open("GET", URL);
xhttp.setRequestHeader("x-rapidapi-host", "download-video-youtube1.p.rapidapi.com");
xhttp.setRequestHeader("x-rapidapi-key", "my key here");
xhttp.send(data);
}
I'm trying to load a file and display it in the div section of my web page, using AJAX. The console output shows that the XMLHttpRequest object is successfully created, but then nothing happens: the callback function is never called and the content of the URL is not fetched.
<body>
<div id="demo"><p>Some text</p></div>
<button type="button" onclick="loadDoc()">Request URL</button>
<script>
function loadDoc() {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
console.log('object created'); // this message is printed
} else if (window.ActiveXObject) {
xhttp = new ActiveXObject("Mіcrosoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
console.log('inside callback function'); // this message is never printed
if(xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
xhttp.open("GET", "http://tools.ietf.org/rfc/rfc6120.txt", true);
xhttp.send(null);
};
}
console.log('end of script'); // this message is printed
</script>
</body>
I don't know much about HTTP requests and I'm assuming that AJAX can be used to load an url that is perfectly accessible to my web browser.
Is this assumption incorrect? If not, then what am I doing wrong?
Reorder your code
xhttp.onreadystatechange = function() {
console.log('inside callback function');
if(xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "http://tools.ietf.org/rfc/rfc6120.txt", true);
xhttp.send(null);
You must to send the request and the callback will be fired automatically. If you put that code inside the callback, you never achieve the request to the txt file
I am trying to send a form data using POST method and xmlhttp.open
Please help find the error in my code
function submitChat() {
if (form1.msg.value == '' ) {
alert ('ALL FIELDS ARE MANDATORY');
return;
}
var xmlhttp = new XMLHttpRequest();
var msg = form1.msg.value;
var params = 'msg=helloooooooo';
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('POST', 'rtest.php?rid=14', true);
xmlhttp.send(params);
}
Everything is fine and it is working with GET method. but POST method is not working. Please help.