前言:
如今看官们对“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