Why jQuery --- Ajax Example

If you want to understand jQuery on this example. You should know these command.

1. Basic on JS.
2. Familiar with HTML and JS

Here is the jQuery Link. Next is the ajax  code example on all website you search for.

// Function On Click Btn like 'onclick="loginsys()"', here is check for log in Info,when you click it.
function loginsys()
{

if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 
//Here is the http-reponse event function.
xmlhttp.onreadystatechange = function getreponse()
{

if (xmlhttp.readyState==4 && xmlhttp.status == 200)
     {
         var reponseType = xmlhttp.responseText;
   switch(reponseType)
   {
//When log in failed, return error string by setting.
   case "ERROR_588":
    alert("Plz Check Your Sign In Info");
    break;
//When log in successed
   default:
//Change the HTML node by reponse Info.
   document.getElementById('Control_Tab2').innerHTML = reponseType;
   document.getElementById('Control_Tab3').innerHTML = "Sign Out";
   document.getElementById('Control_Tab3').setAttribute("onclick", "logoutsys()");
//element "Contain_Ele" is div element which had two childe element .
//LoginInfo and SignInBtn is  and in Contain_Ele.

//When Log in success , remove node.
   var mom = document.getElementById("Contain_Ele");
   var child1 = document.getElementById("LoginInfo");
   var child2 = document.getElementById("SignInBtn");
   mom.removeChild(child1);
   mom.removeChild(child2);
   break;
    }
     }


}

//Here is the request when you click log in Btn, send the log info by "POST".
 userid = document.getElementById("UserID").value;
 password =  document.getElementById("PasWd").value;
 if(userid.length == 0 || password.length == 0)
 {
 alert("Check Your userID or passWord");
 }
 else
 {
 xmlhttp.open("POST","SignCenter/checkCookie.php",true);
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xmlhttp.send("userid="+userid+"&password="+password);
 }


}

Now we see the same code use as jQuery

function loginsys()
{
 if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 userid = $('#UserID').val();
 password = $('#PasWd').val();
 if(userid.length == 0 || password.length == 0)
 {
 alert("Check Your userID or passWord");
 }
 else
 {        
//function(result) do the same action as xmlhttp.onreadystatechange event.
  $.post("SignCenter/checkCookie.php",{userid:userid,password:password},
function(result)
{
   switch(result)
   {
   case "ERROR_588":
           alert("Plz Check Your Sign In Info");
    break;
   default:
    //JQuery Code
    $('#Control_Tab2').html(result);
    $('#Control_Tab3').html("Sign Out");
    $('#Control_Tab3').attr("onclick", "logoutsys()");
    $('#SignInBtn').remove();
    $('#LoginInfo').remove();
    break;
    }
   });

}
}

That is why jQuery become popular in these years. It help web developer code more easy and faster.