ajax中XMLHttpRequest对象的open()方法GET和POST方式区别

GET 和 POST 是进行 HTTP 请求和在请求中传递变量的两种方法。开发人员不应当随意选择使用哪种方法，因为两种方法都有使用意义。GET 请求把变量嵌在 URL 中，这意味着它们是可以加书签的。如果变量可能会修改数据库、购买商品或者做其他类似操作，这种方法会有副作用。假设偶然间加了书签的页面有一个购买商品的 URL ，里面包含地址、信用卡号以及 $100 的产品，全都嵌在 URL 中，那么重新访问这个 URL 就意味着购买这件商品。
　　所以，只有在变量没有副作用，可以经常重新载入也不会发生什么的时候，才可以进行 GET 请求。适合 GET 请求的一个变量可能是分类 ID。可以反复重新载入，分类会反复显示，但是没有任何累积的效果。
　　在另一方面，当变量对源（例如数据库）有作用时或者为了个人信息安全，应当采用 POST 请求。比如在购买一件 $100 的产品时，应当用POST 请求。如果给付款页面加了书签，由于 URL 中没有变量，所以什么也不会发生，也不会意外地购买了不想购买的东西，或者在已经拥有的情况下又买了一次。
　　GET 和 POST 的意义在 Ajax 中有同样的作用。在构建本文的应用程序和未来的应用程序时，理解 GET 和 POST 请求的差异是很重要的。这会有助于避免 Web 应用程序开发的常见缺陷。此段转载自：http://blog.sina.com.cn/s/blog_4a1111ba0100056a.html

例子：

HTML页面，是一个手机号码INPUT输入框，通过onkeyup事件调用getnum()函数，然后通过AJAX将手机号码提交到服务器端，服务器将接到的号码回应给浏览器端，javascript获取到值之后，改写DIV元素的innerHTML值。

GET方法：

<html>
<head>
	<style type="text/css">
		div{font-size:5em;background-color:green;width:1000px;}
	</style>
	<script src="num.js" ></script>
</head>
	<body>
		请输入你的手机号码：
		<input id="num" onkeyup="getnum(this.value)" maxlength='11' /><br/>
		请核对输入：
		<div id="responsetext"></div>
	</body>
</html>

num.js文件

		var xmlHttp;
		function getnum(num)//页面INPUT元素的onkeyup事件调用的函数
		{
			xmlHttp=createXMLHttp()
			if (xmlHttp==null)
			 {
			 alert ("Browser does not support HTTP Request")
			 return;
			 } 
			var url="check.PHP";
			url=url+"?q="+num;
			url=url+"&sid="+Math.random();//在URL后面添加随机数，使每次提交的url不同，避免浏览器读取的服务器响应是缓存值
			xmlHttp.onreadystatechange=act;//设置当readyState状态改变时执行的callback函数。
			xmlHttp.open("GET",url,true);//建立与服务器端的资源链接
			xmlHttp.send(null);
		}
		function act()
		{
			if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
			{ 
				document.getElementById("responsetext").innerHTML=xmlHttp.responseText //利用服务器响应值responseText改写HTML页面内容
			} 
		}
		function createXMLHttp()//创建XMLHttpRequest对象
		{
			var xmlHttp=null;

			try
			 {
			 // Firefox,Opera 8.0+,Safari
			 xmlHttp=new XMLHttpRequest();
			 }
			catch (e)
			 {
			 // Internet Explorer
			 try
			  {
			  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			  }
			 catch (e)
			  {
			  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			  }
			 }
			return xmlHttp;
		}

check.PHP

<?PHP
	$num=$_GET["q"];//获取浏览器javascript的XMLHttpRequest对象通过GET方法传来的参数。
	echo $num;//echo语句输出的值传回到浏览器端，通过XMLHttpRequest对象的responseText属性接收。
?>

POST方法：

主要是javascript种的XMLHttpRequest的请求方式改变了。同时服务器PHP程序端是通过$_POST[ ]获取参数。

function getnum(num)//页面INPUT元素的onkeyup事件调用的函数
		{
			xmlHttp=createXMLHttp()
			if (xmlHttp==null)
			 {
			 alert ("Browser does not support HTTP Request")
			 return;
			 } 
			var url="check.PHP";
			xmlHttp.onreadystatechange=act;//设置当readyState状态改变时执行的callback函数。
			xmlHttp.open("POST",true);//open()函数第一次method参数改为POST,url只包含服务器文件路径，参数在send()函数中传递
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//必须设置HTTP请求头格式
			xmlHttp.send("q="+num);//请求参数send()发送
		}

原文链接：https://www.f2er.com/ajax/164752.html

ajax中XMLHttpRequest对象的open()方法GET和POST方式区别

猜你在找的Ajax相关文章