homepage Welcome to WebmasterWorld Guest from 54.211.181.45
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Javascript seems to not communicate with PHP
godfrey tan2001



 
Msg#: 4581532 posted 3:31 am on Jun 6, 2013 (gmt 0)

Hi,

My codes:
chuffbucket.html
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="localhost/godfrey/Chuff Bucket/foods.js"></script>
</head>
<body>
<h1>The Chuff Bucket</h1>


<form>
Enter food item: <input type="text" id="userinput" name="userinput" onkeyup="processit(this.value)" />

</form>

<p id="resptext">Response here...</p>
</body>
</html>

foods.js

function processit(str){

if (str.length==0){ document.getElementById("resptext").innerHTML="Response here...";
return;
}

var xmlhttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject(){
var xmlhttp;

// Check if using non-IE browsers

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}

if (xmlhttp) {
try {
// Open function configures connection to server settings

xmlhttp.open("GET","http://localhost/godfrey/Chuff Bucket/foods.php?str="+str,true);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("resptext").innerHTML=xmlhttp.responseText;
}
xmlhttp.send(null);
}
} catch(e) {
alert( e.toString() );
}
}

//alert(str);
}

foods.php
<?php
$q = $_GET["str"];


$foods = array("tuna","ham","fish");

if (isset($q)){
if (!empty($q)){
if (in_array($q,$foods)){
echo ("We have ". $q);
} else {
echo ("We don't have such food");
}
}
}
?>

I cant seem to get the javascript (foods.js) to communicate with the php file (foods.php).

All files are in the same directory.

 

godfrey tan2001



 
Msg#: 4581532 posted 11:45 am on Jun 6, 2013 (gmt 0)

Hi,

BTW, when I printed out the xmlhttp.status = 0 and xmlhttp.readyState = 0 and they do not change to 200 and 4 respectively.

Very strange...

chuffbucket.html is in the localhost/godfrey/chuffbucket directory and foods.php is in the localhost/godfrey/chuffbucket/php subdirectory and foods.js is in the localhost/godfrey/chuffbucket/js subdirectory.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4581532 posted 12:54 pm on Jun 6, 2013 (gmt 0)

What browser are you using? Most of the browsers have pretty good developer tools now that let you see the network requests. For example, in Google Chrome, press F12 to open the Developer Tools, click on the Network tab, and then load your page. You'll see what the status of the request is.

godfrey tan2001



 
Msg#: 4581532 posted 1:48 pm on Jun 6, 2013 (gmt 0)

Hi,

I am using Firefox...

Godfrey

godfrey tan2001



 
Msg#: 4581532 posted 1:56 pm on Jun 6, 2013 (gmt 0)

Hi,

I got"Load Event Fired" in red line and in blue "DOM Event Fired" all in 73ms.

Godfrey

godfrey tan2001



 
Msg#: 4581532 posted 2:01 pm on Jun 6, 2013 (gmt 0)

Hi,

The same thing also occurs in Chrome...dont seem to be able to debug it.

Godfrey

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4581532 posted 2:21 pm on Jun 6, 2013 (gmt 0)

Are you looking at the Network tab? That shows things like the response status (200, 404, etc.). It doesn't sound like you're looking at the right thing.

godfrey tan2001



 
Msg#: 4581532 posted 2:43 pm on Jun 6, 2013 (gmt 0)

Hi,

Yes, I was in the network tab at the bottom menu...

Theres Name, Method, Status, Type Initiator, Size, Time, etc

I suppose this is the correct tab...

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4581532 posted 3:22 pm on Jun 6, 2013 (gmt 0)

So do you see the request to foods.php, and what status does it have? Perhaps it's 304 (Not Modified)?

godfrey tan2001



 
Msg#: 4581532 posted 4:34 pm on Jun 6, 2013 (gmt 0)

Hi,

This is the debug I get from Firefox...

