chiprivers Posted September 14, 2010 Share Posted September 14, 2010 I have not used ajax before but I believe it is the tool I am looking for to make one aspect of my current project run smoothly. I have tried googling several ajax tutorials but I am struggling to get me head around how to do this. What I want to do is the following: I have a basic page php page with a table contained within a div <div id="dynamic_update"> <table id="results_table"> ... </table> </div> When the page first loads, the html for the table is sourced from a further php script using the required function. What I want to be able to do is use ajax to send some variables to the php script which generates the table code, process the provided variables, return some revised code for the entire table, and replace the existing table with the new one. I am happy with the general html, php and javascript/jquery elements of making this work, I just dont know where to start with the whole ajax part of it! Any guidance or a basic explanation of the various steps / actions would be much appreciated. I am sure I can work the rest out once I know the basics. Quote Link to comment Share on other sites More sharing options...
gamesmstr Posted September 16, 2010 Share Posted September 16, 2010 Step 1: In the <HEAD> section of your parent file create a JS function to open an XMLHTTPrequest. This is what allows AJAX to load a php file. <SCRIPT> function createXMLHttpRequest() { if (typeof XMLHttpRequest != 'undefined') { return new XMLHttpRequest(); } try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } return false; }</SCRIPT> Step 2: Define a function that gets what you need and sends it to it's target <SCRIPT> function AJAX(var1) { var xmlHttp = createXMLHttpRequest(); //var1 is passed with the function call, var2 is form data that can be retrieved var var2 = document.getElementById("var2data").value; //this sets up the parameters to be sent using the POST method later params = "var1=" + var1 + "&var2=" + var2; //this opens the target php file and tells it what method data will be sent in xmlHttp.open("POST","targetfile.php", true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4 && xmlHttp5.status == 200) { //this tells it where to put the output of the target php file document.getElementById("dynamic_update").innerHTML = xmlHttp.responseText; } } //This sends the var1 and var2 variables we defined earlier via the POST method xmlHttp.send(params); } Hope that helps! Quote Link to comment Share on other sites More sharing options...
chiprivers Posted September 16, 2010 Author Share Posted September 16, 2010 Thanks for that gamesmstr, I will spend some time looking at that to see if I can get my head around it. Hopefully it will be easier to understand when applying it to my own project! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.