AJAX使用get与post模式的区别分析
本文实例分析了AJAX使用get与post模式的区别。分享给大家供大家参考。具体分析如下：
如果是get 模式的请求，则将传递参数通过URL 地址发送到服务器端；
如果是post 模式的请求，则将传递参数通过send( ) 方法发送到服务器端（并且必须设置请求文件头）；
post 模式的代码如下：
<script type="text/javascript">
<!--
var queryString = "firstName=xugang&birthday=1227";
var url = "9-3.aspx?timetamp=" + new Date().getTime();
xmlHttp.open("POST",url);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(queryString); //该语句负责发送数据
//-->
</script>
一个演示get 模式与post 模式区别的示例：
客户端：
代码示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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)); //两次编码解决中文乱码问题
}
// GET 模式
function doRequestUsingGET(){
createXMLHttpRequest();
var queryString = "9-3.aspx?";
queryString += createQueryString() + "×tamp=" + new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET",queryString);
xmlHttp.send(null);
}
// POST 模式
function doRequestUsingPOST(){
createXMLHttpRequest();
var url = "9-3.aspx?timestamp=" + new Date().getTime();
var queryString = createQueryString();
xmlHttp.open("POST",url);
xmlHttp.onreadystatechange = handleStateChange;
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="GET" onclick="doRequestUsingGET();" /><br>
<input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>
服务器端
代码示例：
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
if(Request.HttpMethod == "POST")
Response.Write("POST: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
else if(Request.HttpMethod == "GET")
Response.Write("GET: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
%>
通常在数据不多，并且不敏感的时候，使用get 模式的请求；
而数据量大，或者数据敏感的时候，使用post 模式的请求。
希望本文所述对大家的Ajax程序设计有所帮助。
相关推荐
-
在Ajax中使用get和post所遇到的问题及解决办法
使用get遇到的问题: 1.问题一. 缓存:当每次访问的url相同,客户端直接读取本地缓存里面的内容,即使后台数据变化前台也不会有变化: 解决方法:在?后面链接一个num=[随机数Math.random()]或者num=[时间戳new Date().getTime()],'1.php?username="May"&'+num(这里没有变量名,避免和后台参数冲突) 2.问题二. 乱码,当传递中文或者特殊字符的时候,前台显示出现乱码 解决办法:使用编码encodeURI('蜗牛')
-
jQuery中Ajax的get、post等方法详解
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法) $.get()方法使用GET方式来进行异步请求.结构为:$.get(url [, data] [, callback] [, type]) $.get()方法参数解释如下: 参数名称 类型 说明 url String 请求的HTML页的URL地址 data(可选) Obj
-
有关Ajax中get和post的使用问题
使用get遇到的问题: 1.问题一. 缓存:当每次访问的url相同,客户端直接读取本地缓存里面的内容,即使后台数据变化前台也不会有变化: 解决方法:在?后面链接一个num=[随机数Math.random()]或者num=[时间戳new Date().getTime()],'1.php?username="May"&'+num(这里没有变量名,避免和后台参数冲突) 2.问题二. 乱码,当传递中文或者特殊字符的时候,前台显示出现乱码 解决办法:使用编码encodeURI('蜗牛')
-
AJAX使用get与post模式的区别分析
本文实例分析了AJAX使用get与post模式的区别.分享给大家供大家参考.具体分析如下: 如果是get 模式的请求,则将传递参数通过URL 地址发送到服务器端: 如果是post 模式的请求,则将传递参数通过send( ) 方法发送到服务器端(并且必须设置请求文件头): post 模式的代码如下: <script type="text/javascript"> <!-- var queryString = "firstName=xugang&birt
-
在jQuery ajax中按钮button和submit的区别分析
复制代码 代码如下: <script type="text/javascript"> $(document).ready(function(){ $("#submit").click(function(){ $.post("sendPwd.php",{QQnum:$("#QQnum").val(),psw:$("#psw").val()},function(data){ $("#aaa
-
IIS7 经典模式和集成模式的区别分析
经典模式是为了与之前的版本兼容,使用ISAPI扩展来调用ASP.NET运行库,原先运行于IIS6.0下的Web应用程序迁移到IIS7.0中只要将应用程序配置成经典模式,代码基本不用修改就可以正常运行.集成模式是一种统一的哀求处理管道,它将ASP.NET请求管道与IIS核心管道组合在一起,这种模式能够提供更好的性能,能够实现配置和治理的模块化,而且增加了使用托管代码模块扩展IIS时的灵活性.假如老的Web应用程序运行于IIS7.0的集成模式下,可能需要对应用程序的web.config文件进行修改,
-
IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别实例分析
本文实例讲述了IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别.分享给大家供大家参考,具体如下: 前面介绍了<Javascript基于AJAX回调函数传递参数>,这里主要来分析一下ajax传递中文参数过程中针对不同浏览器的乱码处理方法. Ajax传递参数为中文时出现乱码,我遇到的情况是: 1.我的数据库连接 编码为 GB2312,latin1_swedish_ci 2.php 文件编码格式为 UTF-8,浏览器显示编码为 : UTF-8 3.我的页面显示方式为两种: 一)页面加载时自
-
JS中使用正则表达式g模式和非g模式的区别
先给大家说下js正则表达式中的g到底是什么意思 g是global的缩写啊! 就是匹配全部可匹配结果, 如果你不带g,在正则过程中,字符串是从左至右匹配的,如果匹配成功就不再继续向右匹配了,如果你带g,它会重头到尾的把正确匹配的字符串挑选出来 例如: var str = 'aaaaaaaa' var reg1 = /a/ var reg2 = /a/g str.match(reg1) // 结果为:["a", index: 0, input: "aaaaaaaa"]
-
AJAX 常用函数创建XMLHTTP对象，区别IE，Mozilla浏览器
AJAX 常用函数创建XMLHTTP对象,区别IE,Mozilla浏览器的函数,网上有很多创建XMLHTTP对象,区别IE,Mozilla浏览器的函数,这个比较不错,大家可以直接拿用了 复制代码 代码如下: function getRequest() { http_request = false; if (window.XMLHttpRequest) { //对于Mozilla﹑Netscape﹑Safari等浏览器,创建XMLHt
-
分享ajax的三种解析模式
一.Ajax中的JSON格式 html代码: <html> <body> <input type="button" value="Ajax" id="btn"> <script> var btn = document.getElementById("btn"); btn.onclick = function(){ var xhr = getXhr(); xhr.open(&quo
-
vue-router的两种模式的区别
1.大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容 优点: 良好的交互体验,用户不需要刷新页面,页面显示流畅, 良好的前后端工作分离模式,减轻服务器压力, 缺点: 不利于SEO,初次加载耗时比较多 2.hash模式 vue-router默认的是hash模式-使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新
-
Java回调函数原理实例与代理模式的区别讲解
java 回调函数例子,及其原理,与代理模式的区别 回调函数 应用程序(application program)会时常通过API调用库里所预先备好的函数.但是有些库函数(library function)却要求应用先传给它一个函数,好在合适的时候调用,以完成目标任务.这个被传入的.后又被调用的函数就称为回调函数(callback function). 作用: 可以把调用者与被调用者分开.调用者不关心谁是被调用者,所有它需知道的,只是存在一个具有某种特定原型.某些限制条件(如返回值为int)的被调
-
vue-router中的hash和history两种模式的区别
众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = has