超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议
设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法
HTTP请求的方式
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请求
$.get('a.json?name=zhangsan&age=29',function(res){
console.log(res)
})
/* 第二种传参的方式 */
$.get('a.json',{name:'zhangsan',age:29},function(res){
console.log(res)
})
$.ajax({
url: 'detailurl?id='+id,
type:'get',/* 默认get请求 */
async:true,/* true异步默认 */
/* false同步 如果请求都是同步 后面的代码不会出现,实战中会出现白屏 转圈 卡顿现象 */
cache:true,/* 开启缓存默认true */
dataType:"json",/* 对返回的字符串类型数据转成json类型 */
success:function(res){
if(res.code =="OK"){
console.log(res.data);
}
},
error:function (res) {
console.log(res.msg);
}
})
post
向指定资源提交数据进行处理请求
<div class="login">
<h3>校友相亲登录页</h3>
<p>
登录名:
<input type="text">
</p>
<p>
密码:
<input type="password">
</p>
<p>
<button class="login-btn" onclick="login()">登录</button>
</p>
</div>
<script>
/* 发送用户名和密码给后台,后台拿到数据,去数据库验证,存在返回成功,不存在返回不存在该用户 */
/* 点击登录调取后台接口 */
function login() {
if (!$('input[type=text]').val().trim() || !$('input[type=password]').val().trim()) {
alert('用户名或者密码不能为空')
return
}
$.ajax({
url:"http://timemeetyou.com:8889/api/private/v1/login",
method:"post",/* 因为登录要加密,所以用post */
data:{
username:$('input[type=text]').val(),
password:$('input[type=password]').val()
},
success:function(res){
if(res.meta.status!=200){
alert(res.meta.msg)
return;
}
}
})
/* post简写 */
let url = "http://timemeetyou.com:8889/api/private/v1/login";
$.post(url, {
username: $('input[type=text]').val(),
password: $('input[type=password]').val()
}, function (res) {
if (res.meta.status != 200) {
alert(res.meta.msg)
return;
}
alert(res.meta.msg)
})
}
</script>
put
put请求一般应用于给服务器上增加资源文件(比如上传功能)
delete
delete请求一般应用于从服务器上删除文件
head
head请求一般应用于获取服务器的响应头信息(respond headers)
get 和 post的区别
1、传输数据大小限制
get请求给服务器传递内容有大小限制(因为浏览器对url的长度有限制,不同的浏览器限制的长度也不一样,所以get请求受这个影响),而post理论上是没有大小限制的。
2、缓存
GET请求会出现缓存,POST没有缓存,一般GET请求不让出现缓存,清除缓存:在url的末尾追加随机数。
xhr.open(“get”,”/getlist?age=12&_=”+Math.random(),true);
3、安全性
GET不安全,而POST相对安全一些(GET是将发送的数据直接拼接在URL的后面,URL劫持会获取到信息)。
同步与异步
ajax是主要用来在前端页面中向服务器后端请求数据,ajax中根据async的值不同分为同步(async = false)和异步(async = true)两种执行方式。
ajax异步请求:
异步请求就当发出请求的同时,浏览器可以继续做任何事,Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。一般默认值为true。异步请求可以完全不影响用户的体验效果,无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。
ajax同步请求:
同步请求即是当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码,相当于是排队,也就是说,当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面处于一个假死状态,当这个ajax执行完毕后才会继续运行其他代码。