Ajax请求方式
1.get
get请求一般应用于从服务器中获取数据,如果get请求想向服务器传递内容,一般使用url后加问号的方式传参。
1.原生js写Ajax的get请求
//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','detailurl?starName='+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
if (ajax.readyState==4 &&ajax.status==200) {
//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
console.log(ajax.responseText);//输入相应的内容
}
}
2.jQuery写Ajax的get请求
$.ajax({
url: 'detailurl?id='+id,
type:'get',
success:function(res){
if(res.code =="OK"){
console.log(res.data);
}
},
error:function (res) {
console.log(res.msg);
}
})
2.post
post请求一般应用于向服务器推送数据,一般使用请求主体的方式传递给服务器。
1.原生js写Ajax的post请求
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.open('post', '02.post.php' );
//发送请求
xhr.send('要推送的数据');
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
2.jQuery写Ajax的post请求
var datas ={
要推送的数据
}
$.ajax({
url: $api+'/aidu/cms/appstore/save',
method:'POST',
contentType: "application/json;charset=UTF-8",
data:JSON.stringify(datas),
dataType:'JSON',
success:function(res){
if(res.code=='OK'){
console.log(res.data)
}else {
alert(res.msg);
}
}
})
3.put
put请求一般应用于给服务器上增加资源文件(比如上传功能)
4.delete
delete请求一般应用于从服务器上删除文件
5.head
head请求一般应用于获取服务器的响应头信息(respond headers)
响应头信息
获取响应头方式
6.get请求和post请求一些外部区别
一下区别并不是所有的
- 传输数据大小限制
get请求给服务器传递内容有大小限制(因为浏览器对url的长度有限制,不同的浏览器限制的长度也不一样,所以get请求受这个影响),而post理论上是没有大小限制的。 - 缓存
GET请求会出现缓存,POST没有缓存,一般GET请求不让出现缓存,清除缓存:在url的末尾追加随机数。
xhr.open(“get”,”/getlist?age=12&_=”+Math.random(),true);
- 安全性
GET不安全,而POST相对安全一些(GET是将发送的数据直接拼接在URL的后面,URL劫持会获取到信息)。