Hi I have this code that for some reasons I don't understand just refuse to work. I really don't know what I will do anymore.
This is my code:
<script>
function findMatch() {
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}else {
xmlhttp = new ActiveXObject('Microsoft.XMLHttp');
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('results').innerHtml = xmlHttp.responseText;
}else {
console.log('not ready yet');
}
}
xmlhttp.open('GET','aindex.php',true);
xmlhttp.send();
}
</script>
<form>
Enter a name<br>
<input type="text" id="search" name="keyword"
onkeydown="findMatch();">
</form>
<div id="results"></div>
//THE PHP FILE TO OUTPUT
<?php
echo 'Did it work';
?>
It prints not ready in the console indicating that the readystate and status test failed. I am working with xamp.
Please pals, any help will be highly appreciative.
Thank.
You're not sending the search keyword to the PHP script.
var keyword = document.getElementById("search").value;
xmlhttp.open("GET", "aindex.php?keyword=" + encodeURIComponent(keyword)", true);
xmlhttp.send();
There's also little point in reporting an error when xmlhttp.state is not 4, other states are normal as intermediate steps. If you want to report an error, do it when xmlhttp.status is not 200.
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
document.getElementById('results').innerHtml = xmlHttp.responseText;
} else {
console.log("Bad status: " + xmlhttp.status);
}
}
Related
I'm trying to make basic HTML Server connection, therfore I want to call and JS function which should call an PHP file just schoing "hello world". Everything is working so far but the response I get seems to be null.
I've read through various tutorials but I did not find an answer, hope someone can help me.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == XMLHttpRequest.DONE && xhttp.status==200 && xhttp.responseText!=null) {
alert("Responestext: " + xhttp.responseText + " ENDE");
}else if(xhttp.status==403){
alert("forbidden");
}else if(xhttp.status==404){
alert("not found");
}else if(xhttp.responseText==null) {
alert("response text = null");
}else{
alert("Error");
}
};
xhttp.open("GET", "http://URL/fahrgemeinschaft/login.php", true);
xhttp.send(null);
I expect the output to be "Responsetext: hello world ENDE" but all I get is "Error".
I get two alert boxes saying "Error" as well.
The problem is your onreadystatechange handler is called for every ready state change event, not just when it is done.
You should skip the events that are not done:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState != XMLHttpRequest.DONE) {
return;
}
if (xhttp.status==200 && xhttp.responseText!=null) {
alert("Responestext: " + xhttp.responseText + " ENDE");
}else if(xhttp.status==403){
alert("forbidden");
}else if(xhttp.status==404){
alert("not found");
}else if(xhttp.responseText==null) {
alert("response text = null");
}else{
alert("Error");
}
};
xhttp.open("GET", "http://messenger.hopto.org:8080/fahrgemeinschaft/login.php", true);
xhttp.send(null);
Or to make it easier on yourself, so long as you don't need to support obsolete browsers, just use the onload event.
var xhttp = new XMLHttpRequest();
xhttp.onload = function() {
if (xhttp.status==200 && xhttp.responseText!=null) {
alert("Responestext: " + xhttp.responseText + " ENDE");
}else if(xhttp.status==403){
alert("forbidden");
}else if(xhttp.status==404){
alert("not found");
}else if(xhttp.responseText==null) {
alert("response text = null");
}else{
alert("Error");
}
};
xhttp.open("GET", "http://messenger.hopto.org:8080/fahrgemeinschaft/login.php", true);
xhttp.send(null);
I'm making this api call and not getting any results. When I make the call from the browser and search with that imo, I get back the vessel information but not in the call from code.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="pr"></div>
<script>
getInfoVessel("9146314");
function httpGetAsync(url, callback) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
callback(xmlHttp.responseText);
}
}
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function getInfoVessel(IMO){
httpGetAsync('http://services.marinetraffic.com/api/exportvessel/v:5/7[herecomesthekey]/protocol:jsono/imo:9146314', function(response) {
document.getElementById('pr').innerHTML = response;
});
}
</script>
</body>
</html>
The response is good Status Code:200 OK but there is an error in the response KEY NOT FOUND.
Try this code:
function httpGetAsync(url, callback) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
callback(xmlHttp.responseText);
}
}
}
function getInfoVessel(IMO){
httpGetAsync('http://services.marinetraffic.com/api/exportvessel/v:5/7[herecomesthekey]/protocol:jsono/imo:' + IMO, function(response) {
console.log(response)
document.getElementById('pr').innerHTML = response;
});
}
getInfoVessel("9146314");
I have this code with me:
<input id="qfront" name="qfront" placeholder="Ketik Nama Kampus ..."
value="" type="text" onKeyPress="strQuery(this.value)"/> *<!--first inputbox-->*
<script>
function strQuery(str) {
if (str.length == 0) {
document.getElementById("valdata").value = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("valdata").value = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "inc.php?q="+str, true);
xmlhttp.send(null);
}
}
</script>
<input id="valdata" name="valdata" value="" type="text" onChange="showalert()"/>*<!--2nd inputbox-->*
<script>
function showalert(){
var X =document.querySelector("#valdata").value;
alert(X);
}
</script>
When I run function strQuery(str) it works 100% and show the result in the second inputbox (#valdata). When second inputbox contains data (from 1st inputbox). the second box not show alert
Do I miss something? How can I do this? (pls not using jquery). many thanks
I've finally found the solution for my problem.
I fix the place of the second JS (showalert) into the first, as follows:
<input id="qfront" name="qfront" placeholder="Ketik Nama Kampus ..."
value="" type="text" onKeyPress="strQuery(this.value)"/>
<script>
function strQuery(str) {
if (str.length == 0) {
document.getElementById("valdata").value = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("valdata").value = xmlhttp.responseText;
showalert()
}
}
xmlhttp.open("POST", "inc.php?q="+str, true);
xmlhttp.send(null);
}
}
function showalert(){
var X =document.querySelector("#valdata").value;
alert(X);
}
</script>
<input id="valdata" name="valdata" value="" type="text"/>
Thanks so much for discussion.
It looks like there's a missing double quote after showalert();
But separately, I think that onchange may only fire in response to user input. If that's the case, simply change your code to:
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("valdata").value = xmlhttp.responseText;
document.getElementById("valdata").onchange();
}
What is the issue in below script.Here alert "33here" is coming but am not getting my json object.alert(jsontext) is coming blank.if i hit this URL in browser then i am getting JSON object.
xmlHttp = new XMLHttpRequest();
xmlHttp.overrideMimeType("application/json");
alert('11here');
xmlHttp.open( "GET", "http://<hostname>/appsuite/api/login", true );
alert('22here');
alert(xmlHttp);
xmlHttp.send();
alert('33here');
var jsontext= xmlHttp.responseText;
alert(jsontext);
Tried as per suggestions but not working.I am new in javascript / ajax.Any issue in this ?
xmlHttp = new XMLHttpRequest();
xmlHttp.overrideMimeType("application/json");
alert('Hi 11here');
xmlHttp.open( "GET", "http://<hostname>/appsuite/api/login", true );
alert('Hi 22here');
alert(xmlHttp);
xmlHttp.send();
alert('Hi 33here');
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert(xmlHttp.responseText);
}
}
Ajax runs asynchronously. You can't depend on when the request from .open will complete or even if it will complete. Any code that depends on the value of an ajax request must be done in the request callback.
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert(xmlHttp.responseText);
}
}
A good place to start is looking at the examples provided by MDN: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
function alertContents(httpRequest) {
try {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
catch( e ) {
alert('Caught Exception: ' + e.description);
}
}
After the request status reached 200 and the ready state is 4 the response is filled.
Here is an example of my code:
function blah()
{
var xmlHttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.status == 200 && xmlHttp.readyState == 4)
alert(xmlHttp.responseText);
}
xmlHttp.open("GET", "ajax.php?_=" + new Date().getTime(), true);
xmlHttp.send();
}
It seems to work find in Chrome but IE8 throws an "Unsepcified Error" on the if status = 200 and readyState = 4 line.
Oddly, though, the alert does give the response from the php page.
Any ideas why this might be happening?
Maybe checking status if readyState != 4 causes the error in IE?
Try
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)