ajax中XMLHttpRequest对象的open()方法GET和POST方式区别
|
GET 和 POST 是进行 HTTP 请求和在请求中传递变量的两种方法。开发人员不应当随意选择使用哪种方法，因为两种方法都有使用意义。GET 请求把变量嵌在 URL 中，这意味着它们是可以加书签的。如果变量可能会修改数据库、购买商品或者做其他类似操作，这种方法会有副作用。假设偶然间加了书签的页面有一个购买商品的 URL ，里面包含地址、信用卡号以及 $100 的产品，全都嵌在 URL 中，那么重新访问这个 URL 就意味着购买这件商品。
例子： 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;
}
<?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()发送
} （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |