以下为找到的各种资源总结,非原创。
1.http中get和post的区别
GET一般用于获取/查询资源信息,而POST一般用于更新资源信息。
1.根据HTTP规范,GET用于信息获取,而且应该是安全的和幂等的。所谓安全的意味着该操作用于获取信息而非修改信息。换句话说,GET 请求一般不应产生副作用。就是说,它仅仅是获取资源信息,就像数据库查询一样,不会修改,增加数据,不会影响资源的状态
注意:这里安全的含义仅仅是指是非修改信息。
(2).幂等的意味着对同一URL的多个请求应该返回同样的结果(部分浏览器会缓存GET请求的response,以至于相同的GET请求会得到相同的response即使服务端的数据已经改变,POST不会被缓存)
2.根据HTTP规范,POST表示可能修改变服务器上的资源的请求
涉及到数据库的增删改查使用post
表面现像上面看看GET和POST的区别:
1.GET请求的数据会附在URL之后(就是把数据放置在HTTP协议头中),以?分割URL和传输数据,参数之间以&相连,如:login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。如果数据是英文字母/数字,原样发送,如果是空格,转换为+,如果是中文/其他字符,则直接把字符串用BASE64加密,得出如:%E4%BD%A0%E5%A5%BD,其中%XX中的XX为该符号以16进制表示的ASCII
POST把提交的数据则放置在是HTTP包的包体中。
2. 提交数据的限制:
(1)”GET方式提交的数据最多只能是1024字节”,因为GET是通过URL提交数据,那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上,URL不存在参数上限的问题,HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器,如Netscape、FireFox等,理论上没有长度限制,其限制取决于操作系统的支持。
注意这是限制是整个URL长度,而不仅仅是你的参数值数据长度
(2)理论上讲,POST是没有大小限制的,HTTP协议规范也没有进行大小限制,说“POST数据量存在80K/100K的大小限制”是不准确的,POST数据是没有限制的,起限制作用的是服务器的处理程序的处理能力理论上讲,POST是没有大小限制的,HTTP协议规范也没有进行大小限制,说“POST数据量存在80K/100K的大小限制”是不准确的,POST数据是没有限制的,起限制作用的是服务器的处理程序的处理能力
3.POST的安全性要比GET的安全性高。注意:这里所说的安全性和上面GET提到的“安全”不是同个概念。上面“安全”的含义仅仅是不作数据修改,而这里安全的含义是真正的Security的含义,比如:通过GET提交数据,用户名和密码将明文出现在URL上,因为(1)登录页面有可能被浏览器缓存,(2)其他人查看浏览器的历史纪录,那么别人就可以拿到你的账号和密码了,除此之外,使用GET提交数据还可能会造成Cross-site request forgery攻击。
总结一下,Get是向服务器发索取数据的一种请求,而Post是向服务器提交数据的一种请求,在FORM(表单)中,Method默认为”GET”,实质上,GET和POST只是发送机制不同,并不是一个取一个发!
原生发送Http请求:
<script type="text/javascript">
//使用http请求的步骤
//第一步:创建XMLHttpRequest对象
var request = function(){
if(window.XMLHttpRequest === undefined){
//在ie5和ie6中模拟XMLHttpRequest构造函数
window.XMLHttpRequest = function(){
try{
return new ActiveXObject("Msxml2.XMLHTTP.6.0");
}catch(el){
try{
return new ActiveXObject("Msxml2.XMLHTTP.3.0");
}catch(e2){
throw new Error("出错了!");
}
}
}
}else{
return new XMLHttpRequest();
}
}
//第二步:调用XMLHttpRequest对象的open()方法指定请求的两个必须部分,即方法和URL
/* * 第一个参数指定http方法和动作
* 第二个参数指定是URL是请求的主题,当时跨域请求时会报错
* */
request.open("GET", url);
/*
* 第三部:如果有请求头的话,请求进程下个步骤就是设计它
* 例如POST请求需要“Content-Type”头指定请求主题的MIME*/
request.setRequestHeader("Content-Type", "text/Plain");
/* 第四步:使用XMLHttpRequest发起http请求的最后一步是指定可选的请求主题并向
* 服务器发送它,使用send()方法*/
request.send(null);
/*注意GET请求绝对没有主体,所以应该传递null或者省略这个参数
* POST请求通常拥有主体,同时它应该匹配使用setRequestHeader()指定Content-Type头
* http求情的顺序:
* 请求方法和URL首先到达,然后是请求头,
* 最后是请求主体*/
//实例:
function postMessage(msg){
var request = new XMLHttpRequest();//新请求
request.open("POST", "./log.php");//用post向服务器发送脚本
request.setRequestHeader("Content-Type", "text/Plain;charset=UTF-8");//纯文本请求体
request.send(msg);
}
/*解析http响应
* 当响应到达时,把它以解析后的XML document对象、解析后的json对象
* 或字符串形式传递给回调函数*/
function get(url, callback){
var request = new XMLHttpRequest();//新请求
request.open("GET", url);
request.onreadystatechange = function(){
if(request.readyState === 4 && request.status === 200){
var type = request.getResponseHeader("Content-Type");
//获得响应类型
if(type.indexof("xml") !== -1 && request.responseXML){
callback(request.responseXML);//document对象响应
}else if(type === "application/json"){ callback(JSON.parse(request.responseText));//json响应
}else{
callback(request.responseText);//字符串响应
}
}
}
request.send(null);
}
/*
* 表单编码请求
* 如果html表单的名/值对,使用application/x-www-form-urlencode格式*/
function encodeFormData(data){
if(!data){
return "";//一直返回字符串
}
var pairs = [];
for(var name in data){
if (!data.hasOwnProperty(name)) {//判断一个对象是否有你给出名称的属性或对象
continue;
}
if(typeof data[name] === "function"){
continue;
}
var value = data[name].toString();
name = encodeURIComponent(name.replace("%20", "+"));//编码名称 value = encodeURIComponent(value.replace("%20", "+"));
pairs.push(name + "=" + value);
}
return pairs.join('&');
}
/*
*使用表单编码数据发起一个http post请求*/
function postData(url, data, callback){
var request = new XMLHttpRequest();//新请求
request.open("POST", url);//用post向服务器发送脚本
request.onreadystatechange = function(){
if(request.readyState === 4 && callback){
callback(request);//调用回调函数
}
};
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//纯文本请求体
request.send(encodeFormData(data));//发送表单编码的数据
}
/*
*使用表单编码数据发起一个http get请求*/
function postData(url, data, callback){
var request = new XMLHttpRequest();//新请求
request.open("GET", url + "?" + encodeFormData(data));//用post向服务器发送脚本
request.onreadystatechange = function(){
if(request.readyState === 4 && callback){
callback(request);//调用回调函数
}
};
request.send(null);//发送表单编码的数据
}
/*
*使用json编码的请求*/
function postData(url, data, callback){
var request = new XMLHttpRequest();//新请求
request.open("POST", url);//用post向服务器发送脚本
request.onreadystatechange = function(){
if(request.readyState === 4 && callback){
callback(request);//调用回调函数
}
};
request.setRequestHeader("Content-Type", "application/json");//纯文本请求体
request.send(JSON.stringify(data));//发送表单编码的数据
}
/*
*使用xml编码的请求*/
function postQuery(url, what, radius, callback){
var request = new XMLHttpRequest();//新请求
request.open("POST", url);//用post向服务器发送脚本
request.onreadystatechange = function(){
if(request.readyState === 4 && callback){
callback(request);//调用回调函数
}
};
var doc =document.implementation.createDocument("", "query", null);
var query = doc.documentElement;
var find = doc.createElement("find");
query.appendChild(find);
find.setAttribute("zipcode", where);
find.setAttribute("radius", radius);
find.appendChild(doc.createTextNode(what));//并设计<find>的内容
//向服务器发送XML编码数据
//注意将自动设置content-type头
request.send(doc);//发送表单编码的数据
}
/*
* 使用http post请求上传文件
* 查找有data-uploadto属性的全部<input type="file">元素
* 并注册onchang事件处理程序
* 这样任何选择的文件都会自动通过post方法发送到指定的"uploadto" url
* 服务器的响应式忽略的*/
window.onload = function(){
var elts = document.getElementsByName("input");
for(var i=0; i<elts.length; i++){
var input = elts[i];
if(input.type != "fild"){
continue;
}
var url = input.getAttribute("data-uploadto");//获取上传URL
if(!url){
continue;
}
input.addEventListener("change", function(){
var file = this.files[0];
if(!file){
return;
}
var xhr = new XMLHttpRequest();//新请求
xhr.open("POST", url);//用post向服务器发送脚本
xhr.send(file);
}, false)
}
}
</script>
原生的比较麻烦,,,使用jQuery发送http请求
1. jQuery load() 方法
$.load(URL,data,callback) 方法是从服务器加载数据,并且把得到的数据放入被选元素中
a. url是要访问的地址。
b. 可选参数data是与请求一同发送的查询字符串键/值对集合。
c. 可选参数callback 是回调函数。当load()方法执行完后执行该函数。
2. JQuery POST()方法
$.post(URL,data,callback)方法是想服务器发起post请求。
a.url为要访问的地址
b.data为与请求一同发送的查询字符串键/值对集合。
c. 可选参数callback 是回调函数。当post()方法执行完后执行该函数。
3. JQuery GET()方法
$.get(URL,callback)方法是想服务器发起get请求。
a.url为要访问的地址
b. 可选参数callback 是回调函数。当get()方法执行完后执行该函数。
eg:
$.post("http://localhost:8080/StrutsTest/loading!loading",
{
"userName":userName,
"passW":passW
},
function (data,status)
{
//data为服务器返回的数据 status为请求的状态。
}
);
$.get("http://localhost:8080/StrutsTest/loading!loading?userName=xxx&passW=yyy",
function(data)
{
});
jQuery发送Ajax请求
jQuery中ajax的4种常用请求方式:
1.$.ajax()返回其创建的 XMLHttpRequest 对象。
$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。
如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。
实例:
保存数据到服务器,成功时显示信息。
$.ajax({
type: "post",
dataType: "html",
url: '/Resources/GetList.ashx',
data: dataurl,
success: function (data) {
if (data != "") {
$("#pager").pager({ pagenumber: pagenumber, pagecount: data.split("$$")[1], buttonClickCallback: PageClick });
$("#anhtml").html(data.split("$$")[0]);
}
}
});
2.通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
实例:
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
3. 通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
实例:
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames }, function (data) {
if (data == "ok") {
alert("添加成功!");
}
})
4.通过 HTTP GET 请求载入 JSON 数据。
实例:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
axios
基于http客户端的promise,面向浏览器和nodejs
什么是promise
promise
特色
浏览器端发起XMLHttpRequests请求
node端发起http请求
支持Promise API
监听请求和返回
转化请求和返回
取消请求
自动转化json数据
客户端支持抵御
get 请求:
axios.get('/user?ID=1234')
.then(function(respone){
console.log(response);
})
.catch(function(error){
console.log(error);
});
//上面的请求也可选择下面的方式来写
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error)
});
post 请求:
axios.post('/user',{
firstName:'friend',
lastName:'Flintstone'
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});
更多axios的使用请查看:axios使用