AJAX comments form

**acoder** · May 24 '07, 10:56 AM

First of all, read up on AJAX - see links in Offsite Links sticky thread.

Presumably, you'll want to make a POST request. The tutorials (or some of them at least) explain this very well.

If you get stuck, post your javascript code.

**praveen2gupta** · May 29 '07, 01:01 PM

Originally posted by blobb

Hi all,

i am new to AJAX, so need some help

I want to create simple feedback (comment) form, base on AJAX.
So, I have my HTML form, and even have my SQL database, and PHP script.
All is working quite ok, but I need to make it AJAX - the main reason is, that I DONT NEED PAGE TO BE RELOADED.

What can You suggest?

If needed, I will post all the codes here.

Thx.

If you are new then read w3.org for the ajax details. Underatand the basic concepts and apply after that. I am using ajax in my projects. It also
creats some problems. For initial code wait for one ot two days. I will be posting it.

**praveen2gupta** · May 30 '07, 07:21 AM

Originally posted by praveen2gupta

If you are new then read w3.org for the ajax details. Underatand the basic concepts and apply after that. I am using ajax in my projects. It also
creats some problems. For initial code wait for one ot two days. I will be posting it.

-------------------------
write the following code and save as ajaxtest.html . create another file and write some text there and save as test1.html . now run ajaxtest.html from a server. a button will appear on browser. click it you will get the text written in the test1.html file at the div tag without refreshing the browser. Test it with some images you will feel the difference.

Code:


<html>
<head>
<title>Ajax at work</title>

<script language = "javascript">


var httpObj = false;

	if (window.XMLHttpRequest) 
	{
		httpObj = new XMLHttpRequest();
	} 
	else if (window.ActiveXObject) 
	{
		httpObj = new ActiveXObject("Microsoft.XMLHTTP");
	}




	function getData(dataSource, divID)
	{
		if(httpObj) 
		{
			var obj = document.getElementById(divID);
			httpObj.open("GET", dataSource,true);
			httpObj.onreadystatechange = function()
			{
				if (httpObj.readyState == 4 && httpObj.status == 200) 
				{
					obj.innerHTML = httpObj.responseText;
					
				}
			}
			httpObj.send(null);
		}
	}
</script>
</head>
<body>
<H1>Fetching data with Ajax</H1>

<form>

<input type="button" value="Display Message" onmouseover='getData("test1.html","targetDiv")'>

</form>

<div id="targetDiv">
<p>The fetched data will go here.</p>
</div>
</body>
</html>

AJAX comments form

AJAX comments form

Comment

Comment

Comment