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

前端之家收集整理的这篇文章主要介绍了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()发送
		}

猜你在找的Ajax相关文章