AJAX当中GET和POST方法在是现实的区别

来源:互联网 发布:骨康蝮蛇木瓜胶囊淘宝 编辑:程序博客网 时间:2024/06/06 05:08
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Send Request Data Using GET and POST网络大本营 http://www.QQView.com</title>
<script type="text/javascript">
<!--
var oHttp;

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

function createQueryString()
{
   var firstName
=document.getElementById("firstName").value;
   var middleName
=document.getElementById("middleName").value;
   var birthday
=document.getElementById("birthday").value;
   
   var QueryString
="firstName="+firstName+"&middleName="+middleName+"&birthday="+birthday;
   return QueryString
}

function doRequestUsingGET()
{
   createXMLHttpRequest();
   var queryString
="Handler.ashx?";
   queryString
=queryString+createQueryString()+"&timeStamp="+new Date().getTime();
   oHttp.onreadystatechange
=handleStateChange;
   oHttp.open(
"GET",queryString,true);
   oHttp.send(
null);
}

function doRequestUsingPOST()
{
   createXMLHttpRequest();
   var url
="Handler.ashx?timeStamp="+new Date().getTime();
   var queryString
=createQueryString();
   oHttp.onreadystatechange
=handleStateChange;
   oHttp.open(
"POST",url,true)
   oHttp.setRequestHeader(
"Content-Type","application/x-www-form-urlencoded;");
   oHttp.send(queryString);
}

function handleStateChange()
{
   
if(oHttp.readyState==4)
   {
      
if(oHttp.status==200)
   {
      parseResults();
   }
   }
}

function parseResults()
{
   var responseDiv
=document.getElementById("serverResponse");
   
if(responseDiv.hasChildNodes())
   {
      responseDiv.removeChild(responseDiv.childNodes[
0]);
   }
   var responseText
=document.createTextNode(oHttp.responseText);
   responseDiv.appendChild(responseText);
}
//-->
</script>
</head>

<body>
<h1>Enter your first name,middle name,and birthday: 
</h1>
<table>
<tbody>
<tr>
<td>First name:</td>
<td><input id="firstName" type="text" /></td>
</tr>
<tr>
<td>Middle name:</td>
<td><input id="middleName" type="text" /></td>
</tr>
<tr>
<td>birthday:</td>
<td><input id="birthday" type="text" /></td>
</tr>
</tbody>
</table>
<form action="#">
<input type="button" value="Send parameters using GET" onclick="doRequestUsingGET();" />
<br />
<br />
<input type="button" value="Send parameters using POST" onclick="doRequestUsingPOST();" />
</form>
<br />
<h2>Server Response:</h2>
<div id="serverResponse"></div>
</body>
</html>
 
原创粉丝点击