优秀的编程知识分享平台

网站首页 > 技术文章 正文

Ajax GET和POST模式（ajax $.get）

nanyue 2024-08-02 17:49:56 技术文章 5 ℃

GET和POST的区别

1 get请求将参数放到请求地址url的后面

post请求时将参数放在http请求空白行的后面

2 get请求时参数大小有限制(2K)

post请求理论上对参数大小无限制

3 post比get安全一些

4 post请求时，除了参数格式不同之外, 还比get请求多了一个Content-type的请求头，它的值是application/x-www-form-urlencoded，

表示本次提交的数据是字符数据, 同时post还可以同时提交二进制数据和字符数据, 如：multipart/form-data

ajax发送请求其实就是模拟http请求

ajax对象的post请求也要加上content-type的请求头。

ajax发送数据是采用UTF-8编码的方式发送的, 所以在PHP中应用ajax技术应及时进行编码转换;

GET模式

GET模式步骤:

创建ajax对象xmlHttp

生成URL

setRequestHeader("If-Modified-Since","0");//解决IE缓存的第三种方法
xmlHttp.onreadystatechange = function(){
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
    //..xmlHttp.responseText..
  }};
xmlhttp.open("GET",URL);
xmlHttp.send(null);
<!DOCTYPE html>
<html>
<head>
<title>GET VS. POST</title>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
        if(window.ActiveXObject)
        xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
        else if(window.XMLHttpRequest)
        xmlHttp = new XMLHttpRequest();
}
function createQueryString(){
        var firstName = document.getElementById("firstName").value;
        var birthday = document.getElementById("birthday").value;
        var queryString = "firstName=" + firstName + "&birthday=" + birthday;
        return encodeURI(encodeURI(queryString)); //两次编码解决中文乱码问题
}
function doRequestUsingGET(){
        createXMLHttpRequest();
        var queryString = "sync.php?";
        queryString += createQueryString() + "×tamp=" + new Date().getTime();
        xmlHttp.onreadystatechange = handleStateChange;
        xmlHttp.open("GET",queryString);
        xmlHttp.send(null);
}
function handleStateChange(){
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                var responseDiv = document.getElementById("serverResponse");
                responseDiv.innerHTML = decodeURI(xmlHttp.responseText); //解码
        }
}
</script>
</head>
<body>
<h2>输入姓名和生日</h2>
<form>
<input type="text" id="firstName" /><br>
<input type="text" id="birthday" />
</form>
<form>
<input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
</form>
<div id="serverResponse"></div>
</body>
</html>

服务器端代码(文件名：sync.php)

<?php
header("Cache-Control: no-cache, must-revalidate"); //解决IE缓存采用第四种方式
header('Content-type: text/html;charset=utf-8');
echo "GET: " . $_GET["firstName"] . ", your birthday is " . $_GET["birthday"];
?>

解决异步连接服务器时IE的缓存问题(GET模式)

随机数:Math.random();

var sUrl = "sync.php?name=zhangsan" + Math.random();//地址不断的变化,此种方法会把Math.random()数据一并返回

var sUrl = "sync.php?name=zhangsan&random=" + Math.random();

缺点：随机数默认返回的是0-1之间的小数, 因为是随机产生的, 也有可能出现重合的情况, 虽然概率很低。


时间:new Date().getTime();

var sUrl = "sync.php?" + new Date().getTime(); //地址不断的变化,此种方法会把new Date().getTime()数据一并返回,故不应该采用
var sUrl = "sync.php?name=zhangsan×tamp=" + new Date().getTime();
xmlHttp.open("GET",sUrl,true);
setRequestHeader("If-Modified-Since","0"); //此语句放在xmlHttp.open()语句后面

这种方法设置ajax对象的请求头 if-modified-since, 强制让ajax对象发送请求

0：表示文件最后修改时间, 会和服务器上这个资源文件最后修改时间进行比较, 时间不一致, 所以服务器返回了最新数据。

