homepage Welcome to WebmasterWorld Guest from 54.196.197.153
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
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:4581534
 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:4581617
 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




msg:4581634
 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:4581656
 1:48 pm on Jun 6, 2013 (gmt 0)

Hi,

I am using Firefox...

Godfrey

godfrey tan2001




msg:4581659
 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:4581663
 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




msg:4581670
 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:4581678
 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




msg:4581690
 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:4581816
 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:4581817
 4:38 pm on Jun 6, 2013 (gmt 0)

Hi,

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

Godfrey

Fotiman




msg:4581843
 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:4585258
 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




msg:4585413
 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




msg:4585938
 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