This is a function I use all the time. Its not Asynchronous but it call a php function with reload. Works great -
for this example it calls a script and adds an email to a database for a mailing list...
I wont write the PHP code, I'm assuming you know that bit - if not - Ask, and I'll post it.
Your main page - example.html
Code: Select all
<div id='div_example'>
<span id="span_prompt">enter your email:</span>
<input type='text' name='TXT_mailing_list_email' id='TXT_mailing_list_email'>
<input type="button" value="Sign Me Up" onclick="javascript: mailing_list_submit()" name="BTNsignmeup" id="BTNsignmeup">
</div>
Your Javascript code - js_ex.js
Code: Select all
function mailing_list_submit(){
var email = document.getElementById("TXT_mailing_list_email");
var txtp = document.getElementById("TXT_mailing_list_email_Prompt");
//personal function made to do a call and return it to the function noted in the last Variable -
// Var 1 - "/mailing_list/do.php?&email=' + email - to your PHP page - this also passes a variable via GET/POST method.
// Var 2 - "NONE" - The container to which you want your results to go. This is handled by the final function - so, you can pretty much pass anything you want.
// Var 3 - "mailing_list_return" - the function called when a response is made...
DoAjaxCall("/mailing_list/do.php?&email=' + email, "NONE", "mailing_list_return");
}
//this function is the return from the function above. Alerted so you can see it happen.
function mailing_list_return(Return_Info, Container){
alert(unescape(Return_Info));
var Return_Div = document.getElementById("div_example");
var Return_Text_Container = document.getElementById("span_prompt");
//Do what you will with the return info, for example here, send it back to the input.
if(Return_Info == "GOOD"){
Return_Div.innerHTML = "Great, Thank you for signing up";
}else if(Return_Info == "NO EMAIL"){
Return_Text_Container.innerHTML = "This email is not correct";
}//etc error checking on return blah...
//just copy paste the below - --------------------------------------------------------
function DoAjaxCall(Page_name, container, Function_return){
//start loading status
//call ajax - Function to send to...
url = Page_name + "";
AjaxReg( url, Function_return, container)
}
function AjaxReg(url, Function_return, Container_Element_NAMEONLY) {
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
spage_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
spage_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
spage_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
spage_request.open('GET', url, false) //get page synchronously
spage_request.send(null)
RegAjaxWrite(spage_request, Function_return, Container_Element_NAMEONLY);
}
function RegAjaxWrite(page_request, Function_return, iContainer_Element_NAMEONLY){
var iContainer_Element_NAMEONLY;
if (window.location.href.indexOf("http")==-1 || page_request.status==200)
//wt should be the function to passto which is Return_[Step_No](Respose)
eval(Function_return + "('" + escape(page_request.responseText) + "', '"+ iContainer_Element_NAMEONLY + "')")
//document.getElementById(iContainer_Element_NAMEONLY).innerHTML = "SEND";
}
// -------------------------------------------------
You PHP Page "/mailing_list/do.php"
Code: Select all
$email = $_GET['email']; //should perform Mysql safe stripping functions here!
/* This is where you PHP code is...
error check the email...
connect to the database, perform you bits...
*/
$return_from_database = true; //this is just an example of stating the mysql query you performed was successful
//these echo's are returned to your javascript function.. send anything like specific results...
if($return_from_database == true){
echo "GOOD";
}else{
echo "BAD";
}
That seems to be it. I know the examples clunky. What you really need is the Ajax call functions and you can pretty much Pimp it out for everything - I use that function every day and as its so simple to use, its implemented in seconds.
If you need a more indepth example Just ask.
Hope it helps.