以上三种方式并没有根本上解决缓存问题, 前二种方式更是缓存下来N个文件。

header("Cache-Control:no-cache,must-revalidate");

设置http响应头中的cache-control选项,"告诉"浏览器：你不要缓存, 必须每次重新请求。

POST模式

POST模式步骤:

创建ajax对象xmlHttp

生成URL

xmlHttp.open("post","action.php");   // POST请求 action.php 后面没有参数
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

设置请求头信息:content-type：传送数据的数据类型 application/x-www-form-urlencoded ：表示数据是字符串数据

xmlHttp.onreadystatechange = function(){
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
    //..xmlHttp.responseText..
  }
};
xmlHttp.send(data);

data：会自动将参数放到请求空白行的后面

注意:ajax对象的POST请求模式不会产生缓存问题

完整实例:

<!DOCTYPE html>
<html>
<head>
<title>GET VS. POST</title>
<script language="javascript">
      var xmlHttp;
      function createXMLHttpRequest(){
              if(window.ActiveXObject)
              xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
              else if(window.XMLHttpRequest)
              xmlHttp = new XMLHttpRequest();
      }
      function createQueryString(){
              var firstName = document.getElementById("firstName").value;
              var birthday = document.getElementById("birthday").value;
              var queryString = "firstName=" + firstName + "&birthday=" + birthday;
              return encodeURI(encodeURI(queryString)); //两次编码解决中文乱码问题
      }
      function doRequestUsingPOST(){
              createXMLHttpRequest();
              var url = "sync.php?timestamp=" + new Date().getTime();
              var queryString = createQueryString();
              xmlHttp.onreadystatechange = handleStateChange;
              xmlHttp.open("POST",url);
              xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
              xmlHttp.send(queryString); //该语句负责发送数据
      }
      function handleStateChange(){
              if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
              var responseDiv = document.getElementById("serverResponse");
              responseDiv.innerHTML = decodeURI(xmlHttp.responseText); //解码
              }
      }
</script>
</head>
<body>
<h2>输入姓名和生日</h2>
<form>
<input type="text" id="firstName" /><br>
<input type="text" id="birthday" />
</form>
<form>
<input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>

服务器端代码(文件名：sync.php)

<?php
        header('Content-type: text/html;charset=utf-8');
        echo "POST: " . $_POST["firstName"] . ", your birthday is " . $_POST["birthday"];
?>

注意：发送中文字符易出现乱码问题,这是因为异步对象xmlhttp在处理返回的responseText的时候,是按UTF-8编码进行解码的,

而网页的编码方式与UTF-8不一致。通常的解决方法是用encodeURL()和decodeURL(),必须对发送的数据进行两次encodeURL()编码，

代码如下：

function createQueryString(){
        var firstName = document.getElementById("firstName").value;
        var birthday = document.getElementById("birthday").value;
        var queryString = "firstName=" + firstName + "&birthday=" + birthday;
        return encodeURI(encodeURI(queryString)); //两次编码解决中文乱码问题
}

而且在返回数据responseText时再进行一次解码，代码如下：

function handleStateChange(){
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                var responseDiv = document.getElementById("serverResponse");
                responseDiv.innerHTML = decodeURI(xmlHttp.responseText); //解码
        }
}

第二种方法：对ajax传送过来的数据进行转码

<?php
header("content-type:text/html;charset=gb2312");
echo "POST:".iconv("utf-8","gb2312",$_POST['firstName']).",your birthday is ".iconv("utf-8","gb2312",$_POST['birthday']);
?>

注意:以上资料涉及到HTTP状态协议使用HttpWatch软件(强大的网页数据分析工具)查看

POST和GET请求主要是客户端浏览器向服务器端发送的请求信息

在HttpWatch软件的Stream(流)的左边

左边：客户端向服务器端发送数据流

两次对中文编码encodeURI可以用encodeURIComponent代替

Tags：

猜你喜欢

最近发表
标签列表