Question

sorry but Im unable to understand these example. I started learning ajax right from today.

I have understood the below script so far

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

but in the below script

xmlhttp.onreadystatechange=function()
 {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
 }

why do we use document.getElementById("txtHint").innerHTML=xmlhttp.responseText. I dont understand why we are doing these.Could anyone kindly explain me these, Im not sure if the above script is optional or not, please let me know it.

and also the post method in Ajax

xmlhttp.open("POST","test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname="+str);

what is the use of xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); Im unable to understand the parameters of it and why it is being used , what does it really do in the script. what do we mean by content-type and application/x-www-form-urlencoded and its still working, even i dont give any user options

please help me with these both Then i believe I have completed the Ajax tutorials.Thanks

Answer 1

document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

This basically just set textHint with whatever result the AJAX has (xmlhttp.responseText). And textHint could be simple html code with ID textHint:

<div id="textHint"></div>

That code is absolutely optional. You can do whatever process you want with the AJAX result, EG:

• alerting it: alert(xmlhttp.responseText);
• do further process, maybe processing the XML (if it’s XML document) or do JSON processing.
• Just anything you want.

For the next question:

xmlhttp.open("POST","test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname="+str);

is equal to sending HTML form:

<form method="POST"><input type="hidden" name="fname" value="{str}"/></form>

It try to send form data fname to server script test.php using POST method and transporting the data using MIME-TYPE application/x-www-form-urlencoded. You can read the full specification in W3 site.