龙空技术网

Ajax GET和POST模式

寒笛过霜天 81

前言:

如今看官们对“ajax返回什么类型”大概比较珍视,看官们都需要了解一些“ajax返回什么类型”的相关文章。那么小编也在网上搜集了一些有关“ajax返回什么类型””的相关资讯,希望朋友们能喜欢,看官们一起来学习一下吧!

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)

<?phpheader("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传送过来的数据进行转码

<?phpheader("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代替

标签: #ajax返回什么类型 #ajaxget和post乱码问题 #ajax方法响应数据类型 #ajax之post请求 #给sync的ajax设置timeout