Response Headers
ConnectionKeep-Alive
Content-Length176
Content-Typetext/html
DateThu, 06 Jun 2013 16:24:56 GMT
Keep-Alivetimeout=5, max=92
ServerApache/2.4.3 (Win32) OpenSSL/1.0.1c PHP/5.4.7
X-Powered-ByPHP/5.4.7
Request Headers
Accepttext/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encodinggzip, deflate
Accept-Languageen-US,en;q=0.5
DNT1
Hostlocalhost
Originnull
User-AgentMozilla/5.0 (Windows NT 6.1; rv:21.0) Gecko/20100101 Firefox/21.0

And here is my modified code in chuffbucket.html:
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />


</head>
<body>
<h1>The Chuff Bucket</h1>



<form>
Enter food item: <input type="text" id="userinput" name="userinput" onkeyup="processit(this.value)" />

</form>
<p>xmlhttpstatus: </p><p id="xmlhttpstatus"></p>
<p>xmlhttpreadystate: </p><p id="xmlhttpreadystate"></p>

<br />
<p id="resptext">Response here...</p>



<script>
function processit(str){


if (str.length==0)
{
document.getElementById("resptext").innerHTML="Response here...";
return;
}

var xmlhttp;

// Check if using non-IE browsers
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.open("GET","http://localhost/godfrey/ChuffBucket/php/foods.php?str="+str,true);
xmlhttp.send(null);




xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("resptext").innerHTML=xmlhttp.responseText;
}
}

}
</script>

</body>
</html>

The php file remains the same...

Once I put in "http://localhost/godfrey/ChuffBucket/php/foods.php?str=" in xmlhttp.open(), the connection to foods.php worked.

Now I just cant figure why the response from foods.php is blank.

Can you help?

godfrey tan2001



 
Msg#: 4581532 posted 4:38 pm on Jun 6, 2013 (gmt 0)

Hi,

The status is 200...under response is blank.

Godfrey

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4581532 posted 6:00 pm on Jun 6, 2013 (gmt 0)

You've defined the onreadystatechange function AFTER you're calling send. Swap those and see if that fixes it.

godfrey tan2001



 
Msg#: 4581532 posted 8:37 am on Jun 18, 2013 (gmt 0)

Hi Fotiman,

I solved the problem. With IE, under Security Settings->Custom Level->Miscellaneous->Allow Data Across Domains. That worked...

Problem is, I dont know how to set this in Chrome and Firefox.

After seting this in IE, I could see the readyState changed to 4 and Status to 200.

Below is my Javascript code:
function processit(str){

if (str.length==0){
document.getElementById("resptext").innerHTML="Response here...";
return;
}

var xmlhttp = false;

// Check if using non-IE browsers
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

// This is the best sequence of code

xmlhttp.onreadystatechange=function(){
document.getElementById("xhr").innerHTML = "<p>Ready State is " + xmlhttp.readyState + "<p>Status is " + xmlhttp.status + "<br />";
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("resptext").innerHTML = xmlhttp.responseText;
} else {
setTimeout('function()',1000);
}
}

xmlhttp.open("GET","http://localhost/godfrey/ChuffBucket/php/foods.php?str="+str,true);

xmlhttp.send(null);
}

whoisgregg

WebmasterWorld Senior Member whoisgregg us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4581532 posted 5:13 pm on Jun 18, 2013 (gmt 0)

localhost is your problem. Browsers don't like AJAX calls to localhost.

You should be able to point a testing domain name to your local machine using your hosts file to avoid the problem.

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4581532 posted 12:38 am on Jun 20, 2013 (gmt 0)

Assuming chuffbucket.html and foods.php are both being served by some server on same domain you should not need to "Allow Data Across Domains"

Make sure url that gets you to chuffbucket.html uses same hostname as foods.php NOT 127.0.0.1 for example

Set up a test domain as whoisgregg says and use it in all references including location bar.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved