[JavaScript知识库]【jquery-Ajax】

超文本传输协议（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执行完毕后才会继续运行其他代码。