AJAX and PHP

[RIRedinPA]

My AJAX test code is working except it is not returning a value for the XMLHttpRequest property responseText. I'm also having a problem writing to the div but that's a JS issue, not PHP.

 

Here's what I am doing:

 

Click the save button and that calls an AJAX function, which calls a test php page that simply echoes "This is the new save page" and generates an email to myself. In the Javascript I write the HTTP Response (which I thought should be what I echoed  -->XMLHttpRequest property, responseText, will store the data that a PHP script displays to the browser) to a div named msgBox. The email part works fine, I get a message but nothing gets written back to the page. I've got the error console open in Firefox and the JS looks fine, no errors. I write to the div at the top of the function and that works, so I know I am finding it. Here's my code:

 

Javascript:

 

function saveRecord()  {
//place divs in an array
var divs=document.getElementsByTagName('div');
//test write to msgBox, it writes the string but then disappears
divs.msgBox.innerHTML= "This is a test";

//ajax [trapping for browsers]
var xmlHttp;
// Firefox, Opera 8.0+, Safari
try {xmlHttp=new XMLHttpRequest();} 
	catch (e) {
  		// Internet Explorer
  		try {xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}
  			catch (e) {
    			try {xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
    				catch (e) {
      					alert("Your browser does not support AJAX!");
      					return false;
      				}
    		}
  		}

//checking the readystate
xmlHttp.onreadystatechange=function() {
    	if(xmlHttp.readyState==4) {
		//looking to see what newsave.php is returning - it brings back nothing right now, wtf.
		alert(xmlHttp.responseText);
		//the string is written to the page but then disappears
      		divs.msgBox.innerHTML= "This is another test";
      	}
    }
  	xmlHttp.open("POST","newsave.php",true);
  	xmlHttp.send(null);

//same here, the string is written to the page but then disappears, why is it being overwritten by " " ?
divs.msgBox.innerHTML= "This is the third test";
} //end function

HTML

 

<div id="savelink" style="position: absolute; left: 15px; top: 250px; width: 100px; height: 20px; display: block; font: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; padding-left: 0px; padding-top: 3px;"><input type="image" name="btn_save" src="images/btn_save.gif" onClick="saveRecord();"></div>
<div id="msgBox"> </div>

PHP

 

<?php

    //html email
    require_once("../lib/html_mime_mail_2.5/htmlMimeMail.php");
    // Instantiate a new HTML Mime Mail object
    $mail = new htmlMimeMail();
    // Set the sender address
   $mail->setFrom($emailAddress);
    // Set the reply-to address
   $mail->setReturnPath($emailAddress);
    // Set the mail subject
    $mail->setSubject("Merion Direct Mail Order Form | " . $tablename);
    //construct html 
    $html = "This is the email";
    // Create the HTML email
    $mail->setHTML($html, $imagePath);
    // Send the email!
    $mail->send(array("me@me.com"));

    echo "this is the new save page";

?>

 

 

[nikefido]

You are using POST but you are not sending the POST data!

 

You need to create a string with the post data (var post_data = "arg1=value&arg2=value2... "; )

 

Might be something like this:

var post_data = "first_name" + encodeURIComponent(first_name) + "&last_name=" + encodeURIComponent(last_name)";

 

Then you need to pass (send) that string of data:

xmlHttp.send(post_data);

 

 

This means your function needs to take parameters - from your php code

In fact, your php code you are showing us doesn't send ANY POST or GET data at all (i think? is MIMEMail set up to send POST data?)..

 

 

I hope this gets your started in the right direction, I think you need to look at how ajax works more closely...

[RIRedinPA]

Thanks for the reply.

 

My understanding of AJAX is that you don't necessarily have to send anything to the page (PHP, ASP, whatever) that you're calling. (Not that I won't be, I didn't post the entire form I am working with because it is huge). With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background. My understanding of this is your basically loading a page on the server (ASP, PHP, etc.) and returning the results of that page (via echo or response.write) to the Javascript and then using the javascript to display those results. There is no requirement to pass variables via POST or GET, or HEAD, your just asking to see what the PHP/ASP/whatever page you loaded returned to the server. 

[RIRedinPA]

Just to support my argument here's two examples, neither of which send variables from the javascript but return and display values from the PHP page loaded:

 

http://www.w3schools.com/ajax/ajax_server.asp

http://www.tizag.com/ajaxTutorial/ajaxxmlhttprequest.php