在Ajax中请求的类型可以分为GET和POST两种方法。
get方法效率更高,大部分网站会选择get方法。
post方法由于大小不做限制,在某些情况也会使用post方法。
get方法的优点不多叙述,代码简单,效率高,不需要设置content-type等等。
//1 get method
var xhr = new XMLHttpRequest;
xhr.open("get","1.php?name=MichaelAn&age=25&sex=female",true);
xhr.send(null);
xhr.onreadystatechange = function(){
console.log(xhr.status);
if (xhr.readyState == 4 && xhr.states == 200){
console.log(1);
console.log(xhr.responseText);
}
}
//2 post method
var xhr = new XMLHttpRequest();
xhr.open = ("post","2.php");
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send('name=MichaelAn&age=25&sex=female');
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.states == 200){
var result = xhr.responseText;
console.log(result);
}
}
在特定的情况下,post更合适:
1.无法使用缓存文件(更新服务器上的文件或者数据库)。
2.向服务器发送大量数据(post没有数据量限制)。
3.发送包含未知字符的用户输入。
细节:Ajax在早期ie浏览器不兼容,开发需要考虑兼容性问题。
//检测浏览器兼容性代码:
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2019-3-3 补充
1. 工作中大部分请求需要加很多参数(id token path)所以大部分的请求需要使用post请求。常用的请求还有 delete and put 请求。这两个在更新数据和删除数据时使用较多。
2. 发送请求是,如果请求中包好文件路径或者特殊字符,需要 URL-encoding。
3. 现在很多场合使用 axios 请求,直接使用ajax请求的不是很多。
4. 发送请求的参数:注意是字符串还是字典,接受到的response也需要注意数据类型。
5.发送请求过程中,可能出现404或者500等错误,这时候需要对于 response.error 进行处理,避免界面白屏。